JavaScript的初步认知

一、JS 概述

1.1 JavaScript的诞生(一)

JavaScript 诞生于 1995 年。由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言, 最初名字叫做Mocha，1995年9月改为LiveScript。12月，Netscape公司与Sun公司（Java语言的发明者）达成协议，后者允许将这种语言叫做JavaScript。这样一来，Netscape公司可以借助Java语言的声势。

1996年3月， Netscape公司的浏览器Navigator2.0浏览器正式内置了JavaScript脚本语言. 此后其他主流浏览器逐渐开始支持JavaScript.

1.2 js版本

JavaScript这种语言的基本语法结构是由ECMAScript来标准化的, 所以我们说的JavaScript版本一般指的是ECMAScript版本.

• 1997年7月，ECMAScript 1.0发布。
• 1998年6月，ECMAScript 2.0版发布。
• 1999年12月，ECMAScript 3.0版发布。
• 2007年10月，ECMAScript 4.0版草案想要提交ECMA组织, 但由于4.0版的目标过于激进, 改动太大, 并且微软,谷歌等大公司极力反对；一直到2008年7月ECMA开会决定，中止ECMAScript 4.0的开发（即废除了这个版本）
• 2009年12月，ECMAScript 5.0版正式发布
• 2011年6月，ECMAscript 5.1版发布
• 2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”。

1.3 js的优势

目前苹果公司的Safari, 谷歌的Chrome,微软的IE等几乎全部浏览器都支持JavaScript, 基于JavaScript开发的库和框架数不胜数, 例如: jQuery,Angular, React等…

JavaScript将在前端和服务器端(Node.js)有更好的发展

1.4 js用途(二)

它的主要目的是，验证发往服务器端的数据、增加 Web互动、加强用户体验度等。可用于开发网站、游戏、移动端app等

1.5 js语言的组成(三)

javascript = ECMAScript + BOM + DOM

1. 核心(ECMAScript)
2. 浏览器对象模型(BOM)
3. 文档对象模型(DOM)

1.6 JS和H5的关系

h5全称html5,不是单纯的html的第5个版本，而是一项最新的web标准，是html、css、javascript等技术的集合

1.7 编辑工具

• sublime Text
• HBuilder
• Dreamweaver
• Notepad++
• ...

二、JS语法

2.1 js代码的编写位置

• script标签

<script type="text/javascript">
    alert('你好')
</script>

• js文件
  独立的js文件需要引入页面才能执行

<script type="text/javascript" src="js/common.js"><script>

script标签属性
- type:类型
- src :js文件路径
带src属性的script标签内不能写js代码

2.2 JS变量的定义、关键字

• 变量定义(使用var关键字)：变量是存储数据的容器

    //var：关键字，
    //age：变量名
    var age;       

• 赋值：
  age = 20;
• 定义的同时赋值：
  var age=20;
• 可以一次定义多个变量：
  var name="zhangsan", age=18, weight=108;

2.3 JS代码规范

• JS变量的命名规范（规定）

• 变量名必须是数字,字母,下划线_和美元符$组成;
• 第一个字符不能为数字
• 不能使用关键字或保留字

• 代码可读性（约定）

• 标识符区分大小写，如：age和Age是不同的变量。但强烈不建议用同一个单词的大小写区分两个变量。
• 变量命名尽量遵守驼峰原则: myStudentScore
• 变量命名尽量见名知意
• 保持代码缩进
• JS语句的末尾尽量写上分号;
• 运算符两边都留一个空格, 如 var n = 1 + 2;
• 注释
  • 单行注释：//注释内容
  • 多行注释（和CSS注释一样）
    • /*注释内容*/
    • 多行注释不能嵌套

2.4 输出结果

• alert()：弹窗输出
• console.log()：控制台输出
• 输出到页面元素

• innerHTML：双标签输出
• value：表单输出

• document.write() 输出到body内

2.5 JS数据类型(四)

• 1.值类型
  • Number：数字
    NaN：是一个特殊的值，即非数值(Not a Number)。数学运算无法得到数字时，就会返回NaN
    • 不代表任何值，也不等于任何值，甚至自己都不等于自己
    • 任何数据与它运算都返回NaN
  • String：字符串
    用引号（单/双引号）括起来的内容
• Boolean: 布尔类型
  true
  false

-2. 引用数据类型

• Object：对象
• Array：数组

• 3.特殊数据类型
• Null
  • null ，通过id获取不到元素时则得到 null
• Undefined
  • undefined，声明变量但不赋值则得到 undefined

数据类型判断typeof

    typeof 'html5'; //=>string
    typeof 100; //=>number
    typeof true //=>boolean
    typeof null //=>object

数据类型转换

• 基本数据类型转换：利用内置函数进行转换
  |值(a) |转换为 |字符串String(a)|数字Number(a)|布尔值Boolean(a)
  |--- |:-----😐---- |---- |---- |
  |undefined|=> |"undefined" |NaN |false
  |null |=> |"null" |0 |false
  |true |=> |"true" |1 |
  |false |=> |"false" |0 |
  |"" |=> | |0 |false
  |"1.2" |=> | |1.2 |true
  |"one" |=> | |NaN |true
  |0 |=> |"0" | |false
  |-0 |=> |"0" | |false
  |NaN |=> |"NaN" | |false
  |1 |=> |"1" | |true

• 隐式转换
  如果运算不能进行下去，内部就会尝试进行数据类型的转换
  支持隐式转换的运算：逻辑运算、关系运算、算术运算

三、运算符

3.1 条件判断语句

3.1.1 if语句

• if单分支：

if(条件){
    //条件成立(返回true)时，执行这里的代码，否则不执行
}

• if双分支：
  当if括号内的表达式结果成立，执行执行代码1，否则执行执行代码2

    if(条件){
        //代码1
        //条件成立(返回true)时，执行这里的代码，忽略以下代码
    }else{
        //代码2
        //条件不成立(返回false)时，执行这里的代码
    }

• if多分支：
  从上往下，满足哪个条件就执行其相对应的语句，都不满足时，执行最后的else的语句，只能进入其中之一

if(条件1){
    //条件1成立(返回true)时，执行这里的代码，忽略以下代码
}else if(条件2){
    //条件2成立(返回true)时，执行这里的代码，忽略以下代码
}
...
else{
    //以上条件都不成立(都返回false)时，执行这里的代码
}

3.1.2 三元运算

格式：条件 ? 条件成立代码 : 条件不成立代码

var a=20;
var b = 50;
var sum = a>b ? a-b : a+b;

3.1.3 switch语句

switch(值) {
    case value1: //要求value1与值恒等
        //如果表达式的值恒等于value1，代码从这里开始执行
        break;
    case value2:
        //如果表达式的值恒等于value2，代码从这里开始执行
        break;
    case value3: 
        //如果表达式的值恒等于value3，代码从这里开始执行
        break;
    case value4: 
        //如果表达式的值恒等于value4，代码从这里开始执行
        break;
    default: 
        //如果以上条件都不成立，默认执行这里的代码
}

• switch语句在比较值时使用的是全等操作符，因此不会发生类型转换
• case: 当符合条件时，会从符合条件的那一条case语句开始，依次顺序向下执行，直到结束或遇到break
• break: 跳出switch语句
• default: 当所有的case都不满足的情况下会执行defalut下面的语句

3.2 循环语句

• 循环就是重复做一件事, 在JS中指的是循环执行某部分代码.
• 循环结构是程序中一种很重要的结构，其特点是在给定条件成立时，反复执行某程序段，直到条件不成立为止

只要条件成立，就会不断地执行花括号里的语句
编写条件时，要避免出现死循环

3.2.1 while循环

//变量初始化
while(条件){
    //条件成立就会不断地执行这里的代码，直到条件不成立
    //所以这里一般会伴随着条件的更新
}

3.2.2 do...while

//变量初始化
do {
    //不管条件是否成立，先执行一次这里的代码，再进行条件判断，如果条件依然成立，则再次执行这里的代码，依此类推
    //所以这里一般会伴随着条件的更新
} while(条件)

3.2.3 for循环

for(变量初始化; 条件判断; 变量更新){
    //循环条件成立，则执行这里的代码
}

• 两个分号必须写

3.3 循环跳转

• break：//退出当前整个循环

• 只能在循环语句中使用
• 循环体中位于break后的语句不会被执行
• 在多层循环嵌套中，一个break语句只向外跳一层

• continue：//跳过本次循环，继续下一次循环

• 只能在循环语句中使用，
• 跳过本次循环（即跳过循环体中下面尚未执行的代码），接着执行下次循环。

• label：给循环代码添加标识
  break和continue后如果带标识，则跳到标识所在循环

break与continue的区别（如图）

|

PS：

• 知道次数的循环用for循环，不知道次数用while循环
• 死循环
• 死循环就是重复执行代码, 不会停止.
• 死循环会造成程序卡死甚至崩溃等问题, 所以我们写代码要避免死循环

3.3.1 嵌套循环

for(var i=0;i<10;i++){
    for(var j=0;j<10;j++){
        console.log(i,j);
    }
}