javascript零基础入门—01

什么是javascript ？         

“script” 标签： （ 当浏览器遇到代码会自动运行 ）
JavaScript 并不会在方括号 [...] 前添加一个隐式的分号。注意咯：大部分时候可以省略分号，但是最好不要省略分号
 “use strict”：   

    1、当它处于脚本文件的顶部时，则整个脚本文件都将以“现代”模式进行工作；                                2、可以被放在函数主体的开头，而不是整个脚本的开头；                                                                3、确保 “use strict” 出现在最顶部请确保 "use strict" 出现在脚本的最顶部，否则严格模式可能无法启用。 

例子（没有启动)：                                                                            
alert("some code");     // 下面的 "use strict" 会被忽略，必须在最顶部。
"use strict";           // 严格模式没有被激活                                                

  

注意:（一旦进入了严格模式，就不能走回头路了）  

浏览器控制台：
    确保 use strict 被开启的最可靠的方法是，像这样将代码输入到控制台：

(function(){
'use strict';
// ...你的代码...
})()

“use strict”指令：
    1、指令将浏览器引擎转换为“现代”模式，改变一些内建特性的行为。我们会在之后的学习中了解这些细节。
    2、严格模式通过将 "use strict" 放置在整个脚本或函数的顶部来启用。一些新语言特性诸如 “classes” 和 “modules” 也会自动开启严格模式。
    3、所有的现代浏览器都支持严格模式。
    4、我们建议始终使用 "use strict" 启动脚本。本教程的所有例子都默认采用严格模式，除非特别指定（非常少）。

变量（是数据的“命名存储”，一般都会使用变量保存一些物品、信息等等）
    在 JavaScript 中创建一个变量，我们需要用到 let 关键字。

let message ='Hello!';// 定义变量，并且赋值
alert(message);       // Hello!（看自身理解咯 单、双、全）

    同样也可以在一行中声明多个变量（但不推荐全部横排写，可读性较差）：

 let user ='John', age =25, message ='Hello';

   可以这样(里面的逗号放哪里舒服就放哪里)：

let user ='John',
age =25,
message ='Hello';
或
let user ='John';
let age =25;
let message ='Hello';

在旧版中还有另一个关键字（var），和前面let书写一样，替换let为var就可以

一个现实生活的类比：
    为了方便理解，一段官方比喻：如果将变量想象成一个“数据”的盒子，盒子上有一个唯一的标注盒子名字的贴纸。这样我们能更轻松地掌握“变量”的概念。                                                例如：变量 message 可以被想象成一个标有 "message" 的盒子，盒子里面的值为 "Hello!"；可以在盒子内放任何值，想改变就可以改变，但值改变的时候，之前的数据就会从变量中删除函数式语言：其中也存在禁止更改变量值的 函数式 编程语言。比如 Scala 或 Erlang。

JavaScript变量命名限制：                                                                                                                            1、变量名称必须仅包含字母，数字，符号 $ 和 _。                                                                  2、首字符必须非数字。

多个单词，则采用驼峰式命名法 (注意（除第一个单词，其他每个单词都已大写字母开头））
其中，美元符号 '$' 和下划线 '_' 也可以用于变量命名，

举例：
let $ =1;// 使用 "$" 声明一个变量
let _ =2;// 现在用 "_" 声明一个变量
alert($ + _);// 3

保留字（无法用作变量命名，被用于编程语言本身了）                                                                  那保留字都有哪些呢？（ let、class、return、function。）

举例：
let let=5;// 不能用 "let" 来命名一个变量，错误！

常量（声明一个常数（不变）变量，可以使用 const 而非 let）（ 注意：当能确定这个变量永远不会改变的时候，就可以使用 const 来确保这种行为  ）                                                                     大写形式的常数（将常量用作别名，以便记住那些在执行之前就已知的难以记住的值）

例如：
const COLOR_RED ="#F00";

什么时候该为常量使用大写命名，什么时候进行常规命名？
简单说就是：作为一个“常数”，意味着值永远不变。但是有些常量在执行之前就已知了（比如红色的十六进制值），还有些在执行期间被“计算”出来，但初始赋值之后就不会改变。

记住，请正确命名变量（应有一个清晰、明显的含义，对其存储的数据进行描述）
额外声明一个变量绝对是利大于弊的。

总结：
可使用 var、let 或 const 声明变量来存储数据。                                                                      let ：现代的变量声明方式。
var ：老旧的变量声明方式，一般情况下，我们不会再使用它。
const ：类似于 let，但是变量的值无法被修改。
变量应当以一种容易理解变量内部是什么的方式进行命名。

数据类型：
“动态类型”（变量在前一刻可以是个字符串，下一刻就可以变成 number 类型），定义的变量并不会在定义后，被限制为某一数据类型。（不会只局限于某一个数据类型）
数据类型有八种：        

1、Number 类型（代表整数和浮点数）
2、BigInt 类型（用于表示任意长度的整数，很少需要bigInt类型的数字)
3、String 类型（包含三种字符串1.双引号、2.单引号、3.反引号（功能扩展:引号(允许我们通过将变量和表达式包装在 ${…} 中，来将它们嵌入到字符串中)）
例如:let name ="John";
// 嵌入一个变量
alert(`Hello, ${name}!`);// Hello, John!
// 嵌入一个表达式
alert(`the result is ${1 + 2}`);// the result is 3）
4、Boolean 类型（逻辑类型，有两个值（true、false））
5、“null” 值（构成了一个独立的类型，例如：let age =null;注意：JavaScript 中的 null 不是一个“对不存在的 object 的引用”或者 “null 指针”。它仅仅是一个代表“无”、“空”或“值未知”的特殊值。上面的代码表示，由于某些原因，age 是未知或空的。）
6、“undefined” 值（含义是未被赋值， 仅仅用于检验，例如查看变量是否被赋值或者其他类似的操作）、7、object 类型（是一个特殊的类型，用于储存数据集合和更复杂的实体）
8、symbol 类型（用于创建对象的唯一标识符）

可通过 typeof 运算符查看存储在变量中的数据类型。
   两种形式：typeof x 或者 typeof(x)。 
   以字符串的形式返回类型名称，例如 "string"。
   typeof null 会返回 "object" —— 这是 JavaScript 编程语言的一个错误，实际上它并不是一个 object。

以上总结：
JavaScript 中有八种基本的数据类型（译注：前七种为基本数据类型，也称为原始类型，而 object 为复杂数据类型）。
number 用于任何类型的数字：整数或浮点数，在 ±253 范围内的整数。
bigint 用于任意长度的整数。
string 用于字符串：一个字符串可以包含一个或多个字符，所以没有单独的单字符类型。
boolean 用于 true 和 false。
null 用于未知的值 —— 只有一个 null 值的独立类型。
undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型。
symbol 用于唯一的标识符。
object 用于更复杂的数据结构。
我们可以通过 typeof 运算符查看存储在变量中的数据类型。

两种形式：typeof x 或者 typeof(x)。
以字符串的形式返回类型名称，例如 "string"。
typeof null 会返回 "object" —— 这是 JavaScript 编程语言的一个错误，实际上它并不是一个 object。

类型转换（运算符和函数会自动将赋予他们的值转换为正确的类型；其中alert会自动将任何值都转换为字符串以进行显示；算术运算符会将值转换为数字）
   字符串转换  （可通过 String(value) 进行显式转换）                                                               

举例：
let value =true;
alert(typeof value);// boolean
value =String(value);// 现在，值是一个字符串形式的 "true"
alert(typeof value);// string

    数字型转换  （可通过 Number(value) 进行显式转换）                                                                 

举例：
let str ="123";
alert(typeof str);// string
let num =Number(str);// 变成 number 类型 123
alert(typeof num);// number


反例：
let age =Number("an arbitrary string instead of a number");
alert(age);// NaN，转换失败

    布尔型转换  （  转换规则（直观上为“空”的值（如 0、空字符串、null、undefined 和 NaN）将变为 false。其他值变成 true  ）

举例：
alert(Boolean(1));// true
alert(Boolean(0));// false
alert(Boolean("hello"));// true
alert(Boolean(""));// false
注意：（ 容易混淆:（着重点，解决混淆之处） 在一些编程语言（比如 PHP）视 "0" 为 false。但在JavaScript中，非空的字符串总是 true。
例如：alert(Boolean("0"));// true
alert(Boolean(" "));// 空白, 也是 true (任何非空字符串是 false )
）

容易犯错误的例子：
   1、对 undefined 进行数字型转换时，输出结果为 NaN，而非 0。
   2、对 "0" 和只有空格的字符串（比如：" "）进行布尔型转换时，输出结果为 true。               3、如果该字符串不是一个有效的数字，转换的结果会是 NaN：后面括号里为非数字

运算符（分为三种：一元运算符（简单理解是一个参数对于它自己的运算）、二元运算符（对应两个不同的运算）、运算元（乘法运算））

举例
1、 1*5 ————（运算元）
2、 let x =1; ————(一元运算符)
    x =-x;
    alert( x );// -1，一元负号运算符生效     
3、 let x =1, y =3;   ————（二元运算符）
    alert( y - x );// 2，二元运算符减号做减运算

字符串连接（字符串拼接），二元运算符

例子：
let s ="my"+"string";
alert(s);// mystring

注意：只要其中一个运算元是字符串，那么另一个运算元也将被转换为字符串（无前后之分，运算方向为自左向右;                                                                                                                                  这时就有一个例子：                                                                                                           

alert(2+2+'1');    // "41" 而不是 "221" 

 ）

例子：
alert('1'+2);// "12"
alert(2+'1');// "21"
注意，这时'+'的（相互拼接），
而对于减号或其他的，再举个例子
alert(2-'1');// 1
alert('6'/'2');// 3
其中字符串被转换成了数字

数字转化：一元运算符 +（加号 + 应用于单个值，对数字没有任何作用。但是如果运算元不是数字，加号 + 则会将其转化为数字）：

例子：
let apples ="2";
let oranges ="3";
// 在二元运算符加号起作用之前，所有的值都被转化为了数字
alert(+apples ++oranges );// 5
// 更长的写法
// alert( Number(apples) + Number(oranges) ); // 5

  运算符优先级：执行的顺序则由 优先级 决定

  赋值运算符：所有计算先执行，然后 = 才执行，将计算结果存储到x

let x =2*2+1;
alert( x );// 5

求余运算符 %（注意：看似百分号实则和百分数无关，主要取两值之间的余数）
a % b 的结果是 a 除以 b 的余数。

幂运算符 **（对于自然数 b，a ** b 的结果是 a 与自己相乘 b 次。（和平方、立方一样的算法））

自增/自减（++、--，注意：将其应用于数值（比如 5++）则会报错。
要跟变量如：
let counter  = 2;
counter -- ;            //  和 counter = counter - 1 效果一样，但是更简洁
alert( counter ) ;    // 1 
）
++、--放在变量前面时，意味着这个变量在第一次使用就已经发生改变，使用的是新值
放在后面，意味着下一次才会发生改变，使用的是旧值

位运算符
    1、按位与 ( & )
    2、按位或 ( | )
    3、按位异或 ( ^ )
    4、按位非 ( ~ )
    5、左移 ( << )
    6、右移 ( >> )
    7、无符号右移 ( >>> )

修改和替换（可通过使用运算符 += 和 *=进行简化  ）

例子：
let n =2;
n +=5;// now n = 7 (同 n = n + 5)
n *=2;// now n = 14 (同n = n * 2)
alert( n );// 14
例子二；
let n =2;
n *=3+5;
alert( n );// 16（右侧计算首先进行，和 n *= 8 相同）

值的比较：
    字符串比较（ 首先比较两个字符串的首位字符大小 ）
          如果一方字符较大（或较小），则该字符串大于（或小于）另一个字符串。算法结束。
否则，如果两个字符串的首位字符相等，则继续取出两个字符串各自的后一位字符进行比较。
重复上述步骤进行比较，直到比较完成某字符串的所有字符为止。
如果两个字符串的字符同时用完，那么则判定它们相等，否则未结束（还有未比较的字符）的字符串更大。
例子：

alert('Z'>'A');// true
alert('Glow'>'Glee');// true
alert('Bee'>'Be');// true

不同类型间比较：当对不同类型的值进行比较时，javaScript会首线将其转换为数字再判定大小，对于布尔类型值，true会被转换为1、false转化为0
严格相等：普通的相等性检查==存在一个问题，它不能区分出 0 和false，同样也不能区分空字符串和false；

例如：
alert(0==false);// true 
alert(''==false);// true 

严格相等运算符 === 在进行比较时不会做任何的类型转换。

例如：
alert(0===false);// false，因为被比较值的数据类型不同
“不相等”符号 != 类似

对null和undefined进行比较；
 当使用严格相等===比较时

例如：
alert(null===undefined);// false  原因（他们属于不同的类型）

 而在非严格==比较时

例：
alert(null==undefined);// true  会判定相等

奇怪的结果：null vs 0
很神奇
alert(null>0);// (1) false
alert(null==0);// (2) false
alert(null>=0);// (3) true
 原因：null和0相比时，null会转变成数字，因此null>=0

undefined不应与其他值进行比较
alert(undefined>0);// false (1)
alert(undefined<0);// false (2)
alert(undefined==0);// false (3)
原因：    (1) 和 (2) 都返回 false 是因为 undefined 在比较中被转换为了 NaN，而 NaN 是一个特殊的数值型值，它与任何值进行比较都会返回 false。
(3) 返回 false 是因为这是一个相等性检查，而 undefined 只与 null 相等，不会与其他值相等

警惕：除了严格相等 === 外，其他凡是有 undefined/null 参与的比较，都需要额外小心。
    

交互：alert、prompt和confirm
演示环境：浏览器
alert（message）  成为模态窗：弹出的这个带有信息的小窗口

prompt函接受两个参数
result = prompt(title,[default]);
浏览器会显示一个带有文本消息的模态窗口，还有input框和确定/取消按钮
title显示给用户的文本
dafault可选的第二个参数，指定input框的初始值
用户可在prompt对话框的input框内输入一些内容，然后点击确定，或者可通过“取消”按钮或按下键盘的ESC键，已取消输入
例子：
let age = prompt('How old are you?',100);
alert(`You are ${age} years old!`);// You are 100 years old!

第二个参数是可以选择的，如果不提供，浏览器会默认用“undefined”替换default
但是为了更好的效果，建议使用let test = prompt("Test",'');
不要直接不写，如let test = propt（“test”）

confirm：语法（result = confirm（question）；）
confirm函数显示一个带有question以及确定和取消两个按钮的模态窗口
点击确认返回true ，反之为false

 例子：
let isBoss = confirm("Are you the boss?");
alert( isBoss );// 如果“确定”按钮被按下，则显示 true      

总结一下就是：                                                                                                                            alert显示信息；                                                                                                                        prompt是显示信息要求用户输入文本，点击确定返回文本，点击取消或按下Esc键返回null；confirm显示信息等待用户点击确认或取消，点击确定返回true，反之这些都是模态的：他们暂停脚本的执行，并且不允许用户与该页面的其余部分进行交互，知道窗口被消除
上述所有方法一共有两个限制：                                                                                                           1、模态窗口的确切位置由浏览器决定，通常在页面中心
   2、窗口的确切外观也取决于浏览器，我们不能修改它

提供一个案例：
<!DOCTYPE html>
<html>
<body>
<script>
'use strict';
    let name = prompt("What is your name?","");
    alert(name);
</script>
</body>
</html>