JavaScript 是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器中的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
特点：
1、弱语言 2、区分大小写
3、面向对象 4、跨平台
页面中添加JavaScript代码
语法： <script type="text/javascript"> </script> //js相关代码 js代码可以放到网页的任意位置
JavaScript的组成
JavaScript由ECMAScript（基本语法）、DOM（文档对象模型）、BOM（浏览器对象模型）三部分组成
代码书写位置
有三种书写位置，分别是行内式、内嵌式（嵌入式）和外部式（外链式）
1、行内式
是指将单行或少量的JavaScript代码写在HTML标签的事件属性中（也就是以on开头的属性，如onclick）
<input type="button" value="点我" onclick="alert('行内式')">2、内嵌式
是指使用 <script> 标签包裹JavaScript代码，<script>标签可以写在<head>或者<body>标签中，可以将多行JavaScript代码写在<script>标签中
<script>
alert('内嵌式') ; // 弹出一个警告框。警告框中显示“内嵌式”
</script>3、外链式
是指将JavaScript代码写在一个单独的文件中，一般用 "js" 作为文件的扩展名。 有利于HTML页面代码结构化。外链式 script标签内不允许写其他JavaScript代码
具体操作
1.创建demo03.html代码，用来编写外部式 JavaScript 代码
<head>
<script src = "test.js"> </script>
</head>2.创建test.js文件，在文件中编写JavaScript代码
alert（'外部式'）;
3.伪协议，另一种嵌入JavaScript 代码的方法
<a href="javascript:alert('伪协议')">点我</a>JS输出语句
1、alert('内嵌式') ; // 弹出一个警告框。警告框中显示“内嵌式”
2、document.write("未来的我你好呀！");
// 在页面中显示 “未来的我你好呀！”在 body标签中写入内容
3、cosole.log("猜猜我在哪"); //向控制台输出一个内容JS按钮标签
1、<button> 按钮
<button onclick = "alert('点我干嘛,讨厌');"> 点我一下 </button>
// 在网页中 出现button按钮，每点击一次出现一个警告框并显示“点我干嘛，讨厌”2、 <a>按钮
<a href = "javascript:alert('让你点你就点！');"> 点我一下 </a>
// 在网页中显示链接，点击一下就显示警告框，警告框中显示 “让你点你就点”JavaScript基本语法规则
1、严格区分大小写
2、对空格、换行、缩进不敏感，一条语句可以分为多行书写
3、如果一条语句书写结束后，换行书写下一条语句，前一行语句后面的分号可以省略
JavaScript异步加载
1、async
用于异步加载，即先下载文件，不阻塞其他代码运行，下载完成后再执行
<script src= "file.js" async></script>2、defer
用于延后执行，即先下载文件，直到网页加载完成后再执行
<script src= "file.js" defer></script>注释
1、单行注释 //
以 "//" 开始，在vscode 中用快捷键 CTRL+/
2、多行注释 /* */
以 " /* " 开始 ， " */ "结束。多行注释语句中可以嵌套单行注释语句，但不能嵌套多行注释语句
在vscode 中用快捷键 shift+alt+a
JavaScript输入输出 语句
| 语句 | 语法 |
|---|---|
| alert（'msg'） | 浏览器弹出警告框 |
| console.log('msg') | 浏览器控制台输出信息 |
| prompt('msg') | 浏览器弹出输入框，用户可以输入内容 |
<script>
1、alert('内嵌式') ; // 弹出一个警告框。警告框中显示“内嵌式”
2、document.write("未来的我你好呀！");
// 在页面中显示 “未来的我你好呀！”在 body标签中写入内容
3、cosole.log("猜猜我在哪"); //向控制台输出一个内容 (需要在浏览器的控制台中查看)
4、prompt('这是一个输入框')； // 弹出一个输入框，用户可以输入内容信息
</script>字面量和变量
字面量
指一些不可改变的值，可以直接使用，但是一般不会直接使用字面量
变量
变量是程序在内存中申请的一块用来存放数据的空间，内存中的变量需要进行命名
变量的使用
变量在使用时分为两步，分别是“声明变量”和“赋值”
声明变量：通常使用 var （variable）关键字，使用var声明变量后，计算机会自动为变量分配内存空间
赋值：变量声明出来后，是没有值的。接下来就是为变量赋值。
var age；
age = 10；
// 在为变量赋值以后，可以用输出语句输出变量的值变量的初始化：声明一个变量并为其赋值，这个过程就是变量的初始化
使用变量可以保存个人信息 还可以用来保存用户输入的信息
变量的命名规则
1、由字母、数字、下划线和美元符号（$）组成
2、严格区分大小写
3、不能以数字开头
4、不能是关键字、保留字
5、尽量做到“见其名，知其意”
6、建议遵循驼峰命名法，首字母小写，后面的单词首字母大写
| break | case | catch | class |
| const | continue | debugger | default |
| extends | finally | for | function |
| delete | do | else | export |
| if | import | in | instanceof |
| new | return | super | switch |
| this | throw | try | trpeof |
| var | void | while | with |
| yield | - | - | - |
| enum | implements | package | public |
| interface | private | static | let |
| protected | - | - | - |
变量语法扩展
1、更新变量
一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以卒子后一次赋的值为准。
var age = 18;
age = 20;
console.log(age); // 最后的结果就是 202、声明多个变量
同时声明多个变量只需要写一个var 多个变量之间用 英文逗号隔开，最后一句加上分号。
var age = 18,
address = '火影村',
name = '大大';3、声明变量的特殊情况
- 只声明变量，但不赋值，则输出变量时，结果为undefined
- 不声明变量，不赋值，直接输出变量的值，则程序会出错
- 不声明变量，直接赋值（直接赋值一个未声明的变量，也可以正确输出变量的值）
数据类型
1、变量的数据类型
JavaScript是一种弱类型的语言，不用提前声明变量的数据类型。在程序运行过程中，变量的数据类型会自动转换
1、 int num= 10； // 强类型语言，这里变量num 是int 类型；
2、var num = 10；// 变量一开始是数字型
// JS的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
num =‘abc’ //赋值一个字符串，现在num变成了 字符串类型js 同时拥有动态类型，同时也意味着相同的变量可用作不同的类型，变量的数据类型是可以变化的
var x = 6; // x 为数字型
var x = "bill"; // x 为字符串型2、数据类型的分类
分别为 基本数据类型 和 复杂数据类型（引用数据类型）。
基本数据类型分为：Boolean（布尔型）、String（字符串型）、Number（数字型）、Null（空型）、Undefined（未定义型）
复杂数据类型：Object（对象型）
1、Boolean（布尔型） 包含true和false 两个值
var num = true； //表示真、1、成立
var num = false； //表示假、0、不成立
// 默认值为 false2、String（字符串型）用单引号或者双引号 包裹
var str = '' //表示空字符串
var str = 'abc' //用单引号包裹的字符串 abc
var str = "abc" //用双引号包裹的字符串 abc
// 默认值为 ""3、Number（数字型） 包含 数值型和浮点型
var num = 21； //数值型
var num = 0.21； //浮点型
// 默认值为 04、Null（空型） 只有一个值 null
var a = null； //变量a的值为 null
// 默认值为null
5、Undefined（未定义型） 只有一个值undefined
var a； //声明变量a，未赋值，此时a 的返回值就是undefined
var b = undefined； //变量b的值为undefined
// 默认值为 undefined6、Object （对象型）
一、数字型
1、进制
1.数字型进制
常见的进制有 二进制、八 进制、十进制和十六进制。
- 二进制：由数字 0 和 1 组成
- 八进制：在数字开头加上 0 表示八进制， 由数字 0-7 组成
- 十进制：由数字 0-9 组成
- 十六进制：在数字开头加上 0x表示十六进制，由 0-9，a-f 组成
2.数字型范围
js中的最大值和最小值
alert (Number.MAX_VALUE);
console.log(Number.MAX_VALUE);
// 显示最大值 1.7976931348623157e+308
alert (Number.MIN_VALUE);
console.log(Number.MIN_VALUE);
// 显示最小值 5e-3243.数字型三个特殊值
Infinity（无穷大）、-Infinity（无穷小）、NaN（Not a Number，非数值）
1、无穷大
console.log(Number.MAX_VALUE * 2); // 输出结果 Infinity
2、无穷小
console.log(-Number.MAX_VALUE * 2); //输出结果 -Infinity
3、非数值
console.log('abc'-100); // 输出结果 NaN
若想要判断一个变量是否为 非数值型可以用 isNaN()来进行判断
它会返回一个布尔值返回true表示非数字，返回false表示数字
console.log(isNaN(12)); //输出结果是 false ，即表示数字
console.log()isNaN('abc'); // 输出结果是 true ， 即不是数字二、字符串型
字符串型是由 单引号或者双引号包裹起来的字符串，
var str1 = '单引号字符串';
var str2 = "双引号字符串";1、单引号、双引号的嵌套
遵循的原则 （外双内单、外单内双）
// 正确写法
var msg = '我是"高富帅"的朋友'; //可以用'' 包含 ""
var msg2 = "我是'高富帅'的朋友"； //可以用"" 包含 ''
// 错误写法
var str = '我是'高富帅'的朋友'; //单引号错误用法 寻求就近原则2、转义字符
在 字符串使用 换行、Tab等特殊符号时，可以用转义字符来进行转义。
转义符都是以“\”开始的，并且要包含到引号里
| 转义符 | 解释说明 | 转义符 | 解释说明 |
| \' | 单引号 | \" | 双引号 |
| \n | LF换行，n表示newline | \v | 跳格（Tab、水平） |
| \t | Tab符号 | \r | CR换行 |
| \f | 换页 | \\ | 反斜线\ |
| \b | 退格，b表示blank | \0 | Null 字节 |
| \xhh | 由2位十六进制数字hh表示的ISO-8859-1字符。如“\x61”表示 a | \uhhh | 由4位十六进制数字hhhh表示的Unicode字符。如：“\u597d”表示“好” |
3、字符串长度
字符串是由若干个字符组成的，这些字符的数量就是字符串的长度。
通过字符串的length属性可以获取整个字符串的长度
var str = 'my name is xiaoyun';
console.log(str.length); //输出结果为 184、字符串的拼接
多个字符串之间可以使用 + 进行拼接，拼接方式为 字符串+任何类型 = 拼接后的新字符串
拼接前会把与字符串相加的任何类型抓换为字符串，再拼接成一个新的字符串
只要有字符串和其他类型相拼接，最终的结果都是字符串类型。数值相加，字符相连
console.log('沙漠' + '骆驼'); // 输出结果为 沙漠骆驼
console.log('沙漠' + 18); // 输出结果为 沙漠18
console.log('沙漠' + true); // 输出结果为 沙漠true
console.log(12 + 12); // 输出结果为24
console.log('12' + 12); // 输出结果为 12125、字符串拼接加强
变量不要写到字符串里，是通过和字符串相连的方式实现的
经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值。
变量是不能添加引号的，因为加引号的变量会变成字符串
如果变量两侧都有字符串拼接，口诀是“引引加加”，删掉数字，变量写加号中间
var age = 18;
console.log('我今年' + age + '岁了'); //输出结果 ：我今年18岁了三、布尔型
包含两个值：true 和 false。 其中true 表示真（对），false 表示假（错）
布尔型和数值型相加的时候，true的值为1， false 的值为0
var flag = true;
var flaa = false;
console.log(flag + 1); // true 参与加法运算当1来看 ，即输出结果为 2
console.log(flaa + 1); // false 参与加法运算当0来看， 即输出结果为1四、undefined
一个声明没有被赋值的变量会有一个默认值 undefined（如果进行相连或者相加时，注意结果）
undefined 与 数字相加 是 NaN
var str;
console.log(str); // 输出结果 undefined
var variable = undefined;
console.log(variable + 'haha'); // 输出结果是 undefinedhaha
console.log(variable + 1); // 输出结果是 NaN五、Null
null 与字符串相连 返回值是 字符串。null 与 数字相连 返回值是 数字型的，null表示0
var space = null;
console.log(space + 'pink'); // 输出结果是 nullpink
console.log(space + 1); // 输出结果是 1六、数据类型的检测
1、检测变量的数据类型
当不确定一个变量或值是什么数据类型的时候，可以利用typeof 运算符进行数据类型检测
- 在控制台显示结果颜色是黑色，表示这个变量是 字符型的
- 显示结果是蓝色，表示这个变量是数字型的
- 显示结果是深蓝色的，表示这个变量是 布尔型的
- 显示结果是浅灰色的，表示这个变量是undefined 和null
var num = 10;
console.log(typeof num); // 返回 number
var str = '你是我的神';
console.log(typeof str); // 返回 string
var flag = true;
console.log(typeof flag); // 返回 boolean
var lala = undefined;
console.log(lala); // 返回 undefined
var haha = null;
console.log(haha); // 返回 object
// prompt 取过来的值是 字符型的
var age = prompt('请您输入您的年龄');
console.log(age); // 输入一个数字 18 返回18
console.log(typeof age); // 输入一个数字18 返回string2、字面量
是指在源代码中的固定值的表示法。就是指字面量来表示如何在代码中表达这个值
通过字面量我们可以很容易地看出来它是哪种类型的值。
| 数字字面量 | 8,9,10 |
| 字符串字面量 | 'hello','world' |
| 布尔字面量 | true、false |
| 数组字面量 | [1,2,3] |
| 对象字面量 | {name:'小明'，age：18} |
数据类型的转换
就是把某一种数据类型转换成另一种数据类型。使用表单、prompt()等方式获取到的数据默认是字符串类型的，此时不能直接进行简单的加法计算，需要转换成数字型才可以计算。
常见的数据类型转换有：
- 转换为字符串型
- 转换为数字型
- 转换为布尔型
1、转换为字符串型
- 使用 toString() 转换字符型
- 使用 String() 强制转换
- 使用加号拼接字符串
// 1.把数字型转换为字符串型 变量.toString()
var num= 10;
var str = num.toString();
console.log(str); // 输出结果 10
console.log(typeof str); // 输出结果 string
// 2.利用 String(变量)
console.log(String(num));
// 3.利用 “+” 拼接字符串的方式实现转换效果 隐式转换
console.log(num + ''); // 输出结果是 字符串102、转换为数字型（重点）
- 使用 parseInt(string) 函数
- 使用 parseFloat(string) 函数
- Number() 强制转换函数
- js隐式转换 （- * /）
// 1. 利用 parseInt(变量) 将字符型转换为数值型，得到的是整数
var age = '20';
console.log(age); // 返回的值是字符型的 20
console.log(parseInt(age)); // 返回的值是数值型的 20
console.log(parseInt('3.14')); // 返回的值是取整数 3
console.log(parseInt('3.94')); // 返回的值是取整数 3
console.log(parseInt('120xc')); // 返回的值是120
console.log(parseInt('wd124df'));// 返回的值是NaN
// 2. 利用 parseFloat(变量) 将字符型转换为浮点型，得到的是小数、浮点数
console.log(parseFloat('2.23')); // 返回的值是2.23
console.log(parseFloat('120rm')); // 返回的值是120
console.log(parseFloat('asd120sd')); // 返回的值是 NaN
// 3. 利用 Number(变量) 将字符型强制转换成数值型
var str = '112';
console.log(Number(str)); // 返回的值是数值型 112
console.log(Number('1121')); // 返回的值是数值型1121
// 4. 利用算数运算 - * / 隐式转换
console.log('12' - 0); // 返回的值是 数值型的12
console.log('123' - '120'); // 返回的值是 数值型的3
console.log('123' * 1); // 返回的值是 数值型的123
console.log('120' / 2); // 返回的值是 数值型的603、转换为布尔型
- 使用 Boolean()函数
代表 空、否定的值 会被转换成 false ，如：''、0、NaN、null、undefined
其余的值都会被转换成 true
console.log(Boolean('')); // 返回的值是 false
console.log(Boolean(0)); // 返回的值是 false
console.log(Boolean(NaN)); // 返回的值是 false
console.log(Boolean(null)); // 返回的值是 false
console.log(Boolean(undefined)); // 返回的值是 false
console.log(Boolean('小白')); // 返回的值是 true
console.log(Boolean(12)); // 返回的值是 true运算符
运算符也称为“操作符”，是用于实现赋值、比较和执行算数运算等功能的符号。
常用的运算符有：
- 算术运算符
- 递增递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
- 三元运算符
1、算术运算符
用于对两个变量或值进行算术运算
| 运算符 | 描述 | 实例 | 结果 |
| + | 加 | 10+20 | 30 |
| - | 减 | 10-20 | -10 |
| * | 乘 | 10*20 | 200 |
| / | 除 | 10/20 | 0.5 |
| % | 取余数（取模） | 9%2 | 1 |
注意点：
- 进行四则运算时，遵循 “先乘除后加减” 的原则，
- 进行取模运算时，运算结果的正负取决于被模数（%左边的数）的符号，与模数（%右边的数）无关。例如：（-8) % 7 = -1, 8 % (-7) = 1
- 尽量避免利用浮点数进行运算，浮点数值的最高精度是17位小数，但在进行算术计算时精确度远远不如整数。正常的运算 0.1 +0.2 = 0.3，但是js的计算结果确是0.30000000000000004.，此时可以将运算的小数化为整数，计算后再转换为小数即可
- 使用 + 和 - 可以表示正数和负数。例如：（+2.1）+（-1.1）=1
表达式是各种类型的数据、变量和运算符的集合。是由数字、运算符、变量等组成的式子。
最简单的表达式可以是一个变量或字面量。表达式最终都会有一个返回值
2、递增和递减运算符
前置递增运算符 和 后置递增运算符
如果需要反复给数字添加或减去1，可以使用 递增（++）和递减（--）运算符来完成
递增（++）和递减（--）既可以放在变量前面，也可以放在变量后面。
放在变量前面时，我们称为 前置递增（递减）运算符，放在变量名后边时，我们成为后置递增（递减）运算符
// 1.前置递增运算符 ++ 放在变量的前边
var age = 10;
++age; // age = age + 1;
console.log(age); // 先自加，后返回值
// 2.后置递增运算符 ++ 放在变量的后边
var num = 10;
num++; // num = num + 1
console.log(num);
// 先返回原值，后自加
var age =10;
console.log(age++ + 10 ); // 返回的值是 20
注：前置自增和后置自增如果单独使用 效果是一样的
1535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
