1-1 本章大纲
Js阶段 学习的特点 入门很重要，重复练习，模仿，难，bug（工作生涯），调试出来。
开发工具： Hbuilder（中国）； webstorm ： 体积大 速度相对慢一点；
npp （notepad++） sublime 体积小 速度快；
l JavaScript简介
l 第一个程序开发
l 变量
l 运算符
l 代码规范
1-2 写在前面
1-2.1 JavaScript是什么？
JavaScript是web端的编程语言，最早是在html网页上使用，用来给HTML网页增加一些动态功能。后续发展过程中主要出现两个方向的JS开发：客户端JS、服务器端（node.js）JS；（php，java，python）全栈工程师
1-2.2 为什么学习JavaScript
让HTML（css3.0）网页显示效果更加炫丽，同时添加各种动态数据的验证和处理，提升用户使用的感知度。
1-2.3 学习之前需要掌握的知识
（1） HTML网页开发基本知识
（2） CSS样式表基础知识
1-3 JavaScript简介
JavaScript是一种轻量级的编程语言，是一些简单指令的集合，可将JS代码插入到HTML网页标签中解释执行（直译）。(编译 把高级语言转为 电脑只认识 0 1 )
|
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。【百度百科】 |
1-3.1 发展历史
JavaScript诞生于1995年，起初它的目的是：处理以前由服务器端负责的一些表单验证，当时的软件环境，都是由服务器进行数据的验证等处理的。在那个年代走在最前端的网景(Netscape)公司决定着手开发一种客户端验证的语言。
（1） 起源：Nombas公司的C-- 嵌入式脚本语言，是之后嵌入网页中的脚本的理念的基础原型。
计划1995年2月发布LiveScript
布兰登·艾奇（Brendan Eich，1961年～），JavaScript之父主导，迎合当时的Java热潮，LiveScript完善并改名JavaScript；
1997年，JavaScript1.1提交ECMA（欧洲计算机制造商协会），该协会负责将这种脚本语言标准化à ECMAScript
ECMAScript主要规范语言的组成部分如下：
语法
类型
语句
关键字
保留字
操作符
对象
ECMAScript标准， JavaScript / Jscript 实现es5,es6,es7,er8
通常开发中，ECMAScript和JavaScript通常表示一个意思；
（2）发展历程：
1998年6月：ECMAScript2.0发布
1999年12月：ECMAScript3.0发布，成为JS通行标准
2007年10月：ECMAScript4.0发布，改动较大，引起分歧。
2008年7月：分歧太大，中止ECMAScript4.0，改善后发布为ECMAScript3.1版本，并起名为Harmony(和谐)，之后不长时间ECMAScript3.1更名为ECMASciprt5；
2015年6月17日，ECMAScript6正式发布，即ECMAScript2015;
JavaScript 诞生于 1995 年。 它当时的目的是为了验证表单输入的验证。 因为在 JavaScript问世之前，表单的验证都是通过服务器端验证的。而当时都是电话拨号上网的年代，服务器验证数据是一件非常痛苦的事情。
1995 年， 当时工作在 Netscape(网景)公司的布兰登(Brendan Eich)为解决类似于 “向服务器提交数据之前验证”的问题。在 Netscape Navigator 2.0 与 Sun 公司联手开发一个称之为LiveScript 的脚本语言。为了营销便利，之后更名为 JavaScript
后来者:
因为 JavaScript1.0 如此成功，所以微软也决定进军浏览器，发布了 IE3.0 并搭载了一 个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷）， 并且也提供了自己的 VBScript。
标准的重要:
在微软进入后，有 3 种不同的 JavaScript 版本同时存在：NetscapeNavigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与 C 和其他编程语言不同的是， JavaScript 并没有一个标准来统一其语法或特性，而这 3 种不同的版本恰恰突出了这个问题。 随着业界担心的增加，这个语言标准化显然已经势在必行。
灵敏的微软、迟钝的网景:
虽然网景开发了 JavaScript 并首先提交给 ECMA 标准化，但因计划改写整个浏览器引擎 的缘故，网景晚了整整一年才推出“完全遵循 ECMA 规范”的 JavaScript1.3。而微软早在一 年前就推出了“完全遵循 ECMA 规范”的 IE4.0。这导致一个直接恶果：JScript 成为 JavaScript 语言的事实标准。
标准的发展:
在接下来的几年里，国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同程度的成功和失 败）将 ECMAScript 作为 JavaScript 实现的基础。
山寨打败原创:
JScript 成为 JavaScript 语言的事实标准，加上 Windows 绑定着 IE 浏览器，几乎占据全 部市场份额，因此，1999 年之后，所有的网页都是基于 JScript 来开发的。而 JavaScript1.x
变成可怜的兼容者。
网景的没落与火狐的崛起:
网景在微软强大的攻势下，1998 年全面溃败。但，星星之火可以燎原。同年成立 Mozilla 项目中 (开源)Firefox(火狐浏览器)在支持 JavaScript 方面无可比拟，在后来的时间里一步步蚕食 IE 的市场，成为全球第二大浏览器。 开发者头条 github.com
谷歌的野心:
GoogleChrome，又称 Google 浏览器，是一个由 Google（谷歌）公司开发的开放原始码 网页浏览器。他以简洁的页面，极速的浏览，一举成为全球第三大浏览器。随着移动互联网 的普及，嵌有 Android 系统的平板电脑和智能手机，在浏览器这块将大有作为。
苹果的战略:
Safari 浏览器是苹果公司各种产品的默认浏览器，在苹果的一体机(iMac)、笔记本(Mac)、 MP4(ipod)、iphone(智能手机)、ipad(平板电脑)，并且在 windows 和 Linux 平台都有相应版 本。目前市场份额全球第四，但随着苹果的产品不断的深入人心，具有称霸之势。
幸存者 Opera 的全球市场份额第五，2%左右。它的背后没有财力雄厚的大公司，但它从“浏览 器大战”存活下来的，有着非常大的潜力。
1-3.2 组成部分
通常情况下JavaScript和ECMAScript被人用来表达相同的意思，但是需要明确的是，JavaScript是ECMAScript的实现，并且在实现的同时扩展了更多功能，一个完整的JavaScript通常由三部分组成
(1) 核心——ECMAScript
(2)文档对象模型——DOM（文件File/ Document文件/文档 html网页 html文档）
关于DOM(Document Object Model)：文档对象模型，是W3C的标准，当网页被加载时，就会创建页面的文档对象模型。
(3)浏览器对象模型——BOM
关于BOM：浏览器对象模型，主要和处理浏览器窗口和框架。
万物皆对象，类（抽象）---——》人类-》张三 李四（对象） 狗-》泰迪-》旺财
对象是类的实例（实际的例子）,类是对象的抽象；
1-3.3 开发工具
JavaScript是一种脚本语言，是以文字的形式呈现出来进行编辑开发的，所以常规的文本编辑器都可以进行开发，但是为了提高开发人员的开发效率，通常会使用一些优秀的开发软件，常规开发软件如下：
记事本
超级记事本：SublineText、Editplus、UltraEdit notepad++等等[快速运维]
网页编辑开发工具：Dreamweaver、Hbuilder（国产的）、WebStrom（外国）等等[网页开发]
软件开发工具：eclipse、Intellij、MyEclipse,xcode等等[后台开发打包]
1-4 入门程序
代码案例：
|
<!DOCTYPE html> |
1-4.1 扩展计算机知识（了解）
域名 baidu.com-> 一个ip 192.168.1.1
http://localhost:63342/ 本地服务器
http://127.0.0.1:8020/zz1705/day01/01.html
http协议 超文本传输协议：
http:// news.china.com /news100/11038989/20170513/30521113.html
https://github.com/racaljk/hosts
www(万维网).baidu.com
超文本传输协议：
http协议 Baidu.com:80( 默认 端口号)
https 协议 443
(IPv4)192.168.1.111:80 0-255 256^4
（IPv6 2001:0000:9d38:953c:2cf8:2d5d:3f57:c3c2（16^32)
Ipconfig 查看ip地址
Nslookup www.baidu.com
V7.0.1.407
1-4.2 注释
注释：是用来解释说明的文字
通常JavaScript中会出现三种注释情况
|
单行注释 |
// 注释内容 |
主要对一行或者多行代码做简短说明来使用的。 |
|
多行注释 |
/* 注释内容 */ |
主要对一行或者多行代码做详细说明，包括使用注意事项等等。 |
|
文档注释 |
/** 注释内容 */ |
主要对方法/函数或者类型等进行详细解说的说明，包括参数类型及说明的意义等各方面的信息。 |
1-4.3 引入JS文件
通常JS代码会出现在三个地方
l 标签内嵌——使用特别少，根据具体需求而定
l 页面内嵌——使用比较普遍
l 外部JS文件——使用最多
代码案例：
|
标签内嵌 |
|
<div style="width:100px;height:30px;background-color:#ccc;line-height: 30px;" |
|
页面内嵌 |
|
<head> |
|
外部JS |
|
<!—引入一个HTML网页之外的JS文件 --> <script src="js/demo.js"></script> |
|
注意： <script>标签必须以</script>结束 <script></script>标签中间不能出现其他代码 |
1-4.4 <script>标签属性
<script language=”…” src=”…” type=”…”></script>
l language：已废弃。原来用于指定代码使用的脚本语言，由于大多数浏览器忽略它，所以基本不用了。
l src：表示要引入的外部JS文件的路径
l type：表示脚本语言的类型（可以不写）
代码案例——内嵌JS脚本：
代码案例——引入JS文件：
1-4.5 特殊字符处理
由于网页显示内容是通过HTML进行格式化的，所以通常会出现一些特殊的字符不能正确显示或者让网页本身产生一些问题。如<、>
通常这样的符号，会通过特殊的格式字符来进行替代
|
< |
< |
|
> |
> |
|
|
空格符号 |
代码案例：页面中输出标签
1-4.6 对话框处理
l 警告对话框
n alert(“message”);
代码案例：
1-5 变量
1-5.1 变量赋值操作
l 定义变量初始化数据 = （等号）是赋值运算符
|
var x = 12; |
l 定义变量，数据赋值
|
var x ; Console.log（x） x = 23; Console.log(x) |
1-5.2 命名规则
l 见名知意：变量是用来保存程序中要使用的重要数据的，所以通常情况下，变量的命名最好是让查看代码的人通过变量名称就能读懂变量的意义。
l 驼峰命名法，一个或者多个英文单词组成，第一个英文单词首字母小写，后面的每个英文单词首字母大写。
l 默认规则：字母、下划线、$符号开头，数字不能做变量开头。(不能关键字和保留字)
l 代码案例：变量声明和赋值
l 代码案例：变量声明和简单运算(+ - * / %)
1-6 数据类型
l JavaScript提供了5中基本数据类型和1中复杂类型(引用类型)
l ECMAScript表示不支持任何创建自定义类型的机制，所有值都是以下6种数据类型之一。
|
类型 |
描述 |
|
undefined |
未定义，从来没有声明过或者使用var声明了但是没有初始化 |
|
boolean |
布尔类型，只有两个值,true或者false |
|
Number |
数字类型，表示整数或者浮点数，另外还有一个特殊的值：NaN(not A number)。 |
|
String |
字符串类型 |
|
Null |
空类型，只有一个值null |
|
Object |
复杂类型 |
l 查看数据类型——typeof操作符
n 使用typeof关键字来检测变量的数据类型
n 通常检测结果如下
|
检测结果 |
描述 |
|
undefined |
未定义 |
|
Boolean |
布尔类型 |
|
String |
字符串 |
|
Number |
数值 |
|
Object |
对象或者null |
|
function |
函数/方法 |
l undefined类型
n 这个类型只有一个值undefined，使用从来没有声明过的变量，或者使用了var声明的但是没有初始化的变量时，就会出现这个值。
l null类型
n 只有一个值null，表示一个空对象引用，typeof检测会出现object对象类型
n 注意：undefined是从null派生出来的，所以 == 判断会返回true结果
l boolean类型
n 只有两个值true或者false
n 注意：其他类型的值，都和boolean类型有相互等价的值，可以通过Boolean(param)进行转换。同时也可以在条件中进行隐式转换，但是不推荐使用。
l number类型
n 包含两种数值，整数或者浮点数
n 重点：为了支持不同的数值类型，定义了不同类型的数值表示方式
u var i = 100;//十进制整数
u var i = 070;// 0开头的数字，默认8进制，56
u var i = 079;// 0开头，但是无效的8进制。79
u var i = 08;// 0开头，无效8进制。8
u var i = 0xA;//16进制，10
u var num = 1.8;// 浮点数类型
u var num = 0.9;
u var num = .9;//有效，但是不推荐这样的写法
n 难点：类型转换
u 通常网页上操作的过程中，会涉及到类型转换的问题，将字符串转换成数字的形式。
u Number(value);将value转换成数字，更常用的是parseInt(value)或者parseFloat(value);
1-7 数据类型转换
Javascript中的变量是松散类型的（弱类型），可以存储任何支持的数据类型
var x = 200;// x是number类型
x = “I am string”;// x是string类型
x = false;// x是boolean类型
这样处理操作，在程序实际执行过程中没有任何好处，所以不建议在程序中动态的改变变量的数据类型，对于程序的错误查找【调试】百害而无一利！
Javascript是一门具有动态特性的语言，所以程序在执行的过程中就会出现类型转换的概念。类型转换分为隐式转换和显示转换
l 显示转换：开发人员对数据类型强制进行转换
Javascript提供了以下的方法进行转换
转换为数值类型：Number(param), parseInt(param), parseFloat(param)
转换为字符串类型：toString(param)，String(param)
转换为布尔类型：Boolean(param)
l 隐式转换：程序运行的过程中自动进行转换
某些情况下，javascript会自动对数据类型进行转换操作【以下操作了解即可】。
>> isNaN(param);方法用于判断param参数是否不是一个数字，在进行判断的时候会自动调用Number(param)进行转换操作。非数值返回true，否则返回false
>> 递增、递减操作、取正取负操作
>> 加法运算操作
>> 乘除、减法运算、取摸运算
>> 逻辑运算、关系运算
1-8 关键字和保留字
1-8.1 关键字
|
Break |
Else |
new |
var |
|
case |
finally |
return |
void |
|
Catch |
For |
switch |
while |
|
continue |
function |
this |
with |
|
default |
If |
throw |
|
|
Delete |
In |
try |
|
|
Do |
instanceof |
typeof |
|
1-8.2 保留字
|
abstract |
Enum |
int |
short |
|
boolean |
Export |
interface |
static |
|
Byte |
Extends |
long |
super |
|
Char |
Final |
native |
synchronized |
|
Class |
Float |
package |
throws |
|
Const |
Goto |
private |
transient |
|
debugger |
implements |
protected |
volatile |
|
Double |
Import |
public |
|
1-9 运算符
1-9.1 算数运算符
|
运算符 |
描述 |
|
+ |
加法运算 |
|
- |
减法运算 |
|
* |
乘法运算 |
|
/ |
除法运算 |
|
% |
取余运算 |
|
i++ ++i |
自增加运算 |
|
--i i-- |
自减运算 |
1-9.2 关系运算符
|
运算符 |
描述 |
|
> |
大于 |
|
>= |
大于等于 |
|
< |
小于 |
|
<= |
小于等于 |
|
!= |
不等于 |
|
== |
相等 |
|
=== |
全等（值相等的同时判断类型一致） |
代码案例：
1-9.3 逻辑运算符
|
运算符 |
描述 |
|
&& |
与运算符 |
|
|| |
或运算符 |
|
！ |
非运算符，表示取反 |
代码案例：
1-9.4 赋值运算符
|
运算符 |
描述 |
|
= |
直接赋值操作 |
|
+= |
运行加法之后赋值 x += y 等同于x = x + y; |
|
-= |
运行减法之后赋值 |
|
*= |
运行乘法之后赋值 |
|
/= |
运行除法之后赋值 |
|
%= |
运行取余之后赋值 |
代码案例：
1-10 重点讲解
1-10.1 自增自减运算
l 自增运算符++
代码案例：x++ 先运算x进行赋值等操作，然后进行自增运算
代码案例：++x 先运算x自增运算，然后进行赋值运算等操作
|
var i = 1; i = i ++;// 第一种情况 i = ++i;//第二种情况 alert(i); |
l 自减运算符--
类似自增运算符的操作
1-10.2 八进制和十六进制
l 八进制表示法
八进制，逢8进位，所以所有数字中，不会出现超过8的数字,表示方式如下：
0,1,2,3,4,5,6,7,10,11,12,13,14,15,16,17,20...
JS程序中，数字的开头如果是0，并且数字中没有出现超过8的数字，就是八进制表示
|
var num1 = 075;//八进制 var num2 = 080;//[八进制无效]十进制 |
l 十六进制表示法
十六进制，逢16进位，表示方式如下
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,.
JS程序中，数字的开头如果是0x，并且数字中没有出现超过范围的字符，就是十六进制
|
var num1 = 0xa;//十六进制 var num2 = 0xh;//无效十六进制 |
l 八进制--十进制转换
12->2*8^0+1*8^1=10
l 十六进制--十进制转换
12->2*16^0+1*16^1 = 18
1-10.3 isNaN()和NaN
l isNaN();
方法用来判断，指定的数据不是数字【不是数字返回true/否则返回false】
|
var x = 12; alert(isNaN(x)); |
l NaN:不是一个数字，如数据类型转换时，转换失败
|
var x = “a12”; alert(parseInt(x)); |
1-10.4 Number处理
l toString()
toString()方法，把一个Number对象转换为一个字符串
|
var num = 12; var str = num.toString(); |
l toString(radis);
根据指定的radis参数，将整数转换成指定的进制进行展示
|
var num = 16; var s0 = num.toString(); var s1 = num.toString(10);// 默认 var s2 = num.toString(2);// 二进制 var s3 = num.toString(8);// 八进制 var s4 = num.toString(16);// 十六进制 |
l toFixed(radis)
四舍五入保留小数位数，保留的位数由参数radis指定
|
var x = 3.1415926; var s1 = x.toFixed(2);保留2位小数 var s2 = x.toFixed(5);//保留5位小数 |
1-11 代码规范
l 代码缩进
n 不同级别的代码缩进4个空格。
l 操作符两边添加空格
n = 赋值操作符
n 运算符
l 代码末尾的分号
n 代码末尾添加分号，增加代码的可读性
l 小括号使用
n 涉及运算时，会有代码运算的优先级问题，一律使用小括号进行解决，增加代码可读性
l 双引号、单引号嵌套
n 引号中如果出现需要引号包含的字符，单引号和双引号可以互相嵌套出现。
1-12 作业
n 课堂案例，抄写两遍
n 为抵抗洪水，展示连续作战89小时，编程计算共多少天零多少小时？ parseInt()
n 小明要到美国旅游，可是那里的温度是华氏温度为单位记录的。小明需要一个程序将华氏温度转换为摄氏度，并且同时展示华氏温度数值和摄氏温度数值。请计算华氏80度，为摄氏多少度(保留3位小数)？
摄氏度和华氏度计算公式：摄氏度=5/9.0*(华氏度-32)；
n 计算两个文本框的和
n 理解var k = 0; console.log(k++ + ++k + k + k++);
n 掌握逻辑运算的意义
n 掌握八进制、十六进制的写法
n 掌握NaN的含义（not a number）
n 掌握Number函数
l 综合应用
n 后羿攻击780，护甲90，血量2400；亚瑟攻击620，护甲470，血量3100；通常情况下，对方的攻击减去当前人物的护甲值，是真实伤害值。请计算：
u 后羿攻击亚瑟，攻击多少次才能杀掉亚瑟
u 亚瑟攻击后羿，攻击多少次才能杀掉后羿
n 计算两个文本框中的数值的加减乘除。
u 要求1：使用parseInt进行类型转换
u 计算结果使用Math.round()进行四舍五入操作。