JavaScript--初识
一、JavaScript的了解
1995年，网景公司与Sun公司结为开发联盟，共同完成LiveScript的开发。后网景把LiveScript改名为JavaScript。
二、JavaScript的概述
JavaScript是一个轻量级的语言，也是单线程语言（一个线程解析），是一个弱语言（没有固定的类型划分，值属于什么类型，那就是什么类型），还是一个脚本语言（侵入，实现xss攻击），是怎么被解析的（有浏览器的地方就能解析对应的JavaScript（v8引擎））
三、JavaScript的实现
JavaScript 是一门用来与网页交互的脚本语言，包含以下三个组成部分。
1、ECMAScript(核心)
ECMAScript，即ECMA-262定义的语言，并不局限于Web浏览器。
2、DOM(文档对象模型)
文档对象模型（Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的XML。DOM通过创建文档的树，让开发者可以随心所欲地控制网页地内容和结构。使用DOM API，可以轻松的1删除、添加替换、修改节点。
3、BOM(浏览器对象模型)
浏览器对象模型API，用于支持访问和操作浏览器的窗口，使用BOM，开发者可以操控浏览器显示页面之外的部分。
四、JavaScript的入门
1、书写方式
1）书写在script标签里
<script>
console.log('hello world!')
</script>
<script>有以下8个属性：
1、async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
2、charset：可选。使用src属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值。
3、crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。crossorigin="anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据。
4、defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。在IE7及更早的版本中，对行内脚本也可以指定这个属性。
5、integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，SubresourceIntegrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN，ContentDeliveryNetwork）不会提供恶意内容。
6、language：废弃。最初用于表示代码块中的脚本语言（如"JavaScript"、"JavaScript1.2"或"VBScript"）。大多数浏览器都会忽略这个属性，不应该再使用它。
7、src：可选。表示包含要执行的代码的外部文件。
8、type：可选。代替language，表示代码块中脚本语言的内容类型（也称MIME类型）。
注意：在使用行内 JavaScript 代码时，要注意代码中不能出现字符串</script>。
2）书写在js文件里
1、首先定义一个js文件
2、再通过script标签进行引入。
<script src="example.js"></script>
3、书写在对应的事件属性里
<ahref="javascript:void()">去百度</a>
<ahref="#"onclick="alert('hello world')"></a>
2、变量定义
1）使用var关键字声明
//var 变量名 = 值
varnumber=10
2）变量名的书写
1、第一个字符必须是一个字母、下划线（_）或美元符号（$）；剩下的其他字符可以是字母、下划线、美元符号或数字。
2、使用驼峰大小写形式，即第一个单词的首字母小写，后面每个单词的首字母大写，例如：firstSecond myCar doSomethingImportant。
3、不能使用关键字、保留字。
4、普通变量首字母小写，常量全大写（const）。
注意：无论是变量、函数名还是操作符，都区分大小写。换句话说，变量 test 和变量 Test 是两个不同的变量。
关键字：
break do in typeof
case else instanceof var
catch export new void
class extends return while
const finally super with
continue for switch yield
debugger function this
default if throw
delete import try
保留字：
始终保留:
enum
严格模式下保留:
implements package public
interface protected static
let private
模块代码中保留:
await
3、注释
ECMAScript 采用 C 语言风格的注释，包括单行注释和块注释。
单行注释以两个斜杠字符开头，如：
// 单行注释
快捷键：ctrl＋/
块注释以一个斜杠和一个星号（/*）开头，以它们的反向组合（*/）结尾，如：
/* 这是多行
注释 */
快捷键：shift+alt+A
4、语句
ECMAScript 中的语句以分号结尾。省略分号意味着由解析器确定语句在哪里结尾。即使语句末尾的分号不是必需的，也应该加上。记着加分号有助于防止省略造成的问题，比如可以避免输入内容不完整。此外，加分号也便于开发者通过删除空行来压缩代码（如果没有结尾的分号，只删除空行，则会导致语法错误）。加分号也有助于在某些情况下提升性能，因为解析器会尝试在合适的位置补上分号以纠正语法错误。
5、数据类型
ECMAScript 有 6 种简单数据类型（也称为原始类型）：Undefined、Null、Boolean、Number、String 和 Symbol。Symbol（符号）是 ECMAScript 6 新增的。还有一种复杂数据类型叫 Object（对象）。Object 是一种无序名值对的集合。
注意：因为 ECMAScript 的类型系统是松散的，所以需要一种手段来确定任意变量的数据类型。typeof操作符就是为此而生的。
1）Number
注意：有一个特殊的数值叫 NaN，意思是“不是数值”（Not a Number），用于表示本来要返回数值的操作失败了（而不是抛出错误）。 isNaN 判断是否为NaN。
比如，用 0 除任意数值在其他语言中通常都会导致错误，从而中止代码执行。
但在 ECMAScript 中，0、+0 或-0 相除会返回 NaN：
console.log(0/0); // NaN
console.log(-0/+0); // NaN
如果分子是非 0 值，分母是有符号 0 或无符号 0，则会返回 Infinity 或-Infinity：
console.log(5/0); // Infinity
console.log(5/-0); // -Infinity
NaN 有几个独特的属性。首先，任何涉及 NaN 的操作始终返回 NaN（如 NaN/10），在连续多步计算时这可能是个问题。其次，NaN 不等于包括 NaN 在内的任何值。
2）String
String（字符串）数据类型表示零或多个 16 位 Unicode 字符序列。字符串可以使用双引号（"）、单引号（'）或反引号（`）标示。
varfirstName="John";
varlastName='Jacob';
varlastName=`Jingleheimerschmidt`
注意：以某种引号作为字符串开头，必须仍然以该种引号作为字符串结尾。
3）Boolean
Boolean（布尔值）类型是 ECMAScript 中使用最频繁的类型之一，有两个字面值：true 和 false。
注意：布尔值字面量 true 和 false 是区分大小写的，因此 True 和 False（及其他大小混写形式）是有效的标识符，但不是布尔值。
4）Null
Null 类型同样只有一个值，即特殊值 null。逻辑上讲，null 值表示一个空对象指针，这也是给typeof 传一个 null 会返回"object"的原因：
varcar=null;
console.log(typeofcar);// "object"
undefined 值是由 null 值派生而来的，因此 ECMA-262 将它们定义为表面上相等，如下面的例子所示：
console.log(null == undefined); // true
5）Undefined
Undefined 类型只有一个值，就是特殊值 undefined。当使用 var 声明了变量但没有初始化时，就相当于给变量赋予了 undefined 值。
varmessage;
console.log(message==undefined);// true
6、类型转换
1、不同类型与布尔值之间的转换规则
数据类型 转换为true的值 转换为false的值
Boolean true false
String 非空字符串 ""（空字符串）
Number 非零数值（包括无穷值） 0、NaN
Object 任意对象 null
Undefined 不存在 undefined
注意：
//无穷大
varmax=Infinity
//无穷小
varmin=-Infinity
2、数值转换
有 3 个函数可以将非数值转换为数值：Number()、parseInt()和 parseFloat()。Number()是转型函数，可用于任何数据类型。后两个函数主要用于将字符串转换为数值。
Number()函数基于如下规则执行转换。
1、布尔值，true 转换为 1，false 转换为 0。
2、数值，直接返回。
3、null，返回 0。
4、undefined，返回 NaN。
5、字符串，应用以下规则。
1）如果字符串包含数值字符，包括数值字符前面带加、减号的 情况，则转换为一个十进制数值。因此，Number("1")返回 1，Number("123")返回 123，Number("011")返回 11（忽略前面的零）。
2）如果字符串包含有效的浮点值格式如"1.1"，则会转换为相应的浮点值（同样，忽略前面的零）。
3）如果字符串包含有效的十六进制格式如"0xf"，则会转换为与该十六进制值对应的十进制整数值。
4）如果是空字符串（不包含字符），则返回 0。
5）如果字符串包含除上述情况之外的其他字符，则返回 NaN。
假设字符串中的第一个字符是数值字符，parseInt()函数也能识别不同的整数格式（十进制、八进制、十六进制）。换句话说，如果字符串以"0x"开头，就会被解释为十六进制整数。
var num1 = parseInt("1234blue"); // 1234
var num2 = parseInt(""); // NaN
var num3 = parseInt("0xA"); // 10，解释为十六进制整数
var num4 = parseInt(22.5); // 22
var num5 = parseInt("70"); // 70，解释为十进制值
var num6 = parseInt("0xf"); // 15，解释为十六进制整数
不同的数值格式很容易混淆，因此 parseInt()也接收第二个参数，用于指定底数（进制数）。如果知道要解析的值是十六进制，那么可以传入 16 作为第二个参数，以便正确解析:
var num1 = parseInt("AF", 16); // 175
var num2 = parseInt("AF"); // NaN
var num1 = parseInt("10", 2); // 2，按二进制解析
var num3 = parseInt("10", 10); // 10，按十进制解析
var num4 = parseInt("10", 16); // 16，按十六进制解析
3、转换为字符串
有两种方式把一个值转换为字符串（toString())，String()）。
如果你不确定一个值是不是 null 或 undefined，可以使用 String()转型函数，它始终会返回表示相应类型值的字符串。String()函数遵循如下规则。
1）如果值有 toString()方法，则调用该方法（不传参数）并返回结果。
2）如果值是 null，返回"null"。
3）如果值是 undefined，返回"undefined"。
var value1 = 10;
var value2 = true;
var value3 = null;
var value4;
console.log(String(value1)); // "10"
console.log(String(value2)); // "true"
console.log(String(value3)); // "null"
console.log(String(value4)); // "undefined"
toFixed 方法 转为字符串 保留多少位小数
扩展：
多数情况下，toString()不接收任何参数。不过，在对数值调用这个方法时，toString()可以接收一个底数参数，即以什么底数来输出数值的字符串表示。默认情况下，toString()返回数值的十进制字符串表示。而通过传入参数，可以得到数值的二进制、八进制、十六进制，或者其他任何有效基数的字符串表示，比如：
var num = 10;
console.log(num.toString()); // "10"
console.log(num.toString(2)); // "1010"
console.log(num.toString(8)); // "12"
console.log(num.toString(10)); // "10"
console.log(num.toString(16)); // "a"
7、运算符和表达式
1、一元加和减
如果将一元加应用到非数值，则会执行与使用 Number()转型函数一样的类型转换：布尔值 false和 true 转换为 0 和 1，字符串根据特殊规则进行解析，对象会调用它们的 valueOf()和/或toString()方法以得到可以转换的值。
var s1 = "01";
var s2 = "1.1";
var s3 = "z";
var b = false;
var f = 1.1;
s1 = +s1; // 值变成数值 1
s2 = +s2; // 值变成数值 1.1
s3 = +s3; // 值变成 NaN
b = +b; // 值变成数值 0
f = +f; // 不变，还是 1.1
2、递增和递减运算符
++ , --
递增和递减操作符遵循如下规则。
1)对于字符串，如果是有效的数值形式，则转换为数值再应用改变。变量类型从字符串变成数值。
2)对于字符串，如果不是有效的数值形式，则将变量的值设置为 NaN 。变量类型从字符串变成数值。
3)对于布尔值，如果是 false，则转换为 0 再应用改变。变量类型从布尔值变成数值。
4)对于布尔值，如果是 true，则转换为 1 再应用改变。变量类型从布尔值变成数值。
5)对于浮点值，加 1 或减 1。
var s1 = "2";
var s2 = "z";
var b = false;
var f = 1.1;
s1++; // 值变成数值 3
s2++; // 值变成 NaN
b++; // 值变成数值 1
f--; // 值变成 0.10000000000000009（因为浮点数不精确）
o--; // 值变成-2
3、位操作符
左移操作符用两个小于号（<<）表示，会按照指定的位数将数值的所有位向左移动。比如，如果数值 2（二进制 10）向左移 5 位，就会得到 64（二进制 1000000），如下所示：
var oldValue = 2; // 等于二进制 10
var newValue = oldValue << 5; // 等于二进制1000000，即十进制 64
有符号右移由两个大于号（>>）表示，会将数值的所有 32 位都向右移，同时保留符号（正或负）。
有符号右移实际上是左移的逆运算。比如，如果将 64 右移 5 位，那就是 2：
var oldValue = 64; // 等于二进制 1000000
var newValue = oldValue >> 5; // 等于二进制 10，即十进制 2
4、逻辑运算
1）逻辑非操作符由一个叹号（!）表示，可应用给 ECMAScript 中的任何值。这个操作符始终返回布尔值，无论应用到的是什么数据类型。逻辑非操作符首先将操作数转换为布尔值，然后再对其取反。
逻辑非操作符会遵循如下规则。
如果操作数是空字符串，则返回 true。
如果操作数是非空字符串，则返回 false。
如果操作数是数值 0，则返回 true。
如果操作数是非 0 数值（包括 Infinity），则返回false。
如果操作数是 null，则返回 true。
如果操作数是 NaN，则返回 true。
如果操作数是 undefined，则返回 true。
2）逻辑与操作符由两个和号（&&）表示，应用到两个值。
如果有一个操作数是 null，则返回 null。
如果有一个操作数是 NaN，则返回 NaN。
如果有一个操作数是 undefined，则返回 undefined。
3）逻辑或操作符由两个管道符（||）表示。
如果两个操作数都是 null，则返回 null。
如果两个操作数都是 NaN，则返回 NaN。
如果两个操作数都是 undefined，则返回 undefined。
5、乘性操作符
1）乘法操作符由一个星号（*）表示，可以用于计算两个数值的乘积。
2）除法操作符由一个斜杠（/）表示，用于计算第一个操作数除以第二个操作数的商。
3）取模（余数）操作符由一个百分比符号（%）表示。
6、加性操作符
1）加法操作符（+）用于求两个数的和。
注意：如果有一个操作数是字符串，则要应用如下规则：
如果两个操作数都是字符串，则将第二个字符串拼接到第一个字符串后面；
如果只有一个操作数是字符串，则将另一个操作数转换为字符串，再将两个字符串拼接在一起。
var result1 = 5 + 5; // 两个数值
console.log(result1); // 10
var result2 = 5 + "5"; // 一个数值和一个字符串
console.log(result2); // "55"
2）减法操作符（-）也是使用很频繁的一种操作符
如果有任一操作数是字符串、布尔值、null 或 undefined，则先在后台使用 Number()将其转换为数值，然后再根据前面的规则执行数学运算。如果转换结果是 NaN，则减法计算的结果是NaN。
var result1 = 5 - true; // true 被转换为 1，所以结果是 4
var result2 = NaN - 1; // NaN
var result3 = 5 - 3; // 2
var result4 = 5 - ""; // ""被转换为 0，所以结果是 5
var result5 = 5 - "2"; // "2"被转换为 2，所以结果是 3
var result6 = 5 - null; // null 被转换为 0，所以结果是 5
7、关系操作符
关系操作符执行比较两个值的操作，包括小于（<）、大（>）、小于等于（<=）和大于等于（>=），用法跟数学课上学的一样。这几个操作符都返回布尔值。
var result1 = 5 > 3; // true
var result2 = 5 < 3; // false
8、相等操作符
1）ECMAScript 中的等于操作符用两个等于号（==）表示，如果操作数相等，则会返回 true。不等于操作符用叹号和等于号（!=）表示，如果两个操作数不相等，则会返回 true。这两个操作符都会先进行类型转换（通常称为强制类型转换）再确定操作数是否相等。
null == undefined true
"NaN" == NaN false
5 == NaN false
NaN == NaN false
NaN != NaN true
false == 0 true
true == 1 true
true == 2 false
undefined == 0 false
null == 0 false
"5" == 5 true
2）全等操作符由 3 个等于号（===）表示，只有两个操作数在不转换的前提下相等才返回 true。
var result1 = ("55" == 55); // true，转换后相等
var result2 = ("55" === 55); // false，不相等，因为数据类型不同
9、赋值操作符
简单赋值用等于号（=）表示，将右手边的值赋给左手边的变量。
10、三目运算符
表达式（boolean类型表达式）? true的内容 :false的内容
var a = 10
var b = 20
a>b?10:20 //20
'123a'/10?'hello':'hi'//hi
还没有任何评论，你来说两句吧