一、简单了解Javascript
1.为什么学习 JavaScript?
JavaScript 是 web 开发人员必须学习的 3 门语言中的一门:
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为
2.Javascript概述
Javascript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为Javascript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能
3Javascript特点
JavaScript主要用于HTML的页面,嵌入在HTML的源码中。
*跨平台性*。JavaScript是因特网上最流行的脚本语言,它存在于全世界所有的Web浏览器中,能够增强用户与Web站点和Web应用程序之间的交互。
*JS是弱类型语言*,没有类型声明,它的变量不必具有一个明确的类型。
*JS是脚本语言*。换句话说,能够用来编程的并且直接执行源代码的语言,就是脚本语言。
JS也是*解释性语言*,代码不用直接,直接解析运行。
JS是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言,可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
4. javascript的历史
JavaScript 最初被称为 LiveScript,由 Netscape(Netscape Communications Corporation,网景通信公司)公司的布兰登·艾奇(Brendan Eich)在 1995 年开发(这哥们在两周之内设计出了JavaScript语言。你没看错,这哥们只用了10天时间。)。在 Netscape 与 Sun(一家互联网公司,全称为“Sun Microsystems”,现已被甲骨文公司收购)合作之后将其更名为了 JavaScript。
之所以将 LiveScript 更名为 JavaScript,是因为 JavaScript 是受 Java 的启发而设计的,因此在语法上它们有很多相似之处 ,JavaScript 中的许多命名规范也都借鉴自 Java,还有一个原因就是为了营销,蹭 Java 的热度。
同一时期,*微软*和 *Nombas*(一家名为 Nombas 的公司)也分别开发了 *JScript* 和 *ScriptEase* 两种脚本语言,与 *JavaScript* 形成了三足鼎立之势。它们之间没有统一的标准,不能互用。为了解决这一问题,1997 年,在 ECMA(欧洲计算机制造商协会)的协调下,Netscape、Sun、微软、Borland(一家软件公司)组成了工作组,并以 JavaScript 为基础制定了 *ECMA-262* 标准(ECMAScript)。第二年,ISO/IEC(国际标准化组织及国际电工委员会)也采用了 ECMAScript 作为标准(即 ISO/IEC-16262)。
5.主要组成部分
Javascript由ECMAScript、BOM、DOM三部分组成:
**组成部分**** | **作用**** |
ECMAScript | 构成了JS的核心语法 |
BOM | Browser Object Model【浏览器对象模型】,用来操作浏览器上的对象 |
DOM | Document Object Model【文档对象模型】,用来操作网页中的元素 |
*ECMAScript*: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
*BOM* (Browser Object Model): 浏览器对象模型
有一套成熟的可以操作浏览器的 API,通过 BOM 可以操作浏览器。
比如: 弹出框、浏览器跳转、获取分辨率等
*DOM* (Document Object Model): 文档对象模型
有一套成熟的可以操作页面元素的 API,通过 DOM 可以操作页面中的元素。
比如: 增加个 div,减少个 div,给div 换个位置等
**总结****: **JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果****
6.主要用途
在网页中插入新的 HTML,修改现有的网页内容和网页的样式。
响应用户的行为,响应鼠标的点击或移动、键盘的敲击。
获取或修改 cookie,向访问者提出问题、发送消息。
记住客户端的数据(本地存储)。
7.Javascript和Java的关系
它们的相同之处包括:
它们的语法和 C 语言都很相似;
它们都是面向对象的(虽然实现的方式略有不同);
JavaScript 在设计时参照了 Java 的命名规则;
它们的不同之处包括:
JavaScript 是动态类型语言,而 Java 是静态类型语言;
JavaScript 是弱类型的,Java 属于强类型;
JavaScript 的面向对象是基于原型的(prototype-based)实现的,Java 是基于类(class-based)的;
综上,Javascript和Java的关系就像老婆和老婆饼、雷锋和雷峰塔、印度和印度尼西亚一样,没有半毛钱关系。
二、javascript基本使用
2.1 JS 嵌入方式
在 HTML 中使用 JS 可以用以下几种方式实现:
行内式
内嵌式
外部引用 js 文件
行内式,可以在 html 元素中直接用使用 js 语句,但是一般都是调用函数或简短的语句。
<input type="button" value="Click Me!" onclick="alert('Hellow World')">
内嵌式,一般用于实现比较小的功能,代码不长的情况
<script>
alert('Hello World');
</script>
外部JS文件,最常见的方式
<script src="my.js"></script>
2.2 JS 注释
// 单行注释
/* 多行注释 */
2.3 JS 输入输出语句
alter/prompt/confirm来源于window对象
alert(msg) // 浏览器弹出框
console.log(msg) // 浏览器控制台打印输出信息
prompt(info) // 浏览器弹出输入框,用户可以输入
confirm()
2.4 JS事件
标签的事件属性
<buttononclick = "alert('123')">点我</button>
<buttononclick = "a();">点我</button>
a()====>函数
function a(){
}
onclick // 鼠标点击左键
ondbclick // 鼠标双击
oncontextmenu // 鼠标点击右键
mousedown // 鼠标按键被按下
mouseup // 松开鼠标按键
onselect // 文本被选中
oncopy // 元素内容被复制
onmouseenter // 鼠标移动到事件监听的元素内(不区分子元素)
onmouseover // 鼠标移动到有事件监听的元素或它的子元素内
onmouseleave // 鼠标离开元素外(不区分子元素)
onmouseout // 鼠标离开元素,或它的子元素外
onfocus // 获得鼠标焦点(点击input输入框)
onblur // 失去鼠标焦点(进入其他input输入框)
onmousemove // 鼠标移动
onmouseup // 鼠标弹起
onmousedown // 鼠标按下
2.5 查找 HTML DOM 元素
HTML DOM 能够通过 JavaScript 进行访问(也可以通过其他编程语言)。在 DOM 中,所有 HTML 元素都被定义为对象。我们可以通过 Javascript 对这些对象操作,改变 HTML 元素的内容。
getElementById()
因为 id 元素是唯一的,就是为了在 js 中通过元素 id 来查找元素,document 是页面文档对象,getElementById 是 document 的方法,通过传递的参数(id字符串),是一个标签的id值。可以返回的该元素对象
<div id="new">This is new Element</div>
<script>
// 页面文档从上往下加载,需要将 script 代码写在下边
var dom = document.getElementById('new');
// 显示id为new的对象中内容
console.log(dom);
// 可以打印我们返回的元素对象,更好的查看里边的属性和方法
console.dir(dom);
</script>
三、ECMAScript
ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。
语法
类型
语句
关键字
保留字
运算符
对象
3.1 变量
3.1.1 定义
变量是程序在内存中申请的一块用来存放数据的空间。通过变量名称我们可以使用或修改保存在系统中的对应的数据。
3.1.2 声明变量
Js 是一种弱类型或者说动态语言,不用提前声明变量的类型,变量的类型会自动判断。即使赋值之后,变量的类型根据重新赋值的数据类型同样进行改变。
var age; // 声明一个名称为age的变量
age = 12; // 给age这个变量赋值为12
通常声明与赋值一起使用:
var age = 12;
3.1.3 初始化变量
var age = 12
var name = 'Tom'
name = 'OO' // 再次给相同变量赋值则不用 var 进行初始化
var a = 10, b = 20, c = 30; // 可以同时声明多个变量
3.1.4 输入存储变量
var name = prompt('请输入你的名字')
alert(name)
3.1.5 变量的命名规范
由字母、数字、下划线、$符号组成,不能以数字开头
不能是关键字和保留字,例如:for,while,this,name
区分大小写
变量名必须有意义
小驼峰命名法,如:myName
建议不要用$作为变量名
3.1.6 查看变量
alert(变量名) // 弹出框显示
console.log(变量名) // 控制台显示
document.write(变量名) // HTML 页面上显示
3.2 数据类型
3.2.1 数字型[number]
3 // 十进制
010 // 八进制
0xa // 十六进制
3.14 // 小数
NaN // 非数字 Not a Number
数字型范围:
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 5e-324
3.2.2 字符串型[string]
var str1 = '这是个字符串';
字符串转义符:
\n // 换行
\r // 回车
\\
\'
\"
\t
\b // 空格
\xnn // 16进制字符,如 \x41 代表 'A'
\unnn // 16进制 unicode 字符, 如 \u03a3 代表∑
字符串长度:
用 变量.length 可以得到字符串长度,如:
var str1 = 'hello world'
console.log(str1);
// 输出结果:11
字符串拼接:
var str = str1 + str2;
var str = '字符串' + 123; // 输出字符串123,字符串拼接其他类型会自动转换为字符串
var str = 'My age is' + age + 'years old'; // 字符串+变量拼接
只要与字符串做加法运算都会被转换成字符串
字符串中的双引号和单引号:
var str = "他是'程序猿'";
3.2.3 布尔型
布尔型 Boolean 只有两个值,一个是 true, 一个是 false
console.log(1 + true); // 在运算中,true代表1
console.log(1+ false); // false 代表0
console.log('t' + true); // 在字符串拼接,会直接以字符串形式拼接 ttrue
3.2.4 null 空值
console.log(null+ 'pp'); // 会拼接字符串 nullpp
console.log(null + true); // 会输出 1
null表示"没有对象",即该处不应该有值。
作为函数的参数,表示该函数的参数不是对象。
作为对象原型链的终点。
3.2.5 undefined 未定义
一个声明后没有被赋值的变量会有一个默认值 undefined
console.log(undefined + 'pp'); // 会拼接字符串 undefinedpp
console.log(undefined + true); // 会输出 NaN
console.log(undefined + 1); // 会输出 NaN
变量被声明了,但没有赋值时,就等于undefined。
调用函数时,应该提供的参数没有提供,该参数等于undefined。
对象没有赋值的属性,该属性的值为undefined。
函数没有返回值时,默认返回undefined。
undefined 和 null 的区别
只设置了null作为表示"无"的值。根据C语言的传统,null被设计成可以自动转为0。JavaScript的最初版本是这样区分的:null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。
undefined和null在if语句中,都会被自动转为false
3.2.6 其他类型
数组
对象
3.2.7 数据类型转换
3.2.7.1 typeof() 查看数据类型
var num = 1;
console.log(typeof num);
console.log(typeof(num)); // 也可以使用参数的形式查看
null 返回的是 object
3.2.7.2 转换为字符串
var num = 1;
alert(num.toString()); // 无法用 .toString() 方法转换 undefined 和 null
alert(String(num)); // 可以转换 undefined 和 null
alert(num + '');
3.2.7.3 转换为数字型
// 转换为整型
parseInt(num);
parseInt('3.14'); // 取整为3
parseInt('90px'); // 去掉单位(只取int遇到字符串自动中断)
parseInt('rem120px') // 字符串转换后变为 NaN
parseInt(undefined) // undefined 转换后变为 NaN
parseInt(null) // 转换后为0
parseInt(true) // 布尔型转换后变为 1 或 0
// 转换为浮点型
parseFloat(num);
parseFloat(3); // 还是输出3,不会自带小数点,3.0也是一样
// 强制转换
Number(num);
// 隐式转换,可以用 - * / (加号正能用作正负值将字符串转为数字型,如果用在变量后边则变为拼接字符串)
console.log(+'100')
console.log('123' - 120);
console.log('t' - 120); // 输出 NaN
3.2.7.4 转换为布尔型
代表空、否定的值都会被转换为 false,如:0,'',NaN,null,undefined其余值都会被转换为 true
Boolen('abc'); // 返回 True
Boolean(0); // 返回 False
3.3 运算符
表达式:任何能代表值的式子
var a = 10, b=20;
var c = a + b; // a + b 就是表达式
3.3.1 算数运算符
+ - * / %
浮点数运算精度问题,尽量避免用浮点数直接进行运算
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.07 * 100); // 7.000000000000001
var num = 0.1 + 0.2;
console.log(num == 0.3); // false
3.3.2 递增递减运算符
++i; // 前置递增(先自加后返回)
--i; // 前置递减
var i = 1;
console.log(++i + 10); // 11 (先自加,然后参与运算)
i++; // 后置递增(先返回值,后自增)
i--; // 后置递减
var i = 1;
console.log(i++ + 10); // 20 (先运算,后自加)
console.log(i); // 2
前置后置递增进阶:
var e = 10;
var f = e++ + ++e;
consolo.log(f); // 22(e++ 返回 10,然后e自增为11,++e 返回12)
3.3.3 比较运算符
比较运算符,是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true / false)作为运算结果。
// 普通比较运算符
<
>
>=
<=
== // 不会比较数据类型 (18 == '18' 为真)
=== // 会比较数据类型
!=
!== // 全不等(包括数据类型)
比较运算符两侧表达式先转为布尔型再进行比较
'0' 用 Boolen() 做判断的时候是 true,但是用 == 比较运算符和布尔值比较的时候 '0' 是 false,但 '0' == 0 是真
undefined 和 null 在 Boolen() 做判断的时候是 flase,但是用 == 比较的时候他们不等于 false
NaN 和任何值都不相等,包括它本身,即 NaN == NaN 为假
3.3.4 逻辑运算符
逻辑运算符 | 说明 |
&& | 逻辑与 |
|| | 逻辑或 |
! | 逻辑非 |
如果只是普通逻辑运算(两侧都是布尔型),返回的还是布尔型
与 undefined, null 做 && 运算返回 undefined, null
!1 返回 false
3.3.5 逻辑运算短路
逻辑与运算短路
// 当表达式1和2为真时,返回表达式2
console.log(123 && 456); // 返回456
// 当表达式1为假时,直接返回表达式1
console.log(0 && 456); // 返回0
逻辑或运算短路
// 当表达式1为真,则返回表达式1
// 当表达式1为假,则返回表达式2
var num = 1;
console.log(123 || num++);
console.log(num); // 1
3.3.6 赋值运算符
num += 2; // 相当于 num = num + 2
num -= 1;
num *= 1;
num /= 1;
3.3.7 运算符优先级
运算符 | 结合性 | 优先级 |
.、[ ]、( ) | 从左到右 | 最高 |
++、--、-、!、new、typeof | 从右到左 | |
*、/、% | 从左到右 | |
+、- | 从左到右 | |
<、<=、>、>=、in、instanceof | 从左到右 | |
==、!=、===、!== | 从左到右 | |
&& | 从左到右 | |
II | 从左到右 | |
?: | 从右到左 | |
=、*=、/=、%=、+=、-=、&=、^=、!= | 从右到左 | |
, | 从左到右 | 最低 |
任何写这种式子的人都是神经病:
var s = 4 >= 6 || 'a' != 'b' && !(12 * 2 == 144) && true
console.log(s) // true
赋值运算符优先级最低,先不用看它
然后是逻辑运算符 || 和 &&,从左到右开始
4 >= 6 为 false,所以看右侧返回值
右侧的三个 && 返回的都是 true,最后表达式返回 true
如果最右侧表达式是数值的话,则返回数值
3.4 流程控制
3.4.1 顺序结构
A -> B -> C
3.4.2 选择结构
3.4.2.1 if 分支结构
单分支结构
if (条件表达式) {
// 执行语句
}
// 其他代码
当条件表达式为真时,程序进入分支,执行完毕后,继续执行其他代码
当条件表达式为假时,程序直接跳过条件分支,执行其他代码
双向分支
if (条件表达式) {
// 执行语句
} else {
// 执行语句
}
// 其他代码
当条件表达式为真时,程序进入分支,执行完毕后,继续执行其他代码
当条件表达式为假时,程序执行 else 代码块中的代码,执行完毕后再执行其他代码
多分支结构
if (条件表达式1) {
// 执行语句1
} else if (条件表达式2) {
// 执行语句2
} else {
// 执行语句3
}
// 其他代码
如果满足条件表达式1,则执行执行语句1,直接跳出
如果不满足,则判断条件表达式2,为真则执行语句2,不为真则去执行 else
多分支语句只是多选一,最后只有一个语句执行
例:判断分数
var score = promot('请输入分数:')
if (score >= 90) {
alert('优')
} else if (score >= 80) {
alert('良')
} else if (score >= 60) {
alert('中')
} else {
alert('差')
}
3.4.2.2 三元运算符
如果条件表达式结果为真,则返回表达式1,的值,否则返回表达式2的值
条件表达式 ? 表达式1 : 表达式2
//输入一个 0~59 数字,如果小于10,则在数字前边补0
var time = prompt('请输入一个0~59的数字');
console.log(time<10 ? '0' + time : time);
3.4.2.3 Switch
switch(表达式){
case value1:
// 执行语句1
break;
case value2:
// 执行语句2
break;
default:
// 如果无条件满足,最终执行语句
}
开发中表达式通常写为变量,变量值需要和 case 的 value 值全匹配,值和数据必须完全一致
Switch 与 IF 区别
switch...case 语句通常处理 case 为比较确定值的情况,if...else语句通常用于范围判断(大于、小于)
switch 语句进行条件判断直接跳转到case,效率更高,if 语句是顺序判断,效率低
3.5 循环结构
3.5.1 for 循环
for(初始化变量; 条件表达式; 操作表达式){
// 循环体
}
// 初始化变量: 用 var 声明的一个普通变量,通常用于计数器使用
// 条件表达式: 用来判断每一次循环是否继续执行,是终止的条件
// 操作表达式: 是每次循环最后执行的代码,经常用于计数器变量的更新(递增或递减)
例:输出一百句你好
for(var i = 1; i<=100; i++){
console.log('你好');
}
例:从0加到100
var sum =0;
for(var i = 1; i<=100; i++){
sum+=i;
}
3.5.2 嵌套循环
for (外层循环初始化变量; 外层循环表条件达式; 外层操作表达式){
for(内层循环初始化变量; 内层循环表条件达式; 内层操作表达式){
// 循环代码
}
}
外层循环一次,内层循环执行全部
例:输出 5x5 的 *
var str = "";
for (var i = 1; i <= 5; i++) {
for (var j = 1; j <= 5; j++) {
str = str + "*";
}
str = str + "\n";
}
console.log(str);
3.5.3 while 循环
while(条件表达式){
// 循环体
}
例:用 while 实现从1加到100
var num=1;
while(num<=100){
console.log(num);
num++;
}
while 循环一般需要配一个计数器,然后再循环体内设置一个终止循环,否则会陷入死循环
3.5.4 do while 循环
do {
// 循环体
} while(条件表达式)
和 while 循环比,do while 循环至少需要执行一次,然后进行判断是否终止循环。
3.5.5 continue 和 break
break 关键字用于直接跳出循环
continue 关键字用于立即跳出本次循环,进入下一次循环
3.6 数组
数组可以把一组相关的数据一起存放,并提供方便的访问方式。
3.6.1 创建数组
// 利用对象创建数组
var arr = new Array();
// 利用 [] 快捷创建数组
var arr = [];
var arr = [1, 2, 3, 'Pink', True];
3.6.2 访问数组元素
数组可以通过索引来访问、设置、修改对应的数组元素,可以通过 “数组名[索引]“ 的方式来获取数组中的元素。
var arr1 = ['张三', '李四', '王五', '淑芬'];
// 索引号: 0 1 2 3
console.log(arr1); // 输出整个数组所有元素
console.log(arr1[0]); // 使用 数组名[索引号] 获取数组数组内指定元素的值
3.6.3 遍历数组
arr= ['a', 'b', 'c', 'd'];
for (var i = 0; i <= 3; i++) {
console.log(arr[i]);
}
3.6.4 数组长度属性 length
arr= ['a', 'b', 'c', 'd'];
console.log(arr.length); // 输出4
利用 length 添加新的数组元素
arr = ["a", "b", "c", "d"];
arr[arr.length] = 'e';
console.log(arr[arr.length - 1]);
// 输出结果
e
3.6.5冒泡排序
var arr = [5, 4, 3, 2, 1];
for (var i = 0; i < arr.length - 1; i++) { // 外层循环
for (var j = 0; j <= arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
3.7 函数
3.7.1 声明函数
// 声明函数
function 函数名(){
// 函数内部代码,又称为函数体
}
// 调用函数
函数名();
例:将1~100 累加封装成函数
function sum(){
var sum = 0;
for(var i=1; i<=100; i++){
sum = sum+i;
}
console.log(sum);
}
sum();
3.8 作用域
全局变量:
变量在<script>标签之内,或者是一个单独js文件
如果在函数内部没有声明的变量也属于全局变量(即在函数内部可以使用外部的变量)
浏览器关闭才会销毁
局部变量:
变量声明在函数内部
函数的形参也可以看做是局部变量
函数执行完毕就会销毁
链式作用域:
函数内部可以调用父集中的变量
varnum=10;
functionfn(){
varnum=20;
functionfun(){
console.log(num); // 链式作用域,找父集中的变量,如果没有再找上级
}
}