JavaScript简介
HTML\CSS\JavaScript的关系
HTMl结构、CSS修饰、JavaScript交互。
JavaScript的由来
Netscape开发一种名为LiveScript的脚本语言——该语言将同时在浏览器和服务器中使用（设计时可以在服务器端运行，但是在一直没流行起来，直到Node.js的成功，使这个语言开始在后端也流行起来，给整个开发带来了很大的变革）。- 为了敢在发布日期之前发布
Netscape与Sun公司建立了一个开发联盟。(Sun公司发布了Java，而且大火，为了赶热度更名为了JavaScript)-------雷锋和雷峰塔、卡巴斯基和巴基斯坦的关系。 JavaScript1.0取得了巨大的成功之后又发布了JavaScript1.1。- 没多久之后微软在IE3中加入了自家的竞争产品
JScript。（和javaScript差不多，微软的这个举措让网景公司日后蒙羞）。 - 这个时候市面上就有两个版本了javaScript、JScript，但是因为没有标准，两种语言并存导致了很多的问题(比如实现这个功能在Jscript要这样，而在JavaScript要那样)。
- 97年以JavaScript1.1为原型的建议提交给了ECMA(欧洲计算机制造商协会)，完成了ECMA-262的标准制定。
- 98年ISO(国际化标准组织)，也采用了ECMA-262标准。这个时候所有的浏览器厂商都开始将ECMA标准作为JavaScript实现基础。
ECMA
ECMAScript
JavaScript的作用
早期JavaScript用来进行表单验证。现在可以做什么事情：表单验证、用户交互（主要学习）、游戏开发、后端（Node.js）、硬件控制等等。
Atwood定律：Any application that can be written in JavaScript, will eventually be written in JavaScript
Jeff，StackOverflow创始人。
JavaScript特点
JS是弱类型、解释型的脚本语言。
-
弱类型：数据类型不固定，可以随时改变。
-
解释型：相对于编译型来对比的。
编译：我们写的代码我们认识，计算机不认识，我们需要让计算机知道我们写的代码的意思，这个转换的过程称为编译。
- 编译型语言：程序在运行之前需要整体先编译。
- 解释型语言：不会编译，拿一行执行一行。
-
脚本语言
脚本一种程序不能独立运行。在浏览器上面使用的脚本语言。
JavaScript的构成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l6QYqgaw-1636722131656)(img/20200603102745.png)]
-
核心，ECMAScript，负责核心语法部分
ECMA 艾克马
ECMAScript 主要讲ES5开始讲，然后讲ES6、ES7、。。。。。
-
文档对象模型，DOM
-
浏览器对象模型，BOM
ECMAScript
ES和web浏览器没有依赖关系，它定义的是这门语言的基础。WEB浏览器只是运行ES的环境之一。
语法、类型、语句、关键字、操作符等等。
ES5（09）、ES6(15)、ES7（16）
文档对象模型（DOM，Document Object Model）
用来控制页面中内容的元素。
浏览器对象模型（BOM，Browser Object Model）
整个浏览器除了显示内容的部分，什么地址栏、浏览器记录这些都属于BOM。
JavaScript基础语法
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
//这里是输出
alert('我叫闫海静');
console.log('我是个美男子');
document.write('我今年18岁');
</script>
</body>
</html>
-
script标签被放在了body标签中，script标签中写的就是javaScript代码。
-
注释符
//单行注释 /* 块状注释，多行注释 */注释的作用：
- 写程序说明的时候
- 单行注释一般放在代码的后面或代码的上方。
- 多行注释一般来说放在代码的上方。
- 有些代码暂时不用，先注释起来。
- 调试代码
- 写程序说明的时候
-
输出内容的小工具
alert('我叫闫海静'); console.log('我是个美男子'); document.write('我今年18岁');alert()小工具，以弹出框的形式输出内容。console.log()小工具，以控制台日志的方式打印内容。document.write()，将内容显示在页面上。
-
ES中的语句以一个分号结尾。如果省略则由解释器自己确定语句的结尾。
建议所有语句后面都加上分号。
-
关于程序的空白（空格、换行、空行）
所有的空白都会被忽略。
程序中的空白其实是为了增加程序的可读性的。
JS中的__一切__都严格区分大小写。
其他使用JavaScript的方法
-
行内写法
基本不用
- 局限性大。
- 代码分离性差，可读性不强。
<button type="button" onclick="alert('哈哈!')">点击有惊喜!</button> -
页面嵌入
在body的下面或在head中写入script标签，在script标签内去写JS代码。
<script> //这里是输出 alert('我叫闫海静'); console.log('我是个美男子'); document.write('我今年18岁'); </script> -
外部链接
通过
script标签来包含外部JS文件。src属性是必须的。<script src="./xxx.js"></script>带有src属性的script标签不应该在中间包含JS代码，即使包含也会被忽略。
<script src="./xxx.js"> alert('李沛华真英俊！'); alert('陶老师真英俊！'); </script>src属性可以引入一个不是.js的文件也可以是一个后端的文件。<script src="./xxx.php"></script>
变量
什么是变量
可以变的量叫变量。
量就是用来存储数据的容器。
变量好比杯子（容器），水好比数据，拿到杯子就拿到里面的水了。
变量的作用
我可以有多个杯子，每个杯子里面有不同的液体。拿到杯子可以对里面的液体进行一些操作。
同样有变量我拿到变量就可以对变量里面存的值进行操作
程序在运行的时候是需要先将程序从硬盘将内容读取到内存中的。
内存：读、取数据都会比较快，但是断电数据清空。
硬盘：存、取速度较慢，但是断点数据依然存在。
GB、TB
- 1Byte（字节，最小的存储单位） = 8bit
- 1KB=1024Byte
- 1MB=1024KB
- 1GB=1024MB
- 1TB=1024GB
- 1PB=1024TB
- 1EB=1024PB
变量的定义
-
变量的定义（容器）
-
先定义变量然后再赋值
<script> // 在内存中定义了一个变量（容器） var a; // 将10放入到了这个容器中。 a = 10; // 将10从容器中拿走，然后将20放进去。 a = 20; // 我找到a就拿到了里面的值。 console.log(a); </script> -
定义变量的同时直接赋值
var b = 10; b = 21; console.log(b); -
特殊情况
c = 200; console.log(c);上面这种情况绝对不用。
-
一次定义多个变量
-
第一种情况
var d=1,e=2;//和var d=1 ; var e=2是完全等价的。 console.log(d); console.log(e); -
第二种情况
var d = e = 30; console.log(d); console.log(e);- 先声明一个e（e不带var关键字）将30放进去。
- 声明了个变量d（带var的）然后
var d= e - 拿到了e的值之后，将这个值放入到了d中。
-
-
变量的命名规则
变量的起名是有规则的。
规则：
- 数字、字母、下划线、$组成。
- 不能以数字开头
- 不能和关键字、保留字同名。
关键字是语言本身用的，保留字是语言有可能以后用的。
关键字 break do instanceof typeof case else new var catch finally return void continue for switch while debugger* function this with default if throw delete in try 保留字 abstract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger implements protected volatile double import public变量起名要有意义，见名思意。不要拼音，不要用中文作为变量名。
约定俗成的起名方式:
- 大驼峰，每个单词首字母都大写。
BackgroundColor - 小驼峰，第一个单词首字母小写，然后余下的首字母大写
backgroundColor - 下划线，单词和单词之间使用
_来进行分隔。background_color
-
-
案例：有两个变量一个中存储的是100一个中存储的是200，交换其中的值（请用两种方法）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> //方法一：使用第三方的变量 /* var a = 100; var b = 200; var c;//第三方变量 c = a;//将a的值拿出来扔到c里面去 a = b;//将b的值拿出来扔到a里面去。 b = c;//将c的值（原来的a的值）拿出来扔到b里面去。 console.log(a); console.log(b); */ //方法二：使用加减法 var a = 100; var b = 200; a = a + b;//300 （有a的值有b的值） b = a - b;//300-200 //b=100 a = a - b;//300-100 a = 200 console.log(a); console.log(b); </script> </body> </html>
变量的类型（容器中的内容）
变量是容器（杯子），杯子里面可以放很多种东西，水、饮料、酱油、醋、xxx。
-
数据类型（存储的数据的类型）
基本数据类型和对象（复杂、引用）类型
-
基本数据类型：
数值：Number
字符串：String
布尔值：Boolean
undefined
null
-
对象数据类型：后面再说。
-
Number类型
-
整数
获得最大值
console.log(Number.MAX_VALUE);，最小值前面加负号。不超过2的53次方-1。
超过了最大、最小范围将会转换为
-Infinity和Infinity -
小数
小数数值中必须包含一个小数点，小数点后面至少有一个数字。
var a = .1相当于var a = 0.1小数占用的内存比较大所以有时候会转换为整数。
var c = 10.0; console.log(c);小数数值计算的时候不会准确（
0.1+0.2）。var d = 0.1; var e = 0.2; console.log(d + e);解决思路：将小数放大成为整数，进行算数运算之后再变为小数。
var d = 0.1; var e = 0.2; console.log((d*10 + e*10)/10); -
其他的值：
- 二进制，使用0b开头，后面是0或1
- 八进制，0o开头，然后是0~7
- 十六进制，0x开头，然后是09及af
- 科学计数法：1.23e2表示的是1.23乘以10的2次方。
不管多少进制输出的时候都会转为10进制。
-
-
String类型
字符串，字符串可以由双引号或单引号包裹。用哪种哪种引号包裹都没有问题，也没有区别。
var a = 'abc'; var b = "abc";如果出现引号嵌套的情况，需要交叉使用。外双里面就是单，外边是单里面就是双。
var str1 = '李沛华'; var str2 = '123'; var str3 = '';//空串 var str4 = " ";//空白串 var str5 = "i'm fine"; console.log(str1); console.log(str2); console.log(str3); console.log(str4); console.log(str5);如果不想嵌套使用需要用到转义字符。
var str = 'i\'m fine'; console.log(str);一些特殊的字符，在引号中也可以解释。
\r，回车 \n，换行 \t，制表符 \\，斜杠 \'，单引号 \"，双引号回车、换行不是一个东西。
电传打字机，1秒10个字符。打完一行需要0.2秒换行，0.2秒正好2个字符。所以研制人员在每行后面加上两个结束的字符，一个叫回车（打字机将打印头定位在边界），一个叫换行（纸向下移动一行。）。
计算机将这两个概念也应用到了上面。
不同的系统换行不一样。
- windows：
\r\n - Linux：
\n - MacOS中：
\r
- windows：
-
Boolean，布尔值，用来做开关，做条件的处理。
只有两个值：true、false。
true：真的 1 on
false：假的 0 off
-
undefined类型，只有一个值，就是undefined。
表示声明变量但是没有初始化。
var x; console.log(x); -
null类型
null只有一个值就是null。
null在设计的时候用来表示空对象。也就是尚未存在的对象。但是它是基本数据类型。
一般我们在对对象进行初始化或者删除一个对象的时候使用。
var obj = null -
获得变量的类型
格式：
typeof 值/变量返回的结果以数据类型名的小写形式存在。得到的结果都是字符串。
返回的结果：
-
boolean，布尔值
-
string，字符串
-
number，数值
-
undefined，值未定义或没有被初始化。
- 没有声明和初始化的变量都会返回undefined，可以认为其不能真正使用。
- 变量没有声明在使用的时候会报错。没有声明的变量只能进行一种操作就是typeof。
-
object，对象或null的时候
直白：历史原因。
通俗：null不是引用类型的值，是基本类型的值。因为null一般是对对象进行初始化的时候使用。
-
其他的值后面再说。
console.log(typeof (typeof true));//typeof "boolean" string console.log(typeof typeof 1);//tyepof "number" //string console.log(typeof typeof typeof 1);//typeof typeof "number"//typeof 'string'//string -
类型转换的类型
强制类型转换
隐式类型转换
boolean，布尔值
-
string，字符串
-
number，数值
-
undefined，值未定义或没有被初始化。
- 没有声明和初始化的变量都会返回undefined，可以认为其不能真正使用。
- 变量没有声明在使用的时候会报错。没有声明的变量只能进行一种操作就是typeof。
-
object，对象或null的时候
直白：历史原因。
通俗：null不是引用类型的值，是基本类型的值。因为null一般是对对象进行初始化的时候使用。
-
其他的值后面再说。
console.log(typeof (typeof true));//typeof "boolean" string
console.log(typeof typeof 1);//tyepof "number" //string
console.log(typeof typeof typeof 1);//typeof typeof "number"//typeof 'string'//string
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
