8.7 的一些前端基础

08:43 29.06.2022
虽然 html 不区分大小写，但实体字符对大小写敏感
xml 区分

dom模型

f12查看网页元素

vscode设置快速生成html模板：
右侧编辑区域输入一个英文的“!”然后按Tab键。

seo搜索引擎优化
Search Engine Optimizatio

block
块级元素

行内元素

vscode 
CTRL s 给<br>加/之类的
存盘会自动格式化

emmet语法
ul>li*4

模式框
不点掉就啥也干不了

js可以写也可以不写;

/^(\w|-|[\u4E00-\u9FA5])*$/
^ 以后面的为开头
$ 以前面的为结尾
\w 数字，字母，下划线，.
\u4E00-\u9FA5 中文
* 代表前面出现0次或多次
| 或者
所以整个的意思是匹配一个 数字，字母，下划线，-，.，中文组成的一个字串

#090
是
#009900

rgba
a是透明相关的

上层文件 ..

上右下左
没有值找对边

行内元素的宽度由内容决定
但可以转化为块级元素

float产生边框塌陷

09:12 04.07.2022
JavaScript：

js注释 <!-如果不支持js就当什么都没发生->

<script>...</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

js中字符串可以用单或双引号

document.write('<h2>初学"Javascript</h2>');
或
document.write('<h2>初学\'Javascript</h2>');

alert
系统函数，直接拿来用就可以了

声明变量：
java：强类型的编程语言：得指定变量类型 int i = 0;
js：弱类型，声明变量时不能指定变量类型 var i;此时i的值是undefined...(es5)

变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用: i = 5;

eslint对js进行语法检查的，但它认为写;是错的

js区分大小写
;可选可不选

null = undefined

typeof运算符：检测变量的数据类型

lambda表达式 es6
箭头函数

js没有int float什么的
只有number

NaN: not an number

java里 /0 异常
js 里 infinity

js 形参有2 实参可以有1
另一个是undefined

argument实参
parameter形参

function foo(a, b) {
return a + b;
}
function foo(a){
return a*2;
}
console.log(foo(2,3));
javascript没有重载,后定义的同名函数覆盖以前的同名函数

ES5 var没有切级作用域,ES6用1et定义块级作用域

按Ctrl+/即可把选中的代码注释掉，或者按Ctrl+shift+/也可以进行块注释

DOM:Document Object Model
(文档对象模型)

node父类
element note的子类

脚本语言∶不需要编译，运行过程中由js解释器(js 引擎）逐行来进行解释并执行

浏览器分成两部分∶渲染引擎和JS引擎

https://developer.mozilla.org/
MDN 是 Mozilla基金会的开发者网络平台。提供了大量关于各种HTML、CSS和JavaScript功能的开放、详细的文档，以及广泛的Web API参考资料

<script src="my.js"><l script>
引用外部JS文件的script标签中间不可以写代码

js注释：
单行 CTRL /
多行 shift alt a (默认)

name不是关键字但在一些浏览器里有特殊含义

命名开头只能2种符号：_或$
不能数字开头

js弱类型语言
js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
js是动态语言变量的数据类型是可以变化的

JS把数据类型分为两类︰
简单数据类型(Number,String,Boolean,Undefined,Null)
复杂数据类型(object)

JavaScript数字类型既可以用来保存整数值，也可以保存小数(浮点数)

在JS中八进制前面加0，十六进制前面加0x

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)

js里换行不是<br/>标签
是\n （要写在引号里）

字符串的拼接：只要有字符串，后面不管是什么都会变成字符串
'pink' + true (pinktrue)
'12' + 12 (1212)
+号总结口诀:数值相加，字符相连

布尔型和数字型相加的时候，true的值为1 ，false的值为0。

undefined和null：
var variable = undefined;
console.log(variable + 'pink');// undefinedpink
console.log(variable + 1);// NaN undefined 和数字相加最后的结果是NaN
var space = null;
console.log(space + 'pink'); // nullpink
console.log(space + 1);// 1 (一个声明变量给null值，里面存的值为空)

typeof可用来获取检测变量的数据类型:(还可以通过chrome控制台里的颜色)
var num = 10;
console.log(typeof num); // number

// prompt取过来的值是字符型的
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);// String

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

把数字型转换为字符串型：
// 1．变量.toString()
var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);
// 2．String(变量)
console.log(String(num));
// 3．+拼接字符串（隐式转供）
console.log(num + '');

把字符串型转换为数字型：
// 1. parseInt(变量)可以把字符型的转换为数字型得到是整数
//console.log(parseInt(age));
console.log(parseInt( '3.14'));// 3 取整
console.log(parseInt( '3.94'));// 3 取整
console.log(parseInt('120px'));// 120会去掉这个px单位
console.log(parseInt('rem120px'));// NaN 
// 2.
console.log(parseFloat( '3.14')); // 3.14
// 3．利用Number(变量)
var str = '123";
console.log(Number(str));
console.log(Number('12'));
// 4.利用了算数运算-*/隐式转换
console.log('12' - 0); // 12 

转换为布尔型:
代表空、否定的值会被转换为false，如"、0、NaN、null、undefined
其余值都会被转换为true

解释型语言和编译型语言:
计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。
翻译器翻译的方式有两种:一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同
编译器是在代码执行之前进行编译，生成中间代码文件 java: Demo.java javac.exe Demo.class
解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器) js

标识(zhi4)符

//浮点数算数运算里面会有问题
console.log(0.1 + 0.2);// 0.30000000000000004
// 本身小数已经很小了，小数转换成二进制再进行算数运算就会有误差
console.log(0.07 * 100);// 7.000000000000001
// 3．我们不能直接拿着浮点数来进行相比较是否相等
var num = 0.1 +0.2;
console.log(num == 0.3);// false

// 1 +1 = 2
//在我们程序里面 2= 1 + 1把我们的右边表达式计算完毕把返回值给左边
var num = 1 + 1;

++ age;
// 类似于age = age + 1
先自加，后返回值

var e = 10;
var f = e++ + ++e;// 1.e++ = 10 e =  2.e= 12 ++e = 12
console.log(f);// 22
//后置自增:先表达式返回原值后面变量再自加1
开发时，大多使用后置递增/减，并且代码独占一行

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符。比较运算后，会返回一个布尔值(true/false)作为比较运算的结果。

//赋值 = 把右边给左边
//等于 == 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值
console.log(18 == '18');// true
//全等 === 要求两侧的值还有数据类型完全一致才true
console.log(18 === '18');// false

逻辑与 &&
两边都是true才返回true，否则返回false

除了0外所有的数字都是真的

短路运算（逻辑中断)
当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;
// 逻辑与的短路运算
如果表达式1结果为真则返回表达式2
如果表达式1为假那么返回表达式1
console.log(123 &8 456);// 456
console.log(0 && 456);// 0

var num=0;
console.log(123 || num++）;
console.log(num); // 0

var num = 10;
num =num + 1; // num ++
num=num+2; // num += 2

运算符优先级：
先 && 后 ||
—元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高
逗号运算符优先级最低

console.log(4 >= 6 || '人' != '阿凡达' && !(12* 2 == 144) && true); 
// f || t && t && t
// f || t
// t
var num = 10;
console.log ( 5 == num / 2 && (2 + 2 * num).tostring() == '22');
// t 

流程控制主要有三种结构，分别是顺序结构、分支结构(if, switch)和循环结构(for, while, do while)，这三种结构代表三种代码执行的顺序。

单分支 if
双分支 if else
多分支 if, else if, else

if里面的语句1和 else里面的语句2最终只能有一个语句执行―2选1
else if 后面有（条件表达式）{执行语句;}
else后面直接跟{执行语句;}，没有（条件表达式）

伪代码

三元表达式：
数字补0案例
var time = prompt('输入');
var result = time < 10 ? '0' + time : time;
alert(result);

switch语句和if else if 语句的区别:
一般情况下，它们两个语句可以相互替换
switch..case语句通常处理case为比较确定值的情况，而if..else...语句更加灵活，常用于范围判断(大于、
等于某个范围)
switch语句进行条件判断后直接执行到程序的条件语句，效率更高。而if..else语句有几种条件，就得判断多少次。
当分支比较少时，if...else语句的执行效率比switch语句高。
当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

for(初始化变量1;条件表达式2;操作表达式3){
//循环体4;
}// 1 2 4 3 2 4 3 2 4

var num = prompt(请输入星星的个数');
var str = '';
for (var i = 1; i <= num; i++){
str = str + '★';
}
console.log(str);

双重for循环：
外层循环循环一次，里面的循环执行全部

str = str + '\n';// 换行

continue关键字用于立即跳出本次循环，继续下一次循环(本次循环体中continue之后的代码就会少执行一次)。
for (var i = 1; i <= 5; i++) {
  if (i == 3){
    continue; // 只要遇见 continue就退出本次循环直接跳到i++
  }
  console.log('我正在吃第' + i +'个包子');
}

break关键字用于立即跳出整个循环（循环结束)。

JavaScript中数组长度是可以变化的，方法：1、通过改变数组length属性的值来改变数组长度，语法“arr.length=长度值”；2、利用unshift()、shift()、splice()等方法添加或删除数组元素来改变数组长度。

// 可以通过修改数组索引的方式追加数组元素
var arr =['red','green','blue'];
console.log(arr.length);
arr.length = 5; //把我们数组的长度修改为了5里面应该有5个元素

arr1 ="有点意思';
console.log(arr1);//不能直接给数组名赋值，否则会覆盖掉以前的数据

冒泡排序:一次比较两个元素，顺序错误就交换。

函数∶就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
函数在使用时分为两步:声明函数和调用函数。
函数是做某件事情，函数名一般是动词

function 函数名(形参1,形参2...){//在声明函数的小括号里面是形参（形式上的参数)
}
函数名(实参1,实参2...);//在函数调用的小括号里面是实参（实际的参数)
// 形参是接受实参的 形参类似于一个变量
// 函数的参数可以有，也可以没有个数不限
// 形参可以看做是不用声明的变量
// 函数可以带参数也可以不带参数

函数形参和实参个数不匹配问题：
实参个等于形参个数： 输出正确结果
实参个数多于形参个数： 只取到形参的个数
实参个数小于形参个数： 多的形参定义为undefined，结果为NaN

函数的返回值: return语句
return语句之后的代码不被执行。
return只能返回一个值。如果用逗号隔开多个值，以最后一个为准。
return [num1 + num2,num1 - num2，num1 * num2,num1 / num2];// 但可以以数组形式为整体返回多个值
函数没有return返回undefined

只要函数遇到return就把后面的结果返回给函数的调用者
函数名() = return后面的结果
function getResult(){
return 666;
}
getResult();// getResult() = 666
console.log(getResult());

break,continue,return的区别
break:结束当前的循环体(如for、while )
continue:跳出本次循环，继续执行下次循环(如for、while )
return:不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码

当我们不确定有多少个参数传递的时候，可以用arguments来获取。
在JavaScript中,arguments实际上它是当前函数的一个内置对象。
所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历。
伪数组具有以下特点:
具有length属性
按索引方式储存数据
不具有数组的push, pop等方法

// arguments的使用
// 只有函数才有arguments对象，而且是每个函数都内置好了这个arguments
function fn(){
console.log(arguments); // 里面存储了所有传递过来的实参
} 
fn(1，2，3); 
// Arguments(3) [1,2,3, callee: f, Symbol(Symbol.iterator): f]
// 可以按照数组的方式遍历arguments

//利用函数求任意个数的最大值
function getMax() { // arguments = [1,2,3]
  var max = arguments[0];
  for (var i = 1; i < arguments.length; i++)i
    if (arguments[i] > max){
      max = arguments[i];
    }
  }
  return max;
}
console.log(getMax(1,2，3));

函数可以调用另外一个函数

//函数的2种声明方式
// 1．利用函数关键字自定义函数(命名函数)
function fn(){
}
fn();
// 2．函数表达式(匿名函数)
//var 变量名= function(){};
var fun = function(){
console.log('我是函数表达式');
}
fun();
// (1)fun是变量名不是函数名
// (2）函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值而函数表达式里面存的是函数
// (3）函数表达式也可以进行传递参数

作用域:就是代码名字在某个范围内起作用和效果
提高程序可靠性 减少命名冲突

ecma 欧洲计算机制造商协会 
European Computer Manufacturers Association

// js的作用域（es6）之前:全局作用域 局部作用域
// 全局作用域:整个script标签或者是一个单独的js文件
var num = 10;
// 局部作用域(函数作用域)：在函数内部就是局部作用域这个代码的名字只在函数内部起效果和作用
function fn(){
//局部作用域
var num = 20;
}

// 在全局作用域下var声明的变量是全局变量
// 特殊情况下，在函数内不使用var声明的变量也是全局变量(不建议使用)
// 在函数内部var声明的变量是局部变量
// 函数的形参实际上就是局部变量
function fun() {
  var num1 = 10; // num1就是局部变量只能在函数内部使用
  num2 = 20; // 注意:如果在函数内部,没有声明直接赋值的变量也属于全局变量 
}
fun();
// console.log( num1);
console.log(num2);

从执行效率来看全局变量和局部变量
(1）全局变量:只有浏览器关闭的时候才会销毁，比较占内存资源
(2)局部变量:当我们程序执行完毕就会销毁，比较节约内存资源

JS没有块级作用域
js的作用域:全局作用域 局部作用域
js 也是在 es6的时候新增的块级作用域

java:
if(xx){
  int num = 10;
}
//外面的是不能调用num的
js:
if (3< 5){
  var num = 10;
}
console.log(num); // 可以调用

作用域链:内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值
这种结构我们称为作用域链
就近原则

function f1(){
  var num = 123;
  function f2(){
    console.log(num);
  }
  f2();
}
var num = 456;
f1(); // 123

预解析：
JavaScript代码是由浏览器中的JavaScript解析器来执行的。
JavaScript解析器在运行JavaScript代码的时候分为两步:预解析和代码执行。

预解析：
js引擎会把js里面所有的 var 还有 function 提升到当前作用域的最前面
变量预解析（变量提升）和函数预解析（函数提升)
变量提升:把所有的变量声明提升到当前的作用域最前面，不提升赋值操作(var num; 和 num = 10;)
函数提升:把所有的函数声明提升到当前作用域的最前面，不调用函数
// 函数表达式调用必须写在函数表达式的下面
代码执行：
按照代码书写的顺序从上往下执行

console.log(num); // undefined
var num = 10;

fn(); // 可以调用
function fn() {
  console.log(11);
}

fun(); // 报错
var fun = function() {
  console.log(22);
}

// 案例
function f1()i
  var b = 9;
  console.log(a);
  console.log(b);
  var a= '123';
}
// 相当于
function f1(){
  var b;
  var a;
  b = 9;
  console.log(a);
  console.log(b);
  a='123';
} 
// 输出： undefined 9

// 案例
f1();
console.log(c);
console.log(b);
console.log(a);
function f1(){
  var a = b = c = 9;
  console.log(a);
  console.log(b);
  console.log(c);
}
// 相当于
function f1(){
  var a;
  a = b = c = 9;
  // 相当于: var a= 9; b = 9; c= 9; (b和c直接赋值，没有var声明当全局变量看)
  // 集体声明是有逗号: var a = 9, b = 9, c = 9;
  console.log(a);
  console.log(b);
  console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);
// 输出： 9 9 9 9 9 报错（因为后面a是局部变量了） // Uncaught ReferenceError: a is not defined

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的。
属性:事物的特征，在对象中用属性来表示(常用名词)
方法:事物的行为，在对象中用方法来表示(常用动词)

保存一个值时，可以使用变量
保存多个值(一组值)时，可以使用数组。

在JavaScript中，现阶段我们可以采用三种方式创建对象(object) :
1.字面量创建对象:
对象字面量:就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法。 
// 小括号：运算符优先级； 中括号：数组字面量； 大括号：对象字面量
// var obj = {}; //1.创建了一个空的对象
var obj = {
  uname:'张三疯',
  age: 18,
  sex: '男',
  sayHi: function(){
    console.log('hi~');
  }
}
// (1）里面的属性或者方法我们采取键值对的形式键属性名:值属性值
// (2）多个属性或者方法中间用逗号隔开的
// (3）方法冒号后面跟的是一个匿名函数
使用对象:
// (1）调用对象的属性：对象名.属性名('.' 理解为 '的')
console.log(obj.uname);
// (2)调用属性还有一种方法: 对象名['属性名']
console.log(obj['age']);
// (3）调用对象的方法sayHi: 对象名.方法名 (别忘记加小括号)
obj.sayHi();

2.new Object创建对象:

3.构造函数创建对象: