作者自述

hello大家好，我是苏苏，从事前端开发工作已有2年，现在时不时更新掘金文章，同时我的文章从最基础的开始分享，当然了也喜欢更多喜欢前端开发的小白，能从我的文章中学到知识，那么我们开始吧！

JavaScript学习计划一

1.认识JavaScript

javaScript是一门用来与网页交互的脚本语言。
由以下三部分组成:
1.ECMAScript(核心): 规定了js的数据类型、操作语句、变量、内置对象等
2.DOM(文档对象模型): 与网页内容进行交互的方法和接口
3.BOM(浏览器对象模型)：与浏览器进行交互的方法和接口
说到这三部分的组成，市面上这些浏览器对js支持程序也不一样，
不过大家知道这些浏览器就行，他们分别是IE、Firefox、Chrome、Safai和Opera。

2.三种嵌入方式

    <!-- 2.行内事件 -->
    <div>
        <a href="javascript:console.log('我是方式二');">点击我</a>
    </div>
    <!-- 1.所有元素标签最后 -->
    <script type="text/javascript">
        console.log('hello word','我是方式一');
    </script>
    <!-- 3.引入式（最常用） -->
    <script type="text/javascript" src="./index.js"></script>

2.1 引入式

这里我为什么要单独的提这个引入式呢，因为它放置的位置不同，有不同的特点。
如果你的script标签放在头部引入，例如:

那么此时你需要在js文件里写上

    window.onload = function(){
        // 执行js操作
    }

    // jq写法是
    $(document).ready(function(){
        // 执行js操作
    })

如果是body引入，就直接这样子

因为放head里意味着，把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面，
这会出现一个白屏的效果，而放在body里，页面会在处理 JavaScript 代码之前完全渲染页面。
用户会感觉页面加载更快了，因为浏览器显示空白页面的时间短了。

3.在浏览器中的输出

3.1 使用 window.alert() 弹出警告框

window.alert('弹出警告框');

3.2 document.write() 将内容写到 HTML 文档中

document.write(`<div>我是写入的标签</div>`);

3.3 使用 innerHTML 将内容修改

 <div id="demo">我即将被修改</div>
 <script>
     document.getElementById("demo").innerHTML="已修改";
 </script>

3.4 使用 console.log() 写入到浏览器的控制台

console.log('我是写入浏览器控制台的内容')

4.语法

就像学英语那样，学习一门语言，也得知道它的语法

4.1 区分大小写

无论是变量、函数名还是操作符，都区分大小写。
换句话说，变量 test 和变量 Test 是两个不同的变量。
类似地，typeof 不能作为函数名，因为它是一个关键字。
但 Typeof 是一个完全有效的函数名。

var test = 10;
var Test = 20;
console.log(test); // 10
console.log(Test); // 20

4.2 标识符

   在JS中所有的可以由我们自主命名的都可以称为是标识符
   例如：变量名、函数名、属性名都属于标识符
   命名一个标识符时需要遵守如下的规则：
      1.标识符中可以含有字母 、数字 、下划线_ 、$符号
      2.标识符不能以数字开头
      3.标识符不能是ES中的关键字或保留字
      4.标识符一般都采用驼峰命名法
          - 首字母小写，每个单词的开头字母大写，其余字母小写
            helloWorld  xxxYyyZzz
          - JS底层保存标识符时实际上是采用的Unicode编码，
          所以理论上讲，所有的utf-8中含有的内容都可以作为标识符
    // 千万不要这么用
       var if = 123;
       console.log(if); if是关键字，报错："Uncaught SyntaxError: Unexpected token if"
    //千万不要这么用
       var 我是一二三 = 789;
       console.log(我是一二三); //789，能用，但不规范

4.3 注释

     //      // 单行注释
    /* */  // 多行注释

4.4 严格模式

ECMAScript 5 增加了严格模式（strict mode）的概念。
要使用严格模式，在代码开头加上这一行： "use strict";
虽然看起来像个没有赋值给任何变量的字符串，但它其实是一个预处理指令。
任何支持的 JavaScript 引擎看到它都会切换到严格模式。

"use strict";\
 a = 3.14;       // 报错 (x 未定义)
 // Uncaught ReferenceError: x is not defined

也可以单独指定一个函数在严格模式下执行，只要把这个预处理指令放到函数体开头即可

"use strict";
test();
function test() {
    y = 3.14;   // 报错 (y 未定义)
}
// Uncaught ReferenceError: y is not defined

4.5 语句

ECMAScript 中的语句以分号结尾。
如下面的例子：

let a = x + y // 没有分号也有效，但不推荐   
let b = x - y; // 加分号有效，推荐

即使语句末尾的分号不是必需的，也应该加上。
多条语句可以合并到一个代码块中。
代码块由一个左花括号（{）标识开始，一个右花括号（}）标识结束：

 if (test) { 
    test = false; 
    console.log(test); 
 }

if 之类的控制语句只在执行多条语句时要求必须有代码块。
不过，最佳实践是始终在控制语句中使用代码块，即使要执行的只有一条语句，如下例所示：

// 有效，但容易导致错误，应该避免 
if (test) 
console.log(test);

5.小结

作者我呢，是一个上班族，会时不时更新js基础分享内容，这样不仅可以增强我对基础概念的记忆，而且可以提供给小白学习。

JavaScript小白入门计划一