1. JavaScript简介
1. 什么是JavaScript?
JavaScript 是⼀种客户端脚本语⾔(脚本语⾔是⼀种轻量级的编程语⾔)。 JavaScript 通常被直接嵌⼊ HTML ⻚⾯,由浏览器解释执⾏ JavaScript 是⼀种解释性语⾔(就是说,代码执⾏不进⾏预编译)。 特点:弱类型和基于对象。(因为⾯向对象需要具有封装、继承、多态的特征) JavaScript语⾔中包含三个核⼼:ECMAScript基本语法、DOM(Document object model)文档对象模型、BOM(Browser object model)浏览器对象模型
2. 前端Web技术的组成:HTML、CSS、JavaScript
HTML是⼀种标记语⾔,⽤来结构化我们的⽹⻚内容并赋予内容含义,例如定义段落、标题和数据表,或在⻚⾯中嵌⼊图⽚和视频。 CSS 是⼀种样式规则语⾔,可将样式应⽤于 HTML 内容, 例如设置背景颜⾊和字体,在多个列中布局内容。 JavaScript 是⼀种脚本语⾔,可以⽤来创建动态更新的内容,控制多媒体,制作图像动画,还有很多。(虽然它不是万能的,但可以通过简短的代码来实现神奇的功能。)
2. JavaScript使⽤⽅法
可以像添加CSS那样将 JavaScript 添加到 HTML ⻚⾯中。CSS 使⽤ <link> 元素链接外部样式表,使⽤ <style> 元素向 HTML 嵌⼊内部样式表,JavaScript 这⾥只需⼀个元素 <script> 。
在HTML中如何使⽤JavaScript(三种)
1. 内部JavaScript: 使⽤<script>...</script>标签
<script type="text/javascript">
<!--
javaScript语⾔
//-->
</script>
2. 外部 JavaScript:
使⽤外部导⼊js会使代码更加有序,更易于复⽤,且没有了脚本的混合,HTML也会更加易读。
<script type="text/javascript" src="my.js"></script>
3. 内联JavaScript处理器:
就是将js代码写⼊html代码中,如在html标签的事件中或超级链接⾥。
<button onclick="javaScript语⾔"></button>
<a href="javascript:alert('aa');alert('bb')">点击</a>
3. JavaScript基础语法
3.1 JavaScript的输出:
- JavaScript 没有任何直接打印或者输出的函数。
- 若有显示数据可以通过下⾯不同的⽅式来输出:
- window.alert() 弹出警告框
- document.write() ⽅法将内容写到 HTML ⽂档中
- innerHTML 写⼊到 HTML 元素
- console.log() 写⼊到浏览器的控制台
参考示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript实例</title>
</head>
<body>
<h3>测试JavaScript的输出</h3>
<div id="did">div层</div>
</body>
<script>
//弹出⼀个信息提示框
window.alert("Hello JavaScript!");
//输出到浏览器⻚⾯中
document.write("这个是⻚⾯中的输出");
//通过写⼊HTML标签中,完成⻚⾯中的输出
document.getElementById('did').innerHTML="div层中的输出";
//控制台上的输出 console.log("控制台上的输出");
</script>
</html>
3.2 变量
- 什么是变量?
变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据
- 为什么要使⽤变量?
使⽤变量可以⽅便的获取或者修改内存中的数据
- 如何使⽤变量-使⽤var声明变量
var name;
- 变量的赋值
var name;
name = "zhangsan";
- 同时声明多个变量
var name,age,sex;
name = 'lisi';
age = 20;
sex = "man"
- 同时声明多个变量并赋值
var name = 'wangwu', age = 25;
3.3 变量的命名规则和规范
- 规则 - 必须遵守的,不遵守会报错
- 由字⺟、数字、下划线、$符号组成,不能以数字开头
- 不能是关键字和保留字,例如:for、 if、while。
- 区分⼤⼩写
- 规范 - 建议遵守的,不遵守不会报错
- 变量名必须有意义
- 遵守驼峰命名法。⾸字⺟⼩写,后⾯单词的⾸字⺟需要⼤写。例如:userName、 userPassword
4. JavaScript数据类型
JavaScript中数据类型:
- 值类型(基本类型):
字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、 Symbol。
注意:Symbol 是 ES6 引⼊了⼀种新的原始数据类型,表示独⼀⽆⼆的值。
- 引⽤数据类型: 对象(Object)、数组(Array)、函数(Function)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//数值类型
console.log(typeof a); //undefined 没有定义的变量
var a = 10; //整数
console.log(typeof a); //number
a = 3.14; //浮点数
console.log(typeof a); //number
//布尔类型:boolean: 值:true false
a = true;
console.log(typeof a); //boolean
//字符串:使用单引号或双引号都可以定义子符串
a = "Hello ...";
console.log(typeof a); //string
a = null;
console.log(typeof a); //object
//引用类型
var b = [10,20,30]; //数组的定义
console.log(typeof b); //数组对象object
console.log(b instanceof Array); //true 检查对象b是否是来源于Array
console.log(a instanceof Array); //false 检查对象a是否是来源于Array
var ob = new Object();
console.log(typeof ob); //object
var fn = function(){} //声明一个空函数
console.log(typeof fn); //function
console.log("======================================");
console.log(1.23e5); //1.23*10的5次方
console.log("整数进制的使用");
console.log(10); //10 十进制
console.log(0b10); //2 二进制
console.log(0o10); //8 八进制
console.log(0x10); //16 十六进制(0 1 2 3 4 5 6 7 8 9 a b c d e f)
console.log("===============十进制转成其他进制==============");
var num = 220;
console.log(num.toString(2)); //11011100 二进制
console.log(num.toString(8)); //334 八进制
console.log(num.toString(16)); //DC 十六进制
console.log("===============其他进制转成十进制==============");
console.log(parseInt('11011100',2)); //二进制转十进制
console.log(parseInt('334',8)); //八进制转十进制
console.log(parseInt('DC',16)); //十六进制转十进制
/*
面试案例:
假设有15瓶水,其中有一个水有毒,
请问至少使用几只小白鼠可以一次性试喝出来。
*/
</script>
</head>
<body>
<h1>JavaScript语言的数据类型</h1>
</body>
</html>
typeof 操作符获取⼀个变量的类型,返回结果如下:
- undefined - 如果变量是 Undefined 类型的
- boolean - 如果变量是 Boolean 类型的
- number - 如果变量是 Number 类型的 (整数、浮点数)
- string - 如果变量是 String 类型的 (采⽤""、 '')
- object - 如果变量是⼀种引⽤类型或 Null 类型的 如: new Array()/ new String()...
- function -- 函数类型
undefined 和 null 的区别:
null 和 undefined 的值相等,但类型不等:
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
object引⽤类型 引⽤类型通常叫做类(class),也就是说,遇到引⽤值,所处理的就是对象。 Object 对象⾃身⽤处不⼤,不过在了解其他类之前,还是应该了解它。 因为 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似, ECMAScript 中的所有对象都由这个对象继承⽽ 来,Object 对象中的所有属性和⽅法都会出现在其他对象中,所以理解了 Object 对象,就可以 更好地理解其他对象。
值类型理解:变量之间的互相赋值,是指开辟⼀块新的内存空间,将变量值赋给新变量保存到新开 辟的内存⾥⾯;之后两个变量的值变动互不影响,例如:
var a = 10; //开辟⼀块内存空间保存变量a的值“10”;
var b = a; //给变量 b 开辟⼀块新的内存空间,将 a 的值 “10” 赋值⼀份保存到新的内存⾥;
//a 和 b 的值以后⽆论如何变化,都不会影响到对⽅的值;
引⽤类型理解:变量之间的互相赋值,只是指针的交换,⽽并⾮将对象(普通对象,函数对象,数 组对象)复制⼀份给新的变量,对象依然还是只有⼀个,只是多了⼀个指引。
//需要开辟内存空间保存对象,变量 a 的值是⼀个地址,这个地址指向保存对象的空间;
var a = { x: 1, y: 2 };
var b = a; // 将a 的指引地址赋值给 b,⽽并⾮复制⼀给对象且新开⼀块内存空间来保存;
// 这个时候通过 a 来修改对象的属性,则通过 b 来查看属性时对象属性已经发⽣改变;
类型转换:
- JavaScript 变量可以转换为新变量或其他数据类型:
- 通过使⽤ JavaScript 函数
- 通过 JavaScript ⾃身⾃动转换
ECMAScript 中可⽤的 3 种强制类型转换如下:
Boolean(value) - 把给定的值转换成 Boolean 型;
Number(value) - 把给定的值转换成数字(可以是整数或浮点数);
String(value) - 把给定的值转换成字符串;
使⽤:Number()、parseInt() 和parseFloat() 做类型转换
Number()强转⼀个数值(包含整数和浮点数)。
*parseInt()强转整数,
*parseFloat()强转浮点数
函数isNaN()检测参数是否不是⼀个数字。 is not a number
- 常⻅类型转换:
5. JavaScript运算符
1. 按照操作元数的个数不同分为:⼀元运算符、⼆元运算符和三元运算符:
- 如下⼀元运算符
delete:⽤于删除对象中属性的 如: delete o.name; // 删除o对象中的name属性
++ -- : ⼀元加法和⼀元减法
2. 按照种类划分⼜分为如下运算符:
① 算数运算符:
- 算数运算符⽤于对数字执⾏算数运算:
- 注意: 其中+号具有两重意思:字串连接和数值求和
- 就是加号”+“两侧都是数值则求和,否则做字串连接
② 赋值运算符
- 赋值运算符向 JavaScript 变量赋值
③ ⽐较运算符
④ 逻辑运算符
⑤ 位运算符
- 位运算符处理 32 位数。
- 该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。
- 上例使用4位无符号的例子。但是JavaScript使用32位有符号数。
- 因此,在JavaScript中,~5不会返回10,而是返回-6。
- ~000000000000000000000101将返回1111111111111111111111111010
- ⽆符号位移(>>>)和有符号位移(>>)的区别是:有符号位移运算时如果数字为正数时位移后在前⾯补0,为负数时则在位移后在前⾯补1
⑥ 条件运算符(三元运算符):
JavaScript 也包含了可基于某些条件向变量赋值的条件运算符。
语法
variablename = (condition) ? value1:value2
实例
var voteable = (age < 18) ? "太年轻":"⾜够成熟";
⑦ 逗号运算符
⽤逗号运算符可以在⼀条语句中执⾏多个运算。
var iNum1=1, iNum2=2, iNum3=3;
⑧ 类型运算符
- instanceof 运算符与 typeof 运算符相似,⽤于识别正在处理的对象的类型。
- 与 typeof ⽅法不同的是,instanceof ⽅法要求开发者明确地确认对象为某特定类型。
//typeof instanceof
var oStringObject = new String("hello world");
console.log(oStringObject instanceof String); // 输出 "true"
// 判断 foo 是否是 Foo 类的实例
function Foo(){}
var foo = new Foo();
console.log(foo instanceof Foo)//true
// 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例
function Aoo(){}
function Foo(){}
Foo.prototype = new Aoo();//JavaScript 原型继承
var foo = new Foo();
console.log(foo instanceof Foo)//true
console.log(foo instanceof Aoo)//true
3. 运算符的优先级
优先级从⾼到底
1. () 优先级最⾼
2. ⼀元运算符 ++ -- !
3. 算数运算符 先 * / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先 && 后||
7. 赋值运算符 = += -= *= /= %=
6. JavaScript流程控制
- 任何编程语⾔都是由⼀系列语句构成的。
- ⼀条语句可以是⼀个赋值语句,⼀个函数调⽤,⼀个循环,甚⾄⼀个什么也不做的(空语句)条件语句。
- 在任何⼀⻔程序设计语⾔中,都需要⽀持满⾜程序结构化所需要的三种基本结构:
- 顺序结构
- 分⽀结构(选择结构)
- 循环结构
- 顺序结构:在程序结构中,最基本的就是顺序结构。程序会按照⾃上⽽下的顺序执⾏。由于结构简 单所以这⾥我就不多介绍
1. 分⽀结构(条件语句):
在JavaScript中,我们可使⽤以下分⽀语句:
- if 语句 - 只有当指定条件为 true 时,使⽤该语句来执⾏代码
- if...else 语句 - 当条件为 true 时执⾏代码,当条件为 false 时执⾏其他代码
- if...else if....else 语句 - 使⽤该语句来选择多个代码块之⼀来执⾏
- switch...case语句 - 使⽤该语句来选择多个代码块之⼀来执⾏
if .. else 分⽀判断示例:
var grade = 58; //定义一个成绩的变量
/*
//单分支结构
if(grade>=60){
console.log("考试通过了");
}
*/
/*
//双分支结构
if(grade >= 60){
console.log("成绩及格!");
}else{
console.log("成绩不及格!");
}
*/
//多分支判断
if(grade >= 90){
console.log("成绩优秀!");
}else if(grade >=75 ){
console.log("成绩良好!");
}else if(grade >= 60){
console.log("成绩及格!");
}else{
console.log("成绩不及格!");
}
switch 分⽀判断示例:
//使用js的内置对象获取当前星期几的信息
var w = new Date().getDay();
console.log(w);
switch(w){
case 0: x = "星期日"; break;
case 1: x = "星期一"; break;
case 2: x = "星期二"; break;
case 3: x = "星期三"; break;
case 4: x = "星期四"; break;
case 5: x = "星期五"; break;
case 6: x = "星期六"; break;
default: x = "无效的星期信息";
}
console.log(x);
2. 循环结构:
- JavaScript ⽀持不同类型的循环:
- for - 循环代码块⼀定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为true时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
2.1 for 循环:
for(语句1; 语句2; 语句3){ 被执⾏的代码块 }
语句1: 在循环(代码块)开始前执⾏,常⽤于初始化循环条件
语句2: 定义运⾏循环(代码块)的条件,⽤于判断何时结束循环
语句3: 在循环(代码块)已被执⾏之后执⾏,常⽤于递增或递减来影响语句2的判断,直⾄结束循环
示例代码:
//for循环的使用
//循环输出1-10的值
for(var i=1;i<=10;i++){
//console.log(i)
document.write(i+" ");
}
document.write("<br/>");
//循环输出10~1的值
for(var i=10;i>=1;i--){
document.write(i+" ");
}
document.write("<br/>");
//循环输出1~10的偶数值
for(var i=1; i <= 10; i++){
if(i%2==0){
document.write(i+" ");
}
}
document.write("<br/>");
//循环1~100的值,并计算他们的累加值
var sum = 0
for(var i=1;i<=100;i++){
//document.write(i+" ");
sum += i; //将每次循环的值累加到变量sum中
}
document.write("100的累加值:"+sum)
document.write("<br/>");
2.2 for...in 循环遍历对象:
for(属性变量 in 被遍历对象){ 被执⾏的代码块 }
参考示例:
//for...in的使用
var ob = {"name":"张三","age":22,"sex":"男"};
for(key in ob){
document.write(key+":"+ob[key]+"<br/>");
}
var a = [10,20,30,40,50];
//遍历(迭代)数组a中的每个值的下标
for(k in a){
document.write(k+":"+a[k]+"<br/>");
}
2.3 while 循环
- While 循环会在指定条件为真时循环执⾏代码块。
while (条件){ 需要执⾏的代码 }
- 注意:如果您忘记增加条件中所⽤变量的值,该循环永远不会结束。该可能导致浏览器崩溃。
参考代码:
//循环输出1-10的值
var i = 1;
while(i<=10){
document.write(i+" ");
i++;
}
document.write("<br/>");
//循环输出10-1的值
var i = 10;
while(i>=1){
document.write(i+" ");
i--;
}
document.write("<br/>");
//计算1~100的累加
var i = 1;
var sum = 0; //存储累加值的结果
while(i<=100){
sum += i; //累加每次循环的i
i++;
}
document.write("100的累加值:"+sum);
2.4 do/while 循环
- do/while 循环是while循环的变体
- 该循环会执⾏⼀次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。
- 该循环⾄少会执⾏⼀次,即使条件是 false,隐藏代码块会在条件被测试前执⾏。
do{ 需要执⾏的代码;
}while(条件);
参考示例:
//do...while循环的使用
//循环输出1~10的值
var i = 1;
do{
document.write(i+" ");
i++;
}while(i<=10);
document.write("<br/>");
//循环输出10~1的值
var i = 10;
do{
document.write(i+" ");
i--;
}while(i>=1);
document.write("<br/>");
//计算1~100的累加值
var i = 1;
var sum = 0;
do{
sum += i
i++;
}while(i<=100);
document.write("100的累加值:"+sum)
document.write("<br/>");
2.5. 循环中的 break 和 continue 语句
- break 语句⽤于跳出循环。
- continue ⽤于跳过循环中的⼀个迭代。
- break语句
- 我们已经在本教程稍早的章节中⻅到过 break 语句。它⽤于跳出 switch() 语句。
- break 语句可⽤于跳出循环。
- break 语句跳出循环后,会继续执⾏该循环之后的代码(如果有的话):
- continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下⼀个迭代。
示例:
//循环输出1~10的值
for(var i=1; i<=10; i++){
if(i == 5){
break; //退出当前循环
}
document.write(i+" ")
}
document.write("<hr/>");
//循环输出1~10的值
for(var i=1; i<=10; i++){
if(i == 5){
continue; //跳过本次循环继续下一次
}
document.write(i+" ")
}
document.write("<hr/>");
7. JavaScript函数
1. JavaScript的函数
- 函数是什么-函数(function)是⼀段完成指定任务的已命名代码块。函数可以遵照给它的⼀组值或参数完成特定的任务,并且可能返回⼀个值。
- 在JavaScript中有两种函数:⾃定义函数与系统函数。
- 函数的优越性:
- 控制程序设计的复杂性
- 提⾼软件的可靠性
- 提⾼软件的开发效率
- 提⾼软件的可维护性
- 提⾼程序的重⽤性
- 标准格式:
function 函数名([参数列表..]){ 函数体。。。 [return 返回值;] }
- JavaScript三种定义函数⽅法:
- 第⼀种是使⽤function语句定义函数 如上⾯格式
- 第⼆种是使⽤Function()构造函数来定义函数(不常⽤)
- var 函数名 = new Function(“参数1”,”参数2”,”参数3”……”函数体”);
- 如: var 函数名 = new Function(”x”,”y”,”var z=x+y;return z;”);
- 第三种是在表达式中定义函数
- var 函数名 = function(参数1,参数2,…){函数体};
例如:
//定义 var add = function(a,b){
return a+b;
}
//调⽤函数
document.write(add(50,20));
函数的使⽤:
//通过函数名直接调⽤函数
//函数名(参数1,参数2,…)
myadd(10,20);
//函数⾃调⽤ (function () {
console.log("Hello Function!");
})();
- arguments 对象
- 在函数代码中,使⽤特殊对象 arguments,开发者⽆需明确指出参数名,就能访问它们。
- arguments是⼀个对象,是⼀个伪数组,arguments[索引]---->实参的值
- 也可以访问这个值,即第⼀个参数的值(第⼀个参数位于位置 0,第⼆个参数位于位置 1,依此类推)。
- arguments.length--->是实参的个数
- 关于变量作⽤域:
- 由于函数的出现导致了变量的定义分为函数内定义和函数外定义,即全局和局部变量
- 全局变量:在函数外使⽤var声明的变量就是全局变量,全局变量可以在⻚⾯的任何位置使⽤
- 全局变量,如果⻚⾯不关闭,那么就不会释放,就会占空间,消耗内存。
- 局部变量:在函数内使⽤var关键字定义的变量是局部变量,即出了函数外边⽆法获取。
- 隐式全局变量:没有使⽤var声明的变量,就叫隐式全局变量,在函数外可以获取到。
- 全局变量是不能被删除的,隐式全局变量是可以被删除的(使⽤delete)
- 定义变量使⽤var是不会被删除的,没有var是可以删除的
- 函数外⾯定义的变量是全局变量,函数内可以直接使⽤。
- 在函数内部没有使⽤var定义的=变量则为全局变量。
- 函数中的返回值:
- 如果⼀个函数中有return ,那么这个函数就有返回值
- 如果⼀个函数中没有return ,那么这个函数就没有返回值
- 如果⼀个函数中没有明确的返回值,那么调⽤的时候接收了,结果就是undefined
- (没有明确返回值:函数中没有return或函数中有return,但是return后⾯没有任何内容)
- 函数内容执⾏遇到return,则⽴刻执⾏返回,且下⾯的代码是不会被执⾏的
2. 系统中常⽤的内置函数:
//内置函数:
/*
escape() //字串编码
unescape() //字串反编码
*eval() //将参数字符串作为脚本代码来执行。
*isNaN() // is not a number (不是一个数值)
*parseInt()
*parseFloat()
*/