JS入门
1-1 本章大纲
Js阶段 学习的特色 入门很重要，重复练习，模仿，难，bug（工做生涯），调试出来。javascript
开发工具： Hbuilder（中国）； webstorm ： 体积大 速度相对慢一点；php
npp （notepad++） sublime 体积小 速度快；css
l JavaScript简介html
l 第一个程序开发前端
l 变量java
l 运算符node
l 代码规范python
1-2 写在前面
1-2.1 JavaScript是什么？
JavaScript是web端的编程语言，最先是在html网页上使用，用来给HTML网页增长一些动态功能。后续发展过程当中主要出现两个方向的JS开发：客户端JS、服务器端（node.js）JS；（php，java，python）全栈工程师css3
1-2.2 为何学习JavaScript
让HTML（css3.0）网页显示效果更加炫丽，同时添加各类动态数据的验证和处理，提高用户使用的感知度。git
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()进行四舍五入操做。
- 1. 【转】js入门
- 2. js入门
- 3. Node Js入门
- 4. D3.js入门
- 5. JS入门
- 6. js入门-one
- 7. JS入门02
- 8. js——javascript入门
- 9. Ext JS入门
- 10. Node Js 入门
- 更多相关文章...
- • Memcached入门教程 - NoSQL教程
- • Neo4j数据库入门教程 - NoSQL教程
- • YAML 入门教程
- • Java Agent入门实战（一）-Instrumentation介绍与使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 【转】js入门
- 2. js入门
- 3. Node Js入门
- 4. D3.js入门
- 5. JS入门
- 6. js入门-one
- 7. JS入门02
- 8. js——javascript入门
- 9. Ext JS入门
- 10. Node Js 入门