尚硅谷李立超JavaScript笔记

目录

1.JS简介

1.ECMAScript是JavaScript的标准
2.一个JS包含三个元素:ECMAScript,DOM(文档对象模型: 如何通过JS操作网页),BOM(浏览器对象模型: 如何通过JS操作浏览器)
3.JS是一种解释形语言，动态语言(和Py一样的一个变量多类型)，是OOP语言

2.JS的HelloWorld

• 注意

1. JS代码要写在HTML的script标签中,type=text/javascript (默认)
2. 代码以分号结尾

• 在浏览器中弹出一个警告框：

alert("XXX")弹出一个通知框，显示XXX内容，出现一个“确定”按钮

• 页面上输出内容

document.write("XXX");直接在网页中显示双引号的HTML代码，例如:write("1
2
3")，值得注意的是显示的文字并不会出现在网页原代码的body部分

• 向控制台输出某句话

console.log("XXX")向控制台输出一个内容

3.JS代码编写的位置

可以将JS代码编写到标签的onclick属性中，当我们点击代码的时候JS代码就会执行，例如如下代码会在点击的时候弹出"讨厌，你点我干嘛~"

<button onclick="alert('讨厌，你点我干嘛~')">点我一下</button>

*注意：alert( )里面用的是’’,单引号

可以将JS代码写在超链接的href属性中，这样当点击超链接时，会执行js代码，要记得在前面写javascript:

 <a href="javascript:alert('让你点你就点！！');">你也点我一下</a>

但是这种直接写在标签里面的形式不方便维护，所以不推荐使用，和CSS一样JS可以写在script里面，也可以写在外部文件里面, 外部引用的写法：

<script type="text/javascript" src="./xxx"></script>

例如：

1. 创建外部文件：script.js

2.  `
   

• script标签一旦用于引入外部文件了，就不能再编写代码了，即使编写了浏览器也会忽略。如果需要则可以再创建一个新的script标签用于编写内部代码
• JS代码是按照自上向下的顺序执行的

4.JS的基本语法

1.JS的注释：单行//,多行/**/，注释会显示到源代码中，可以通过注释对代码进行简单的调试
2.HTML不区分大小写，但是JS严格区分大小写
3.JS中每一条语句以分号结尾(如果不写分号，浏览器会自动添加，但是消耗内存，而且有些时候浏览器会加错分号)
4.JS中忽略多个空格与换行，可以利用这个特性进行代码格式化

5.字面量与变量

1.字面量: 可以认为字面量是常量，是一些不可改变的值，比如1 2 3 4 5
2. 字面量都是可以直接使用的，但是一般都不会直接使用字面量
3.变量可以用来保存字面量，并且变量是可以任意改变的，变量更加方便我们使用，所以在开发的时候都是通过变量去保存一个字面量，而很少直接使用字面量

• 在JS中使用var关键字来声明一个变量, 但是刚声明的变量没有进行赋值不能直接使用，例如

var a;
console.log(a);

这里会输出undefined, 但是和没有声明不一样，没声明报错：Uncaught ReferenceError: XXX is not defined

• 声明赋值可以同时进行

• 可以通过变量对字面值进行描述

6.标识符

在JS中所有可以自主命名的全部可以称为标识符，例如: 变量名、函数名、属性名都属于标识符

• 注意

1. 命名一个标识符的时候我们可以写 字母 数字 下划线 $
2. 不能以数字开头
3. 标识符不能是JS中的关键字的保留字，例如var
4. 标识符建议采用驼峰命名法：首字母小写，其余单词开头大写（helloWord, xxxYyyZzz)
5. JS在保存标识符的时候采用的是Unicode编码，所以理论上Utf-8中含有的内容都可以作为标识符。（中文可以，但是千万别这样用）

附：

7.数据类型

数据类型指的是字面量的类型，在JS中一共有六种数据类型

• String（字符串）

• Number(数值）

• Boolean（布尔值）

• Null(空值)

• Undefined(未定义)

• Object(对象)

  其中String、Number、Boolean、Null、Undefined属于基本数据类型，Object属于引用数据类型

ps. 动态语言的好处，把很多类型直接整合到一起

其中基本数据类型就是除了Object之外的，Object属于引用数据类型

可以使用运算符号typeof()检查变量类型,例如

var a=123;
var b="123"

console.log(a);
console.log(b);
console.log(typeof(a));
console.log(typeof(b));

输出结果：

123
123
number
string

• String字符串:

   1. JS中字符串需要用引号(单引号或双引号均可)引起来
  
   2. 注意单引号里面用双引号，双引号里面用单引号
  
   3. 如果你就是不想用单引号，那么就要告诉浏览器你这里的双引号是用来干啥的，是框字符串的还是一个普通的双引号，这里我们可以使用\作为转意字符，例如\",例如var str2="我说：\"今天天\'气真不\'错\"";，转意字符还有\n: 换行，\t: 制表符,\\表示\
  
    和C语言完全一样
  

• Number数值:

   1. 在JS中所有类型的数字全是Number不区分float,int
   2. Number的最大值: 可以输出Number.MAX_VALUE 为: 1.7976931348623157e+308, 如果我们要求输出Number.MAX_VALUE * Number.MAX_VALUE结果会显示Infinity(表示正无穷）。
   3. 注意Infinity是一个字面量，允许被赋值，值得注意的是一定不能加引号，否则就是字符串了，并且注Infinity的typeof是Number, 存在-Infinity
  4.  两个字符串相乘的结果是NaN 表示Not a Number, 与Infinity同理，字面量可以赋值，typeof是Number,不要引号。
  5.  Number可以表示的最小精度Number.MAX_VALUE,也就是最小正值
  6. JS的浮点数运算可能不精确，所以千万不要用JS进行高精运算，这些给服务器去算
  

  Boolean布尔值：

  与C++完全一样

  Null空值：
  只有一个数据元素就是null
  专门用来表示空对象
  值得注意的是用typeof看null,视频上说会显示Object但是本机上是null,null绝对不是一个对象，null有自己的类型，它是一个特殊的类型，至于为什么会null返回object，这是官方承认的错误

  undefined未定义：
  声明变量不给他赋值就输出会显示这个
  不声明就输出会报错
  typeof()是undefined

8.强制类型转换

• 指的是将一个数据类型转化为String,Number,Boolean

1. 转化为String:
   调用被被转化类型的toString方法: (XXX.toString()),注意，他不会修改原变量，而是作为返回值返回，bool的toString是"true"/"false"但是存在问题，Null的toString会报错Uncaught TypeError: Cannot read property ‘toString’ of null,undefined同理，因为这两个类型没有toString
   调用String()函数: 将被转化的数据作为参数传入, 这个支持Null与Undefined,说白了就是C++的构造函数
2. 转化为Number
   Number函数: 同上，非数字的字符串转Number会NaN，空string串(允许包含任意空格)会转化为0, bool=true转为1,false转化为0, null转为0, undefined转为0
   专门对付字符串的方式：parseInt()与parseFloat(),可以将字符串中有效的对应内容解析，例如parseInt(“123r456”)会先解析123然后遇到r直接break! , 对非string传入参数，会默认先String
   没有toNumber
3. 转化为boolean
   Boolean函数 Number 非0true,0false， String 非空true空false， Null 为false， undefined为false, Object为true

9.其他进制的数字

1. 表示16进制(需要以0x开头)： var a=0x3f3f3f3f;, 输出会自动转化为10进制
2. 表示8进制(需要以0开头)： var a=070;, 输出会自动转化为10进制
3. 表示2进制(需要以0b开头)： var a=0b10;, 输出会自动转化为10进制

• 注意parseInt(“070”)会被不同浏览器解析成10或8进制,只需改为parseInt(“070”,8)即可

算数运算符

运算符也叫操作符，例如:+,typeof()[返回值是string]

算数运算符:+,-,*,/,%：

• +: 对非Number进行运算的时候遵循上面的规律进行转化运算，NaN参与运算结果一定是NaN，特殊的，两个字符串相加(只有相加)的结果是两个字符串拼接，任何值与字符串相加数字会转化为字符串任何拼接,包括NaN，利用这个性质可以任意类型+空字符串得到字符串类型，隐式类型转化

 Infinity+"hello"
 "Infinityhello"
  NaN+"hello"
 "NaNhello"

运算是自左向右的所以"1"+2+3=“123”,1+2+“3”=“33”

• -/ *//:对非Number进行运算的时候遵循上面的规律进行转化运算，NaN参与运算结果一定是NaN，特殊的，字符串相减的时候会转化为Number，利用这个性质可以做string隐式类型转化为Number

• %取模运算

一元运算符

一元运算符:+,-

• Number:+不会产生影响，-会取反
• 非Number会先转化再运算,例如-true=-1,-NaN=NaN
• 利用这个性质+a可以吧a转化为Number，例如+“1”+2+3=6

自增自减

• 自增可以使得变量在自身的基础上加1,a++ <=> a=a+1,++a <=> a=a+1,自带赋值，前后++与C语言相同
• 自减可以使得变量在自身的基础上减1,a-- <=> a=a-1,–a <=> a=a-1,自带赋值，前后–与C语言相同
• 唯一的区别是后++是先给值然后马上自增，没有C++所谓的分隔符，例如

var b=10;
console.log(b++ + ++b + b);

结果是

   10+12+12=34       

并且注意

var b=10;
b=b++;
console.log(b);

等价于

var b=10;
var c=b++;
b=c;
console.log(b);

同样的--同理

逻辑运算符

三个:非!,与&&,或||

• !:对bool进行运算就是取反，对非bool会先转化为bool我们可以利用他将一种类型将其转化为bool,方法是!!tmp

var a=false;
console.log(!a);
console.log(!!a);

var b=10;
console.log(!b);
console.log(!!b);

得到结果

true
false
false
true

-&&，||与C相同，也有短路，非bool进行运算需要先转换为bool进行运算，然后返回原值

1. &&两个值都是true返回后边的
2. &&有false，返回第一个false对应的
3. ||有true返回第一个true对应的
4. 第一个是false返回第二个

说白了返回值就是在加入短路原则之后最后判断的那个元素

赋值运算符

+=,-=,*=,/=,%=与C完全相同

关系运算符