1.2 JavaScript初体验

1、引入JavaScript

JavaScript 和 CSS 类似，要嵌入到 HTML 中才能被浏览器解释和执行，将 JavaScript脚本嵌入到 HTML 文档中有 3 种标准引入方法：

（1）行内引入：在 HTML 属性中直接嵌入，结构行为不分离，不方便复用，不建议使用；

<div style = "width:100px;height:100px;background:red;"   onclick="alert('我是平头哥')">我是来学前端的</div>

优缺点：
··········在标签内部使用 js 代码，结构不分离，无法重用，不利于后期维护，不建议使用。

（2）内嵌引入：JavaScript 代码可以通过 script 标签嵌入到 HTML 文档内部，写在 script 标签之间。

<script>
      alert('我是超人，来拯救世界');
</script>

·····缺点：结构不分离
·····需要注意的是，一个 HTML 文档中可以出现任意多个 script 标签，也可以放在任何地方，一般 script 标签放置在 head 头部标签中，或者是 body 标签的末尾，建议放在 body 标签的末尾。

（3）外链：通过 script 标签的 src 属性外链 js 文件（引入外部脚本）

<script scr="js/a.js"></script>

·····优点：结构分离，方便复用
·····JavaScript 可以和 css一样是一个单独的 js 文件，其后缀是“.js”，而作为外部的 js 文件，需要引入到 HTML 文档中才可正常使用，js 文件需要通过 script标签中的 src 属性引入。
·····需要注意的是，如果除了外部引入的 js 文件外，还需要再在 HTML 文档内部书写JavaScript 代码，需要重新写一个 script 标签放置内嵌的 JavaScript 代码，用于引入外部 js 文件的 script 标签内部则不能再放置其他 JavaScript 代码，因为它不会执行。

（4）注意问题

1>数字或变量不用加引号，其他均加引号；
2>js一般用单引号，单双引号要正确嵌套；
3>同一script标签中，外链和内嵌不同时发挥作用，只识别一个，可写多个script标签用以单独写内嵌或外链；
4>script标签可以写在页面的任何地方；
5> js区别大小写，每个语句后要加分号；
6> js会忽略多个空格或换行，可以利用其对代码进行格式化和美化；

（5）注释

注释一般用于解释代码，提高可读性，不会被 JavaScript 解析；也可以用于调试代码，例如代码出现了问题，但是又找不到具体出问题的代码，就可以注释掉可能出问题的代码，看程序是否正常运行，逐步排查。

// 单行注释  Ctrl + /
/* 多行注释 */  Ctrl + shift + /

2、JavaScript变量

（1）定义

变量是存储数据的容器，我们通过变量名获取数据，修改数据。

变量名的由来：
····· 计算机在进行计算的时候，会将需要计算的数据存储在内存中，每一个存储单元都会有一个编号类似于身份证号一样（001），如果需要记住这些编号的话就太麻烦了。假如要定义 100 个变量，那就要记住 100 个编号，这样编程是不可能实现的，因此给每一个存储单元起一个名字方便识别，这种名字我们称为变量名。
·····例 age = 10，则age为变量名，age中存储的值为 10。

JavaScript中的变量为松散类型，所谓松散类型就是指当一个变量被声明就可以保存任意类型的值。换句话说，每一个变量仅仅是一个用于保存值的占位符而已。

（2）变量命名规则

标识符 指变量、函数、属性的名字，或者函数的参数。在这里，标识符的命名规则也可以说是变量的命名规则。

<1>只能以数字、字母、下划线、$组成；

<2>不能以数字开头；

<3>不能使用关键字、保留字；

<4>建议命名语义化，即见名知义；

<5>小驼峰命名，如：userName passWord。

关键字：

保留字

（3）变量的声明语法 【var 变量名 = 值】

JavaScript是弱类型语言， 变量一定要声明再使用；

<1>声明并赋值（推荐）

      var name = '龟仙人';   //var声明，将“龟仙人”赋给name
      alert(name);

<2>先声明，再赋值

      var age;       //声明变量age
      age = 10;      //给age赋值10
      console.log(age);   //打印age

<3>一次声明多个并赋值

      var a = 10,
          b = 20,
          c = 30;
      console.log(a,b,c);

注意：一次声明多个赋值，中间需要用逗号“ ，”隔开，声明赋值结束最后用分号“ ；”。

3、JavaScript调试

调试是程序员通过一定的手段检测程序的正确性，调试对于整个程序没有功能上的作用，只是给程序员的一个工具；在调试完毕，要删除调试代码。JavaScript调试分为输出调试和断点调试。

（1）输出调试：指将需要检测的数据或标签输出打印到页面上，方便查看数据变化。

括号中，数字和变量可以不加引号，其他的都要添加引号。

    alert 和 document.write 是显示给用户看的，console.log 是程序员查看运行数据的调试工具。

<1> alert ( 数据 )------页面弹框，“确定”按钮

alert是阻塞型，一次只能填一个数据；

       alert('孙悟空');

延伸：
······prompt( ’ ’ ) ; 弹出输入框，有“确认”和“取消”

······confirm( ’ ’ ) ; 弹出确定框，有“确认”和“取消”

<2> console.log ( 数据 )------控制台打印

控制台打印，F12/右击->检查查看打印信息，一次可以打印多个；

       console.log('龟仙人');

延伸：字符串拼接
      
        var name = '张大大';
        var age = '24';
        var from = '山东·潍坊';
        
        console.log('我是'+name+',我今年'+age+',我来自'+from+'。');
        console.log('我是'+name+' 我今年'+age+' 我来自'+from+' ');   //标点符号可空格

<3> document.write ( text )------网页中输出

能识别标签

        var name = '天津饭';
        document.write('<h1>你是 '+ name +' </h1>');

        document.write('神经病啊————薛之谦');

（2）断点调试

        var a = 10;
        var b = 20;
        var c = a + b;
        console.log(c);

断点调试如下，设置断点后要再次进行刷新，才能进行断点调试。