开始正式的学习 JS

主流浏览器及其有哪些?

主流浏览器 内核
IE trident
Chrome webkit/blink
firefox Gecko
Opera presto
Safari webkit

如何引入 JS?

  1. 可以页面内嵌标签
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  11. </body>
  12. <script>
  13.     // 相关代码
  14. </script>
  15. </html>
  1. 外部引入
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  11. </body>
  12. <script src="引用的代码路径"></script>
  13. </html>

基本结构?

  • 为符合 Web 标准(w3c 标准中的一项)结构、样式、行为相分离，通常会采用外部引用。
结构 行为 样式
html js css

相分离: 三个文件分开写，开发标准。

JS基本语法

  • 变量（variable）
    • 变量声明
      • 声明、赋值分解
      • 单一 var
  • 命名规则
    • 变量名必须以英文字母、_、$开头
    • 变量名可以包括字母、_、$、数字
    • 不可以用系统的关键字、保留字作为变量名

查询关键字或者保留字

声明变量

  1. //声明一个变量
  2. var a;
  1. //声明多个变量
  2. var a = 100,
  3.     b = 200,
  4.     c = "holle world";

基本语法

  • 原始值(栈数据)：Number、Boolean、String、undefined、null (不可改变的原始值)。
  • 引用值(堆数据)：array、Object、function…date、RegExp 等。
  1. //原始值几种类型
  2. //Number类型,数字类型
  3. var a = 111;
  5. //String类型,字符串类型
  6. var b = "我超级帅"
  8. //Boolean类型 就两个值 一个true 一个false
  9. var c = true;
  10. var d = false;
  12. //undefined类型 就一个值 undefined
  13. var e = undefined;
  15. //null类型 表示站位 表示空

JS 的数值（number）都是以IEEE 754双精度浮点数格式保存。取值范围是：1.7976931348623157E+308到-1.7976931348623157E+308之间，也就是1.797693134862315710的308次方到-1.797693134862315710的308次方之间。JS的 number 类型有一个特殊值叫 NAN，该属性用于指示某个值不是数字，所以 NAN != NAN

计算机在存值的时候把原始值和引用值存的地方不一样原始值存到栈里面(stack)，引用值大致存到堆里面(heap)。

  1. //原始值 栈
  2. var a = 10,
  3. var b = a;
  4.  a = 20;
  5.  //console.log打印出b-->10;
  1. //引用值 堆
  2. //例子一
  3. var arr = [1,2];
  4. var arr1 = arr;
  5. arr.push(3);
  6. //console.log打印出arr1-->[1,2,3];
  8. //例子二
  9. var arr = [1,2];
  10. var arr1 = arr;
  11. arr = [1,3];
  12. //console.log打印出arr1-->[1,2];

js栈和堆的区别

JS语句基本规则

  • 语句后面要用分号结束“;”。
  • JS语法错误会引发后续代码终止，但不会影响其它 JS 代码块。
  • 书写格式要规范，“=、+、-、/”两边应该有空格。

function demo(){}函数后面可以不用加分号。

for(){}后面可以不用加分号。

if(){}后面可以不用加分号。

  1. //JS语法错误会引发后续代码终止，但不会影响其它JS代码块
  2. <script type="text/javascript">
  3. console.log(a);
  4. <script>
  5. <script type="text/javascript">
  6. var b = 1;
  7. console.log(b);
  8. <script>
  9. //第一部分代码块会直接报错,但是不影响第二部分的打印b;

JS运算符

  • 运算操作符
    • “+”
      • 数学运算、字符串链接
      • 任何数据类型加字符串都等于字符串
    • “-”、“*”、“/”、“=”、“（）”
    • “++”、“—”、“+=”、“-=”、“/=”、“*=”、“%=”；
    • 优先级“,”最弱，“（）”最高

运算符优先级

JS的加减乘除

  1. //加
  2. var a = 10,
  3.     b = 20,
  4.     c,
  5.     e,
  6.     g,
  7.     h,
  8.     f;
  9.     c = a + b;   // 加 打印30
  10.     f = 1 + "a"; // 字符串拼接 打印"1a"
  11.     e = b - a;   // 减 打印10
  12.     g = a * b;   // 乘 打印200
  13.     h = b / a;   // 除法 打印2
  14. var num = 0 / 0  // 打印NaN  全称Not A Number  计算机知道是数字但是显示不出来用NaN表示 叫非数  是Numbar类型
  1. var a = 10;
  2. var b = 10;
  3. a++;           // console.log打印 a-->11;
  4. b--;           // console.log打印 b-->9;
  5. a += 10        // 等于 a = a + 10    console.log打印a-->20
  6. a += 10 + 1    // 等于 a = a + 10 +1 console.log打印a-->21
  7.                // *=、/= 相似 不做介绍

参考文献

查询关键或者保留字[菜鸟社区]
[js栈和堆的区别](http://blog.csdn.net/flyingpig2016/article/details/52895620)[外链链接CSDN]**

运算符的优先级[JavaScript | MDN]