1、JavaScript 概述
1、什么是Javascript
JavaScript 简称为 JS,是一种运行于专门的JS解释器/引擎中(嵌入html中在浏览器的脚本语言具有java和c类似的语法)的 解释型脚本语言
2、JS发展史
1、1992年Nombas开发了一款脚本语言,可以运行在网页中的,名称C--,更名为 ScriptEase
2、1995年Netscape(网景)为自己的Navigator2.0浏览器开发了另一款脚本语言-LiveScript,更名为 JavaScript
3、1996年,Microsoft,为自己的IE3.0发布了JavaScript克隆版本 JScript
4、1997年,Netscape找到了ECMA(欧洲计算机制造商协会),将JS的核心部分提交给了ECMA,从此JS的核心更名为 ECMA Script,简称:ES
JS的组成:
1、核心 - ECMAScript
包含了最基本的JS的语法规范
2、文档对象模型
Document Object Model -> DOM
允许JS操作HTML网页上的内容
由W3C制定规范
3、浏览器对象模型
Browser Object Model -> BOM
允许JS操作浏览器
2、使用JS
1、使用元素的事件执行JS脚本代码
事件:用户在元素上所激发的一些行为操作
onclick:当用户点击元素时要做的操作
语法:
<ANY οnclick="JS脚本代码">
JS脚本代码:
console.log("向控制台输出一句话");
练习:
1、创建一个网页
2、创建 button,div 元素
3、分别为 button 和 div 处理 onclick 的事件
点击button时:控制台上打印输出 "点击了Button"
点击div时:控制台上打印输出 "我的第一个JS程序"
2、嵌入在网页中的<script></script>
语法:
<script></script>
特点:
网页加载时即开始执行
document.write("...");向网页内容区域输出一句话
注意:如果将document.write放在按钮中执行的话,则会刷新网页的内容区域(清空)
3、将JS脚本写在外部的JS文件中
1、创建一个js文件(***.js),并编写JS脚本
2、在使用JS文件的网页上,对js文件进行引入
<script src="js文件路径"></script>
注意:
在引入JS文件的标记中,不能编写JS代码
<script src="....js">
console.log();
</script>
以上写法是错误的!!
练习:(5分钟)
1、使用元素事件方式,向控制台中输出一句话:"我的第一个JS练习"
2、使用<script></script>方式,向网页中输出一句话"我的第一个JS练习"
3、使用外部JS文件的方式,执行一个操作 window.alert('我的第一个JS练习')
3、JS的基础语法
1、语法规范
1、JS都是由语句来组成的
1、由运算符,表达式,关键字 来组成
2、严格区分大小写
console.log();
Console.log();//错误
3、每一条语句必须以 ; 表示结束
console.log();
console.log();
a=3+5;
b=7+3;
2、注释
单行://
多行:/* */
4、JS中的变量 和 常量
1、变量
1、什么是变量
表示的是JS中一个可以变化的数据
2、声明变量
声明:var 变量名;
赋值:变量名 = 值;
声明并赋值:var 变量名=值;
注意:
1、在声明变量时,尽量使用var关键字,如果省略,也可以,但容易出问题
2、声明变量如果未赋值的话,默认值为 undefined
3、变量的命名规范
1、不能是JS中的关键字或保留关键字
2、由字母,数字,下划线 _ 以及$组成
var _name;
var $;
var u_name;
var u-name; //错误
3、不能以数字开头
4、尽量不要重复
5、尽量见名知意
var a;
var age;
6、如无特殊需求的话,尽量使用小驼峰命名法
var name;
var age;
var userName;
2、常量
1、什么是常量
一经声明就不允许被修改的数据就是常量
2、语法
const 常量名=值;
注意:
1、常量声明好之后不允许修改,所以一定要赋初始值
2、常量名一般采用全大写形式
练习:
1、创建一个网页05-const-exercise.html
2、声明一个常量PI,赋值为 3.14
3、声明一个变量r,表示一个圆的半径,随意赋值
4、通过PI和r计算圆的周长,并打印输出
l = 2*PI*r
5、通过PI和r计算圆的面积,并打印输出
s = PI * r * r
输出格式(控制台):
半径为...的圆的周长是...
半径为...的圆的面积是...
四舍五入保留小数:
var l = 3.1415926;
l=l.toFixed(2);
5、数据类型
1、存储空间单位
1、bit - 位 8bit = 1byte
2、byte - 字节 1024byte = 1kb
3、kb - 千字节 1024kb = 1mb
4、mb - 兆 1024mb = 1gb
5、gb 1024gb = 1tb
6、tb
2、数据类型的作用
约束了数据在内存中所占的空间大小
3、JS数据类型分类
1、基本数据类型
1、number类型
数字类型,可以表示32位(4字节)的整数以及64位(8字节)的浮点数
范围 :-2147483648 ~ 2147483647(不确定)
整数:
表示十进制,八进制,十六进制
十进制:var num = 10;
八进制:var num = 010;
十六进制:var num = 0x10;
小数:
小数点计数法:var num = 123.456;
指数计数法:var num = 1.5e2
2、string
字符串
由Unicode字符,数字,标点符号组成
1、查看字符的Unicode码
var str = "张";
var uCode=str.charCodeAt().toString(16);
2、如何将Unicode码转换成对应的字符??
已知Unicode码:5f20
var str = "\u5f20";
console.log(str);
3、中文范围
"\u4e00" ~ "\u9fa5"
4、转义字符
\n : 换行
\t : 制表符
\" : "
\' : '
\\ : \
3、boolean类型
布尔类型,只用于表示(true)或(false)
注意:
在参与到数字运算时,true当作1运算,false当作0运算
var r = 1 + true; // 结果为 2
var r = 25.786 * false; // 结果 0
4、查看数据类型
使用 typeof() 或 typeof 都可以查看变量的数据类型
2、引用数据类型
4、数据类型转换
JS是属于弱类型的编程语言
var str="字符串";//str 是 string 类型的
str = 15;//str 是 number 类型
1、隐式转换
不同类型的数据在做加法运算时,会进行自动转换
1、数字 + 字符串 :将数字转换为字符串
var num = 15; // number
var str = "18"; // string
var r = num + str; //1518
var result = "15"+18+15;//151815
var result = 15+18+"15";//3315
2、数字 + 布尔 :将布尔类型转换为数字
true 当 1 运算
false当 0 运算
var r = 35 * false; // 0
3、字符串 + 布尔:将布尔转换为字符串
var result = "你好"+false;
结果:你好false
4、布尔 + 布尔 :将布尔转换为数字
var r = true + false;
结果为:1
2、强制转换(转换函数)
1、toString()
将任意类型的数据转换成字符串,并返回转换后的结果
语法:
var r = 变量.toString();
2、parseInt()
作用:将指定的数据尽量转换成整数,如果实在无法转换的话,则返回NaN(Not a Number)
ex:
1、var r = parseInt("13");
r : 13
2、var r = parseInt(13.5);
r : 13
3、var r = parseInt("13你好!!");
r : 13
4、var r = parseInt("你好13");
r : NaN
3、parseFloat()
作用:将指定的数据转换为小数
转换原理与parseInt相同,能够多转换 . 以及 .后面的数字
1、var num = parseFloat("35.57");
num : 35.57
2、var num = parseFloat("Hello35.5");
num : NaN
3、var num = parseFloat("35.5Hello");
num : 35.5
4、Number()
作用:将指定的数据转换为数字,只要包含非法字符,结果就为 NaN
1、var r = Number("35.52");
r : 35.52
2、var r = Number("35ABC");
r : NaN
3、var r = Number("ABC35");
r : NaN
练习:(5分钟)
1、创建一个网页08-dateType-exercise.html
2、弹出一个输入框
var input = prompt("请输入一个数据");
input变量中,保存的就是用户输入的数据
3、将输入的数据 +10 ,打印出计算后的结果
4、使用 typeof 函数查看输入的数据的数据类型是什么
5、将输入的数据转换为数字,再+10查看结果
6、运算符
1、算数运算符
1、+,-,*,/,%
5 / 2 : 2.5
5 % 2 : 1
2 % 5 : 2
var num = 1234;
var ge = num % 10;
num = parseInt(num / 10); //num = 123
var shi = num % 10;
2、++,--
++:自增运算符,在本身数据基础上做+1操作
--:自减运算符,在本身数据基础上做-1操作
前后缀:
var num = 10;
num++;
++做后缀,先使用num的值,使用完成后再自增
ex:
var num = 10;
console.log(num++); //输出:10
//先输出num的值,再做自增操作
console.log(num);//输出:11
++num;
++做前缀,先对num进行自增,再使用num的值
ex:
var num = 10;
console.log(++num);//输出:11
console.log(num);//输出:11
var num = 5;
5 (6)6 6(7) (8)8 8
var result=num+ ++num + num++ + ++num + num;
结果:33
2、关系运算符
>,<,>=,<=,==,!=,===,!==
1、10 > 5 : true
2、"10" > 5
运算符两端如果有一个数字的话,另外一个自动会通过Number()进行转换,然后再比较大小
"3">5 : false
3、"10a" > 5 : false
4、"10a" < 5 : false
NaN 除了 != 以外,其他的比较都是 false
5、"10" > "5" : false
比较 "1" 与 "5" 的Unicode码
6、"张三丰">"张无忌" :false
比较 "三" 与 "无" 的Unicode码
三:19977
无:26080
=== :
判断数据类型 和 数值 必须都相等时,结果为true
3、逻辑运算符
!:非,对现有条件取反 等同于Python not
&&:逻辑与 等同于Python and
||:逻辑或 等同于Python or
条件1 && 条件2
1、条件1为true,条件2为true
整体结果为 true
2、条件1为true,条件2为false
整体结果为 false
3、条件1为false,条件2为true
整体结果为 false
4、条件1为false,条件2为false
整体结果为 false
条件1 || 条件2
1、条件1:true,条件2:true
结果:true
2、条件1:true,条件2:false
结果:true
3、条件1:false,条件2:true
结果:true
4、条件1:false,条件2:false
结果:false
练习:
闰年条件:
能被4整除,但不能被100整除的年份,或能被400整除
1、从弹框中录入一个数字表示年份
2、判断该年是否为闰年
如果是闰年的话:输出 true
否则 :输出 false
4、条件运算符
语法:? :
条件表达式 ? 表达式1 : 表达式2;
判断条件表达式的结果,如果结果为true,则运行表达式1的内容,否则运行表达式2的内容
7、流程控制
1、程序的结构
1、顺序结构
2、分支结构
3、循环结构
2、分支结构
1、if结构
1、if结构
语法:
if(条件){
语句块
}
2、if ... else 结构
if(条件){
语句块1
}else{
语句块2
}
3、else...if结构
语法:
if(条件1){
语句块1
}else if(条件2){
语句块2
}... else if(条件n){
语句块n
}else{
语句块n+1
}
2、switch结构
等值判断
语法:
switch(变量){
case 值1:
语句块1...
break; //可选,跳出 switch 结构
case 值2:
语句块2...
break; //可选
... ...
default:
语句块n;
所有的case都未匹配上时,才执行default
}
注意:
1、如果不增加break的话,则从匹配的case开始,向下依次执行,直到结束或碰到break为止
练习:
从弹框中录入 1-7 任意一个数字表示星期1~星期日
输入 1:输出 今天吃红烧肉
输入 2:输出 今天吃红烧鱼
输入 3:输出 今天吃红烧排骨
输入 4:输出 今天吃红烧甲鱼
输入 5:输出 今天红烧皮皮虾
输入 6:输出 今天休息
输入 7:输出 今天休息
作业:
1、从弹框中录入一个字符,判断该字符是否为数字,是否为汉字,是否为英文
ex:
从弹框中录入:5
控制台输出:输入的字符是数字
从弹框中录入:k
控制台输出:输入的字符是英文
从弹框中录入:你
控制台输出:输入的字符是汉字
2、从弹框中分三次输入 年,月,日
判断该日是该年的第多少天
1、什么是Javascript
JavaScript 简称为 JS,是一种运行于专门的JS解释器/引擎中(嵌入html中在浏览器的脚本语言具有java和c类似的语法)的 解释型脚本语言
一种网页编程技术,用来向html页面 添加交互行为
直接嵌入html页面,由 浏览器解释执行代码,不进行预编译
2、JS发展史
1、1992年Nombas开发了一款脚本语言,可以运行在网页中的,名称C--,更名为 ScriptEase
2、1995年Netscape(网景)为自己的Navigator2.0浏览器开发了另一款脚本语言-LiveScript,更名为 JavaScript
3、1996年,Microsoft,为自己的IE3.0发布了JavaScript克隆版本 JScript
4、1997年,Netscape找到了ECMA(欧洲计算机制造商协会),将JS的核心部分提交给了ECMA,从此JS的核心更名为 ECMA Script,简称:ES
JS的组成:
1、核心 - ECMAScript
包含了最基本的JS的语法规范
2、文档对象模型
Document Object Model -> DOM
允许JS操作HTML网页上的内容
由W3C制定规范
3、浏览器对象模型
Browser Object Model -> BOM
允许JS操作浏览器
2、使用JS
1、使用元素的事件执行JS脚本代码
事件:用户在元素上所激发的一些行为操作
onclick:当用户点击元素时要做的操作
语法:
<ANY οnclick="JS脚本代码">
JS脚本代码:
console.log("向控制台输出一句话");
练习:
1、创建一个网页
2、创建 button,div 元素
3、分别为 button 和 div 处理 onclick 的事件
点击button时:控制台上打印输出 "点击了Button"
点击div时:控制台上打印输出 "我的第一个JS程序"
2、嵌入在网页中的<script></script>
语法:
<script></script>
特点:
网页加载时即开始执行
document.write("...");向网页内容区域输出一句话
注意:如果将document.write放在按钮中执行的话,则会刷新网页的内容区域(清空)
3、将JS脚本写在外部的JS文件中
1、创建一个js文件(***.js),并编写JS脚本
2、在使用JS文件的网页上,对js文件进行引入
<script src="js文件路径"></script>
注意:
在引入JS文件的标记中,不能编写JS代码
<script src="....js">
console.log();
</script>
以上写法是错误的!!
练习:(5分钟)
1、使用元素事件方式,向控制台中输出一句话:"我的第一个JS练习"
2、使用<script></script>方式,向网页中输出一句话"我的第一个JS练习"
3、使用外部JS文件的方式,执行一个操作 window.alert('我的第一个JS练习')
3、JS的基础语法
1、语法规范
1、JS都是由语句来组成的
1、由运算符,表达式,关键字 来组成
2、严格区分大小写
console.log();
Console.log();//错误
3、每一条语句必须以 ; 表示结束
console.log();
console.log();
a=3+5;
b=7+3;
2、注释
单行://
多行:/* */
4、JS中的变量 和 常量
1、变量
1、什么是变量
表示的是JS中一个可以变化的数据
2、声明变量
声明:var 变量名;
赋值:变量名 = 值;
声明并赋值:var 变量名=值;
注意:
1、在声明变量时,尽量使用var关键字,如果省略,也可以,但容易出问题
2、声明变量如果未赋值的话,默认值为 undefined
3、变量的命名规范
1、不能是JS中的关键字或保留关键字
2、由字母,数字,下划线 _ 以及$组成
var _name;
var $;
var u_name;
var u-name; //错误
3、不能以数字开头
4、尽量不要重复
5、尽量见名知意
var a;
var age;
6、如无特殊需求的话,尽量使用小驼峰命名法
var name;
var age;
var userName;
2、常量
1、什么是常量
一经声明就不允许被修改的数据就是常量
2、语法
const 常量名=值;
注意:
1、常量声明好之后不允许修改,所以一定要赋初始值
2、常量名一般采用全大写形式
练习:
1、创建一个网页05-const-exercise.html
2、声明一个常量PI,赋值为 3.14
3、声明一个变量r,表示一个圆的半径,随意赋值
4、通过PI和r计算圆的周长,并打印输出
l = 2*PI*r
5、通过PI和r计算圆的面积,并打印输出
s = PI * r * r
输出格式(控制台):
半径为...的圆的周长是...
半径为...的圆的面积是...
四舍五入保留小数:
var l = 3.1415926;
l=l.toFixed(2);
5、数据类型
1、存储空间单位
1、bit - 位 8bit = 1byte
2、byte - 字节 1024byte = 1kb
3、kb - 千字节 1024kb = 1mb
4、mb - 兆 1024mb = 1gb
5、gb 1024gb = 1tb
6、tb
2、数据类型的作用
约束了数据在内存中所占的空间大小
3、JS数据类型分类
1、基本数据类型
1、number类型
数字类型,可以表示32位(4字节)的整数以及64位(8字节)的浮点数
范围 :-2147483648 ~ 2147483647(不确定)
整数:
表示十进制,八进制,十六进制
十进制:var num = 10;
八进制:var num = 010;
十六进制:var num = 0x10;
小数:
小数点计数法:var num = 123.456;
指数计数法:var num = 1.5e2
2、string
字符串
由Unicode字符,数字,标点符号组成
1、查看字符的Unicode码
var str = "张";
var uCode=str.charCodeAt().toString(16);
2、如何将Unicode码转换成对应的字符??
已知Unicode码:5f20
var str = "\u5f20";
console.log(str);
3、中文范围
"\u4e00" ~ "\u9fa5"
4、转义字符
\n : 换行
\t : 制表符
\" : "
\' : '
\\ : \
3、boolean类型
布尔类型,只用于表示(true)或(false)
注意:
在参与到数字运算时,true当作1运算,false当作0运算
var r = 1 + true; // 结果为 2
var r = 25.786 * false; // 结果 0
4、查看数据类型
使用 typeof() 或 typeof 都可以查看变量的数据类型
2、引用数据类型
4、数据类型转换
JS是属于弱类型的编程语言
var str="字符串";//str 是 string 类型的
str = 15;//str 是 number 类型
1、隐式转换
不同类型的数据在做加法运算时,会进行自动转换
1、数字 + 字符串 :将数字转换为字符串
var num = 15; // number
var str = "18"; // string
var r = num + str; //1518
var result = "15"+18+15;//151815
var result = 15+18+"15";//3315
2、数字 + 布尔 :将布尔类型转换为数字
true 当 1 运算
false当 0 运算
var r = 35 * false; // 0
3、字符串 + 布尔:将布尔转换为字符串
var result = "你好"+false;
结果:你好false
4、布尔 + 布尔 :将布尔转换为数字
var r = true + false;
结果为:1
2、强制转换(转换函数)
1、toString()
将任意类型的数据转换成字符串,并返回转换后的结果
语法:
var r = 变量.toString();
2、parseInt()
作用:将指定的数据尽量转换成整数,如果实在无法转换的话,则返回NaN(Not a Number)
ex:
1、var r = parseInt("13");
r : 13
2、var r = parseInt(13.5);
r : 13
3、var r = parseInt("13你好!!");
r : 13
4、var r = parseInt("你好13");
r : NaN
3、parseFloat()
作用:将指定的数据转换为小数
转换原理与parseInt相同,能够多转换 . 以及 .后面的数字
1、var num = parseFloat("35.57");
num : 35.57
2、var num = parseFloat("Hello35.5");
num : NaN
3、var num = parseFloat("35.5Hello");
num : 35.5
4、Number()
作用:将指定的数据转换为数字,只要包含非法字符,结果就为 NaN
1、var r = Number("35.52");
r : 35.52
2、var r = Number("35ABC");
r : NaN
3、var r = Number("ABC35");
r : NaN
练习:(5分钟)
1、创建一个网页08-dateType-exercise.html
2、弹出一个输入框
var input = prompt("请输入一个数据");
input变量中,保存的就是用户输入的数据
3、将输入的数据 +10 ,打印出计算后的结果
4、使用 typeof 函数查看输入的数据的数据类型是什么
5、将输入的数据转换为数字,再+10查看结果
6、运算符
1、算数运算符
1、+,-,*,/,%
5 / 2 : 2.5
5 % 2 : 1
2 % 5 : 2
var num = 1234;
var ge = num % 10;
num = parseInt(num / 10); //num = 123
var shi = num % 10;
2、++,--
++:自增运算符,在本身数据基础上做+1操作
--:自减运算符,在本身数据基础上做-1操作
前后缀:
var num = 10;
num++;
++做后缀,先使用num的值,使用完成后再自增
ex:
var num = 10;
console.log(num++); //输出:10
//先输出num的值,再做自增操作
console.log(num);//输出:11
++num;
++做前缀,先对num进行自增,再使用num的值
ex:
var num = 10;
console.log(++num);//输出:11
console.log(num);//输出:11
var num = 5;
5 (6)6 6(7) (8)8 8
var result=num+ ++num + num++ + ++num + num;
结果:33
2、关系运算符
>,<,>=,<=,==,!=,===,!==
1、10 > 5 : true
2、"10" > 5
运算符两端如果有一个数字的话,另外一个自动会通过Number()进行转换,然后再比较大小
"3">5 : false
3、"10a" > 5 : false
4、"10a" < 5 : false
NaN 除了 != 以外,其他的比较都是 false
5、"10" > "5" : false
比较 "1" 与 "5" 的Unicode码
6、"张三丰">"张无忌" :false
比较 "三" 与 "无" 的Unicode码
三:19977
无:26080
=== :
判断数据类型 和 数值 必须都相等时,结果为true
3、逻辑运算符
!:非,对现有条件取反 等同于Python not
&&:逻辑与 等同于Python and
||:逻辑或 等同于Python or
条件1 && 条件2
1、条件1为true,条件2为true
整体结果为 true
2、条件1为true,条件2为false
整体结果为 false
3、条件1为false,条件2为true
整体结果为 false
4、条件1为false,条件2为false
整体结果为 false
条件1 || 条件2
1、条件1:true,条件2:true
结果:true
2、条件1:true,条件2:false
结果:true
3、条件1:false,条件2:true
结果:true
4、条件1:false,条件2:false
结果:false
练习:
闰年条件:
能被4整除,但不能被100整除的年份,或能被400整除
1、从弹框中录入一个数字表示年份
2、判断该年是否为闰年
如果是闰年的话:输出 true
否则 :输出 false
4、条件运算符
语法:? :
条件表达式 ? 表达式1 : 表达式2;
判断条件表达式的结果,如果结果为true,则运行表达式1的内容,否则运行表达式2的内容
7、流程控制
1、程序的结构
1、顺序结构
2、分支结构
3、循环结构
2、分支结构
1、if结构
1、if结构
语法:
if(条件){
语句块
}
2、if ... else 结构
if(条件){
语句块1
}else{
语句块2
}
3、else...if结构
语法:
if(条件1){
语句块1
}else if(条件2){
语句块2
}... else if(条件n){
语句块n
}else{
语句块n+1
}
2、switch结构
等值判断
语法:
switch(变量){
case 值1:
语句块1...
break; //可选,跳出 switch 结构
case 值2:
语句块2...
break; //可选
... ...
default:
语句块n;
所有的case都未匹配上时,才执行default
}
注意:
1、如果不增加break的话,则从匹配的case开始,向下依次执行,直到结束或碰到break为止
练习:
从弹框中录入 1-7 任意一个数字表示星期1~星期日
输入 1:输出 今天吃红烧肉
输入 2:输出 今天吃红烧鱼
输入 3:输出 今天吃红烧排骨
输入 4:输出 今天吃红烧甲鱼
输入 5:输出 今天红烧皮皮虾
输入 6:输出 今天休息
输入 7:输出 今天休息
作业:
1、从弹框中录入一个字符,判断该字符是否为数字,是否为汉字,是否为英文
ex:
从弹框中录入:5
控制台输出:输入的字符是数字
从弹框中录入:k
控制台输出:输入的字符是英文
从弹框中录入:你
控制台输出:输入的字符是汉字
2、从弹框中分三次输入 年,月,日
判断该日是该年的第多少天