©2016-2024 Matools All rights reserved,
粤ICP备17059708号
Javascript基础
１ 聊聊Javascript
１.1 Javascript的历史来源
94年网景公司 研发出世界上第一款浏览器。
95年 sun公司 java语言诞生
网景公司和sun合作。
Java+script ===> javascript
JavaScript 借鉴了C语言的基本语法，借鉴了JAVA的数据类型和内存管理，借鉴scheme语言将函数提升到第一阶级的地位（first
class），借鉴self语言，使用基于原型（prototype）的继承机制。
１.2 W3c规范
☞结构标准 html
☞表现标准 css
☞行为标准 js
<>
１.3JavaScript和ECMAScript的关系
ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer
ManufacturersAssociation，制定的标准。
JavaScript是由公司开发而成的，公司开发而成的一定是有一些问题，不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
简单来说ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。
就是说，你JavaScript学完了，Flash中的程序也会写了。
ECMAScript在2015年6月，发布了ECMAScript
6版本，语言的能力更强。但是，浏览器的厂商不能那么快的去追上这个标准。这些新的特性，我们就业班的深入，也会给大家介绍。
１.4 今天的JavaScript <>：承担更多责任
2003年之前，JavaScript被认为“牛皮鲜”
，用来制作页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是JavaScript开发的。所以浏览器就推出了屏蔽广告功能。
2004年JavaScript命运开始改变了，那一年谷歌公司，开始带头使用Ajax技术了，Ajax技术就是JavaScript的一个应用
。并且，那时候人们逐渐开始提升用户体验了。
2010年的时候，人们更加了解HTML5技术了，HTML5推出了一个东西叫做Canvas
（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript。
2011年，Node.js诞生，使JavaScript能够开发服务器程序了。
今天，JavaScript工程师是绝对的吃香，能够和iOS、Android工程师比肩，毫不逊色的。
现在，公司都流行WebApp，就是用网页技术开发手机应用。什么意思呢？手机系统有iOS、安卓、windows
phone。那么公司比如说开发一个“携程网”APP，就需要招聘三队人马，比如iOS工程师10人，安卓工程师10人，windows工程师10人。共30人，工资开销大。并且，如果要改版，要改3个版本。所以，现在公司，都用web技术，用html+css+javascript技术来开发app。好处是不用招聘那么多工程师，只需要几个前端开发工程师即可。并且也易于迭代，就是网页一改变，所有的终端都变了。
２ Js介绍
◆js是一款运行在客户端的网页编程语言。
◆组成部分
★ecmascript js标准
★dom 通过js操作网页元素
★bom 通过api操作浏览器
◆特点
★简单易用
★解释执行可以在浏览器中识别
对应的是：编译执行 java c# 转化为.dll可执行文件==>电脑读取.dll可执行文件
★基于对象没有封装和多态，不同于面向对象。直接操作元素。
（面向过程：一步步写和执行，最后呈现结果，某一步出错结果出错。）
使用范围
◆表单验证
◆轮播特效
◆开发游戏
３ Js书写位置
◆内嵌式
由于会逐条执行，所以为了不覆盖掉HTML代码，一般JS会写在</html>的后面，即最后。
◆外链式
★先创建一个外部JS文件
★通过src将外部js调用。
◆写js代码的时候，分号不能省略。
◆推荐将JS代码写在html结束标签后边
将多个JS文件合成为一个JS文件
４ 输出消息的几种方式
４.1 alert() 在页面弹出一个对话框，早期JS调试使用。
４.2 Confirm() 在页面弹出一个对话框, 常配合if判断使用。比alert多了一个取消按钮。
４.3 console.log() 将信息输入到控制台，用于js调试。
４.4 prompt() 弹出对话框，用于接收用户输入的信息。
４.5 document.write()在页面输出消息
document.write不仅能输出信息，还能输出标签。其他方式不可以。
◆转义字符
\” 转双引
\’转单引
\n转换行
\r 转回车
４.6 Js注释
快捷键 ctrl+/
单行注释 //
多行注释 /* */
５ 变量
会变化的量。
变量是用来存储数据的容器。
◆定义变量
◆给变量赋值
“=”是赋值运算符
◆定义并赋值
５.1 变量的命名规范
◆不能以数字或者纯数字开头来定义变量名。
◆不推荐使用中文来定义变量名。
◆不能使用特殊符号或者特殊符号开头(-除外);
◆不推荐使用关键字和保留字来定义变量名。
★在JS中严格区分大小写的！！！
６ 数据类型
６.1 简单数据类型
◆Number 数字类型
包含正数 负数 小数
数字类型的表达方式
★十进制表示法
★十六进制表示法
从0-9，a(A)-f(F)表示数字。以0x开头。
★八进制表示法
0开头，0-7组成。
◆字符串 String
凡是用双引号或者单引号引起的都是字符串。
◆布尔数据类型 Boolean
只有2个值一个是true, 一个是false. 实际运算中true=1,false=0
◆undefined 变量未初始化
定义了变量，没有给变量赋值
◆null 变量未引用 值为空 object 常用于数据销毁。
６.2 复杂数据类型
★ object 对象
★array 数组
７ 判断数据类型
typeof()
８ 比较运算符
< > <= >= == !=
９ 算术运算符
◆+ 加号
★两个数字类型的变量相加，得到的是一个数字类型。
★一个数字类型和一个字符串相加，得到的是一个字符串。
◆—减号
★两个数字类型的变量相减，得到的是一个数字类型。
★一个数字类型和一个数字字符串相减，得到的是一个数字类型。
★一个数字类型和一个非数字字符串相减，得到的是NaN,是一个数字类型。
NaN, not a number
◆/ 除号
★两个数字类型的变量相除，得到的是一个数字类型。
★一个数字类型和一个数字字符串相除，得到的是一个数字类型。
★一个数字类型和一个非数字字符串相除，得到的是NaN,是一个数字类型。
★0做为除数的时候，得到结果 Infinity （无限大），是一个数字类型。
◆% 取余数
◆优先级 有()先计算()里边的
１０ 带操作的赋值运算
１１ 新知识
１１.1 Date()对象
Date对象用于处理日期和时间。
１１.2 Math对象
不用像data一样需要先创建，可以直接使用。
◆Math.ceil() 天花板函数 向上取整
★如果是整数，取整之后是这个数本身
★如果是小数，对数进行向上舍入。
◆Math.floor() 地板函数
★如果是整数，取整之后是这个数本身
★如果是小数，对数进行向下舍入。
◆Math.max()
◆Math.min()
◆Math.pow()
◆Math.round()
◆Math.random()
１２ 数据类型转换
１２.1 数字类型转字符串
String()
变量.toString()
１２.2 字符串转数字类型
◆Number
★数字类型的字符串，转换之后得到的数字。
★非数字字符串，转换之后得到是NaN。
★小数类型的字符串，转换之后得到的是原数字。
◆parseInt
★整数数字类型的字符串，转换之后得到的整数数字。
★数字开头的字符串，转换之后得到的是前边的数字。
★非数字开头的字符串，转换之后得到的是NaN。
★小数类型的字符串，转换之后取整。
◆parseFloat
★整数数字类型的字符串，转换之后得到的整数数字。
★数字开头的字符串，转换之后得到的是前边的数字。
★非数字开头的字符串，转换之后得到的是NaN。
★小数类型的字符串，转换之后得到的是原数字。
１２.3 转布尔类型
Boolean()
★数字和字符串转完之后为true。
★undefined、null、0转完之后为false.
１２.4 隐式数据类型转换
在运算过程中，程序自己进行的数据转换(程序员没有操作)
１２.5 逻辑运算符
逻辑运算只有2个结果，一个为true,一个为false.
◆且&&
★两个表达式为true的时候，结果为true.
◆或||
★只要有一个表达式为true,结果为true.
◆非！
★和表达式相反的结果。
１３ 等号运算符
“=”赋值运算符
“==”只判断内容是否相同，不判断数据类型。
“===”不仅判断内容，还判断数据类型是否相同。
！= 只判断内容是否不相同，不判断数据类型。即只要内容不相同就是true。
！==不全等于 不仅判断内容是否不相同，还判断数据类型是否不相同。即内容和类型只要有一个不相同，就是true。
１３.1 变量的集体声明
１４ If...else 条件判断
If(条件表达式){
如果条件表达式结果为true,执行该处代码。 如果条件表达式结果为false,执行下边代码。
}else{
如果条件表达式结果为false,执行该处代码。
}
１５ If else嵌套
If(条件表达式){
如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。
}else If(条件表达式){
如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。
}else If(条件表达式){如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。
}else{
如果上边条件表达式结果都为false,执行该处代码。
}
１６ 三元表达式
表达式?结果1：结果2；
如果表达式结果为true,执行结果1，如果表达式结果为false,执行结果2.
可以理解为if else 的另外一种写法。
8代码调试
◆先让程序运行一遍
◆f12 代码调试工具
◆
◆刷新页面
◆找到一步步调试，每点击一次，执行一步。
◆添加变量或者表达式到监视窗口。
选择变量或表达式右键add to watch.
◆监视窗口
１７ Switch语句
Switch(变量){
case1:
如果变量和1的值相同，执行该处代码
break;
case2:
如果变量和2的值相同，执行该处代码
break;
case3:
如果变量和3的值相同，执行该处代码
break;
default:
如果变量和以上的值都不相同，执行该处代码
break;
}
★switch后边的变量和case后边值的数据类型必须保持一致。
◆Switch语句可以对变量进行集体判断：
１８ 自增自减
i++ ++i
◆在不参与运算的情况下，i++和++i都是在变量的基础加1
◆在参与运算的情况下
Var i=123;
Var j=i++; 先将i的值123赋值给j,之后再自增
j的值为123 i 的值为124
Var j=++i; i先自增，在赋值给j
J的值为124，i的值 124
１９ While循环
While(条件表达式){
只要条件表达式结果为true,循环一直执行，当条件表达式结果为false的时候，循环终止
}
While循环语句需现在循环体外定义变量。
２０ Do while
Do{
循环体代码；首先执行该循环体代码一次。如果while后边的表达式结果为true,该循环体会一直循环。如果结果false,该循环终止。
}while(条件表达式)
◆do while 比while循环多循环一次。
２１ for循环
for(定义变量;条件表达式;自增自减){
循环体代码
}
执行顺序:
◆首先定义变量
◆如果条件表达式结果为true的时候，执行for循环里的代码，如果为false，循环体代码终止执行。
◆先执行变量和条件表达式循环一次，再执行自增自减。
２２ Break语句
在循环体内，只要代码遇到break,程序立马结束当前循环。
当前循环指的是break语句所在的循环体。
２３ continue语句
Continue语句指的是跳出本次循环，该语句后面的代码不再执行,整个循环体继续循环。
２４ 数组
２４.1 定义
２４.2 赋值
☞数组中通过下标的方式进 行赋值。下标从0开始。
２４.3 数组的初始化和遍历
２４.4 数组数据的个数 length属性
通过数组名.length获取数组长度（元素个数）
２４.5 数组合并
使用concat方法合并数组。
２４.6 Join 方法 返回一个字符串
Join方法返回一个字符串数组。
２５ 函数
☞函数（方法）定义
通过 function 关键字
和自定义方法名既可定义一个函数。 如下：
方法的调用。
函数案例介绍：
热门工具 换一换