前端语言的基本能力

前端三剑客HTML CSS Javascript

HTML 描述一个网页的内容

CSS 设计一个网页的样式

语法简单 Selector { Property : Value; }

Javascript 实现网站的功能和交互

Javascript 借鉴C语言的基本语法借鉴Java语言的数据类型和内存管理借鉴Scheme语言，将函数提升到”第一等公民“（first class）的地位借鉴Self语言，使用基于原型（prototype）的继承机制

JS中的数据类型

String Number Boolean Null Undefined Symbol Object(Array, Function)

用var声明变量可以重复声明，可以变量提升 let则不行，虽然变量值能改变。使用const声明变量则不可改变

==引申：== 这些数据类型分为基本类型值和引用类型值 基本类型值 当var a = b 时，内存中产生新的副本，当用 == 比较时，比较值是否相等 引用类型值 当var a = b 时，内存不产生新的副本，而是让新变量指向同一个对象；当用== 比较时：比较内存是否相同，即比较是否为同一对象。 对象是引用类型值，所以不能用var obj2=obj1这样的语法克隆一个对象

var obj1 = {
a:1
}
var obj2 = {
a:1
}
var obj3 = obj1;
console.log(obj1===obj2);//false
console.log(obj1===obj3);//true

对象的深浅克隆 浅克隆

var obj1 = {
a:1,
b:2,
c:[2,44,5]
};
var obj2 = obj1;//这种方法不能算克隆！！！
//两个变量地址仍然相同

var obj3 = {};
for(var k in obj1){
obj3[k] = obj1[k];
}
//上述方法为浅克隆，obj1内基本类型值改变，obj2不会跟着改变，但obj1中引用类型值（比如数组）改变时，obj2会跟着改变。

深克隆（使用递归函数）

function deepClone(o){
  //判断o是对象还是数组
  if(Array.isArray(o)){//要优先判断是不是数组！！！因为数组用typeof判断结果还是object
    var result = [];
    for (var i = 0; i<o.length; i++){
      result.push(deepClone(o[i]));//递归，层层拆解对象
    }
  }else if(typeof o == 'object'){
    //对象
    var result = {};
    for (var k in o){
      result[k] = deepClone(o[k]);
    }
  }else{
    //基本类型值
    var result = o;
  }
  return result;
}

函数

形参、实参回调函数，promise解决回调地狱设置默认参数

function add(a=1,b){
	return a+b;
}

将剩余参数打包

const fn = (a,b, ...args)=>{
	return 1;
}

浏览器运行

前端语言的协作配合

CSS in HTML

inline

<p style="color:blue;">aaa</p>

internal

<head>
  <style>
   body {
	   background-color: blue;
   }
  </style>
</head>

external

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Javascript in HTML

在script标签里写，或者链接外部js文件 DOM概念事件捕捉，事件捕获先由外到内层层捕捉，在从内到外层层冒泡 宏任务，微任务 js在运行代码时会先运行宏任务，在运行微任务 microtask queue process.nextTick() Promise.callback async function queueMicrotask macrotask queue setTimeout() setInterval() setImmediate()

mustache模块

这部分自己上网了解 (2条消息) Mustache 模板引擎_mustache tpl_tang_yi_的博客-CSDN博客

CSS in Javascript

可以使用Js改变元素样式

let box = document.querySelector("div.box1");

box.style.width="100px";
box.style.height="20px";
box.style.backgroundColor = "red";

==注意：== 使用js设置样式的时候，属性名称改为驼峰命名法比如css中的 inline-block改为 inlineBlock

选择器

你不知道的HTML（5）

HTML DTD

基本语法标签（元素） <tagname>s</tagname> 文本注释 DTD Document Type Defination 处理信息

标签分类

做了解

head标签

body功能性标签

HTML ARIA

Accessible Rich Internet Applications(WAI-ARIA，简称 ARIA)是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用(特别是那些由 JavaScript 开发的)的一套机制。最值得注意的是，它包含了一组属性，我们可以添加到 HTML 元素中，将更多的语义信息嵌入其中，这些信息可以被辅助技术读取。

(2条消息) 在 HTML 中使用 ARIA 的规则_lio_zero的博客-CSDN博客

语义化标签

<header></header>
<section></section>
<footer></footer>
<main></main>

HTML5存储

cookies local storage session storage (这部分已学习，看以往笔记) 数据库 IndexDB 数据库基础：IndexedDB_innagine的博客-CSDN博客

PWA &AMP

PWA（Progressive Web App，渐进式网页应用，逐渐接近原生app的web app）是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验。

HTML5 Audio

//创建一个音频上下文
const audioCtx = new(window.AudioContext || window.webkitAudioContext);
//创建一个正弦振荡器
const osci = audioCtx.createOscillator();
//创建一个音量增幅器
const gain = audioCtx.createGain();
//正弦振荡器关联音量增幅器
osci.connect(gain);
//音量增幅器关联音频上下文的音频输出器
gain.connect(audioCtx.destination);
//开始正弦波动
osci.start();

HTML5 Video

大部分情况使用vedio标签即可完成

const mediaSourse = new MediaSourse();
const video = document.createElement("video");
video.src = mediaSourse;
mediaSourse.addSourseBuffer(...);
video.play;

HTML5 二进制

function loadAsText(file){
	cosnt reader = new FileReader();
	reader.onload = function(loadedEvent){
	console.log(loadedEvent.target.result);
}
//输出文本字符串格式
reader.readAsText(file);
//输出二进制数组格式
reader.readAsArrayBuffer(file);
//输出DataURL格式字符串
reader.readDataURL(file);
}

HTML5 API

HTML5 Web Worker

一种多线程方式

HTML5 Web Socket

HTML5 Shadow DOM

HTML5 Web Component

自定义标签

HTML5 SVG & Canvas

WebGL & WebGPU

HTML5 WebAssembly

拓展分享

Web的风靡 MVC MVVM MVP

==学习得失== 对于html我还有video audio这些标签没有学， css里面的选择器只了解了基础的，伪类这些都没学今天讲的html5的大部分内容都没了解过。之后计划在把前端慕课拉完一遍后逐个了解这些细节

青训营Day1 前端语言串讲笔记