1.概念:
JavaScript是用于实现用户交互
、动态控制文档的外观和内容
,动态控制浏览器操作、创建cookies等网页行为的跨平台、跨浏览器的由浏览器解释执行的客户端脚本语言 动态交互,数据请求
2.特点:
- 是基于对象的弱类型语言
- 跨平台 Linux,windows,mac只要有浏览器,就能够运行
- 事件驱动 鼠标点击,鼠标悬浮,鼠标移动,键盘按下,键盘弹起,获取焦点,失去焦点,加载等常用的事件
3.js作用
-
表单客户端验证;
-
动态HTML(DHTML):不需要人为介入,就能自动实现动画效果。
-
用户交互的动画效果:需要鼠标和键盘介入的动画效果
-
动态添加一些网页内容
-
动态的获取和改变html元素的属性或css属性,从而动态的创建网页内容或改变内容的显示
4.js的组成
-
ECMAScript 是Javascript的核心基础,JavaScript 的正式名称是 "ECMAScript"。这个标准由 ECMA 组织发展和维护 ECMA-262 是正式的 JavaScript 标准,提供语法、数据类型、语句、关键保留字、流程控制、内置对象、运算符等规范,定义了脚本语言的所有属性、方法和对象
-
DOM(Document Object Model) 文档对象模型 动态管理HTML、XHTML、XML元素
-
BOM(Browser Object Model) 浏览器对象模型 动态操作浏览器窗口和框架
5.js的引入方式
1.head标签中 ,不推荐,需要添加window.onload
<script src="./js/1-.js"></script>
2.在body结束标签的后面 好处:先加载html css 再加载js
<script>
document.write('world');
</script>
3.放在任意一个标签中,需要使用事件
<div class="box" onclick="alert('hhh')">bd</div>
4.可以添加到a标签中
<a href="javascript:alert('aaaa')">baidu</a>
6.js的常用输出语句
-
alert("这是我的输出页面"); 弹窗输出
<script>
alert('弹窗输出');
</script>
-
document.write(“这是我输出的内容”); 在页面输出,可以输出标签
<script>
document.write('页面中输出');
document.write('<h1>hahaha</h1>');
</script>
-
console.log() 在控制台中打印,打印任意字符或者js的变量信息; 可以接受任何字符串、变量、数字、对象;
<script>
console.log('控制台输出');
</script>
7.js注释
- //…… 单行注释
- /* */ 多行注释
8.标识符
-
标识符的组成:标识符可以由字母、数字、下划线(_)和美元符号($)组成。这意味着标识符可以包含英文字母、数字、下划线和美元符号。
-
不能以数字开头:标识符的第一个字符必须是字母、下划线或美元符号,不能以数字开头。
-
大小写敏感:JavaScript是大小写敏感的,因此“MyVariable”和“myvariable”被视为两个不同的标识符。
-
保留字和关键字:标识符不能使用JavaScript的保留字(关键字),如
if
、for
、while
,true、false和null等。这些词被JavaScript语言内部使用,具有特定的用途,用户不能自定义同名的标识符。 -
描述性和驼峰命名法:标识符应具有描述性,能够清晰地表达其含义和用途(有意义)。命名通常采用驼峰命名法,即第一个单词小写,后续单词首字母大写,例如
myVariable
、calculateSum
等。 -
常量命名:常量通常使用全大写字母,并用下划线分隔单词,例如
MAX_VALUE
、PI
。
9.拓展 :
- onmouseover 鼠标悬浮事件
- onmouseout 鼠标离开事件
- onclick 点击事件
- 查找选择器
document.querySelector('.box');
10.变量
1.可以变化的量
- 变量是用于存储信息的容器【内存空间】
- 变量是一段命名的存储空间
- 变量是在程序运行过程中值允许改变变量的值
- 变量是由变量名,变量值,和变量类型组成
只要声明了一个变量,就会开辟一个内存空间(容器) 无具体大小
2.变量命名规则
-
第一个字符必须为字母,_或$,其后的字符还可以是数字 严格区分大小写,
-
要有一定的含义
-
建议使用小驼峰规则来命名变量。redApple 不能使用关键词,保留字作为变量名
3.变量的声明与赋值
- var 变量名
变量名=值
- var 变量名=值
- 变量名=值
- var 变量1=值1,变量2=值2,变量3=值3
注:
-
变量名是浏览器关闭后才释放在,在没关闭之前随时使用
-
重新声明的变量,不会丢失原始值,除非重新赋值
-
换行是语句的结束,最好结束时都加上 “ ; ”
-
变量名是区分大小写的
11.变量的数据类型
分为 { 基础数据类型 :string number boolean null undefined
{ 引入数据类型 : 数组array 对象
1>string字符串
-
字符串用单引号或双引号包括起来
-
单双引号均不能解析变量
-
变量与字符串,变量与变量之间可以使用运算符‘+’来拼接
当+号的左右两边任意一值为字符串时,则此的+为拼接
4.单引号和双引号可以互相嵌套,如果单引号中要嵌套单引号,需要使用转义字符
转义字符:
2>number 数字{ 数字{ 整形
{ 浮点型 不是一个准确的数值,近似值{ 单精度浮点 小数点后保留7位
{ 双精度浮点 小数点后保留15位
{ NaN
进制: 不管输入的是几进制,最终显示时都会转为10进制
0开头(八进制)
0b开头(二进制)
0x开头(十六进制)
科学计数法:tofixed(1) 括号里写小数点后保留的位数(自动四舍五入)
console.log((0.1 + 0.2) ,toFixed(1));
3>boolean 布尔值
-
值只有true和false。分别代表逻辑真与假
-
布尔值通常用来表示比较所得的结果
-
true和false是严格区分大小写的
var n=10;
if(n>8){
alert('我是true');
}else{
alert('我是false');
}
4>undefined 未定义
-
定义了一个变量但没有为该变量赋值,使用了一个并未赋值的变量
var n;
alert(n);
2.使用了一个不存在的对象的属性时5.5
var people=new Object; // 创建一个object对象
people.height =162; // 添加属性height
alert(people.height); // 输出属性height
people.show=function(){ // 添加方法show
alert(this.color); // 调用属性color
alert(this.height); // 调用属性 height
}
people.show() // 调用方法show
5>null 空值
-
null表示一个空值
-
null不等于空字符串""、''或0(空字符串或空数字)
null和undefined的区别是,null表示一个变量被赋予了一个空值,而undefined则表示该变量尚未被赋值
6>array数组
1.书写方式: 里面可以放多个值
1.var 数组名=new Array();
数组名【0】= ‘jack’
数组名【1】= ‘marry’
...
2. var cars=new Array("Audi","BMW","BYD");
3.var cars=["Audi","BMW","BYD"];
2.多维数组
var arr = [
['北京','上海','深圳'],
['合肥','石家庄','昆明'],
['','','']
];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
var arr = ['张三',185,['打球','打游戏',['篮球','羽毛球','乒乓球'],['lol','黑悟空']]];
// 若想找到篮球: console.log(arr[2][2][0])
注:如何查看判断数据类型
可以通过typeof来判断数据类型
12.数据类型的转换
{ 自动转换
{ 强制转换
1>转为字符串
- 自动转换:
number类型----->字符串:直接加‘’引号
boolean类型----->字符串:直接加‘’引号
undefined类型----->字符串:直接加‘’引号
null类型----->字符串:直接加‘’引号
- 强制转换
string() 或 object.tostring()
2>转为数字类型
- 自动转换:
string类型----->数字:若是纯数字类型字符串,去掉‘’引号即可,若为其他则转为NaN
null类型----->数字:null自动转换为0
boolean类型----->数字:true转换为1,false转换为0
undefined类型----->数字:转换为NaN
object类型----->数字:转换为NaN
array类型----->数字:若是空,则转换为0,有值,则转换为值。其他为NaN
- 强制转换
{ number()
{ parseint (string) //整形
{ parsefloat (string)//浮点型
3>转为布尔类型
- 自动转换:
- “ ” ‘ ’(空的字符串)类型----->布尔类型:false
- 0或0.0类型----->布尔类型:false
- null类型----->布尔类型:false
- undefined类型----->字符串:false
- NaN类型----->字符串:false
- 其他的----->字符串:true
- 强制转换
! 表示取反
!! 表示 强制将任意类型转为布尔类型
特殊转换规则:
-
null == undefined true,但是换成 === 结果是false(因为类型不一致),剩下null/undefined和其他任何数据类型值都不相等
-
字符串 == 对象,要把对象转为字符串
-
剩下如果 == 两边数据类型不一致,都是需要转换为数字再进行比较
-
如果类型都是字符串,就会按照ASCII编码的进行对比
-
[] == [] // false
-
{} == {} // false
13.运算符
1>算术运算符
- + (算数加和字符串拼接)、
- -
- *
- /
- %(取余)
2>比较运算符 返回值是布尔类型
- == 判断 (值相同,数据类型不同)
- != 不等于
- === 绝对相等(值相等,数据类型相等)
- !== 不全等于(其中之一)
3>赋值运算符
- = 赋值 等号右边赋值给等号左边
- += eg:i+=1 ---> i=i+1
4>逻辑运算符 返回值不是布尔类型
- ! 逻辑 取反
- && 逻辑且 等式两边都为true,返回true,只要有一边为false,则会返回false
- || 逻辑 或 ,等式两边只要有一边为true,则会返回true
&&返回值:返回假的一边
- 如果两边为真,返回&&后面的内容
- 如果前真后假,返回&&后面的内容
- 如果前假后真,返回&&前面的内容
|| 返回值:返回真的一边
- 如果前面为真,返回||前面的内容
- 如果前面为假,返回||后面的内容
- 如果前假后假,返回||后面的内容
断点问题:&& 前为假,后面的将不再运算
|| 前面为真,后面的将不再运算
5>条件运算符
条件表达式?结果1:结果2
如果条件表达式结果为true则返回结果1 如果条件表达式结果为false则返回结果2
var m=100>99?66:33
alert(m)
14.运算符的优先级
小括号>算术运算符>比较运算符>逻辑运算符>赋值运算符
一元(++ -- )> 二元 (* / + - %)> 三元 (> < >= <=) > == !== === != >逻辑运算符(! && ||)> 赋值运算符
15.json数据类型(对象)
SON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式 主要作用: JSON 是用于存储和传输数据的格式。 JSON 通常用于服务端向网页传递数据 。 特性: json的键不能重复,如果键是一个完整的单词,可以直接写,如果键里面包含了空格,要用引号引起来 格式:
{key: value, key: value}
数据为 键/值 对。 多个数据由逗号分隔 value可以为任意类型
16.流程控制
在任何一门程序设计语言中,都需要支持满足程序结构 化所需要的三种流程控制:
-
顺序控制:在程序流程控制中,最基本的就是顺序控制。程序会按照自上而下的顺序执行。
-
分支控制(条件控制){ if语句
{ switch语句
-
循环控制{ while
{ do-while
{ for *
1>if语句
分类:单分支,双分支,多分支,分支嵌套
单分支的if语句中,业务逻辑只有一行时,代码可省略掉括号
// 单分支
if (条件表达式){
代码段 //业务逻辑
}
// 双分支
if (条件表达式) {
代码段1
}else {
代码段2
}
// 多分支
if (条件表达式1){
代码段1
} else if (条件表达式2){
代码段2
} else if (条件表达式3){
代码段3
}else{
代码段4
}
2>switch语句
switch (变量){
case 值1:
代码段;
break;
case 值2:
代码段;
break;
...
default: //以上情况都不符合,则来到default
代码段;
}
案例:
var d = new Date();
console.log(d); // 获取日期时间对象
var week = d.getDay(); // 获取星期几
switch (week) {
case 0:
console.log('星期天');
break;
case 1:
console.log('星期一');
break;
case 2:
console.log('星期二');
break;
case 3:
console.log('星期三');
break;
case 4:
console.log('星期四');
break;
case 5:
console.log('星期五');
break;
case 6:
console.log('星期六');
break;
}
- 什么时候用if,什么时候用switch
if:条件是一个范围 或者 是具体的值
switch:条件是一个具体的值
3>while循环
While 循环会在指定条件为真时循环执行代码块。 While循环,先进行条件判断,再执行循环体的代码
while (条件表达式){
循环体
}
当前循环中,如果不满足条件,一次都不会执行
var i= 1;
while(i<=10){
console.log(i);
i++;
}
4>do-while 循环
do/while 循环是 while 循环的变体。该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。 do while循环,先执行循环体代码,再进行条件判断。至少执行一次循环体的代码。
do {
代码段
} while (条件表达式)
注意:当前循环中,代码至少执行一次
var i=1;
do{
i++; // 2
console.log(i);
}while(i<=10)
5>for循环
for (循环变量初始化表达式; 循环条件表达式; 更新循环变量表达式) {
循环体
}
注意:
-
循环变量可以定义在for 循环结构体外
-
没有更新循环变量会变成死循环
-
循环条件中的‘;’不能省略
6>for in 循环
for (变量 in 对象) {
代码段
}
eg:
for(var k in person){
console.log(person[k]);//k是一个变量,需要用[]包裹
}
json对象中不能使用for循环,应该使用for-in循环
for-in循环专门用来循环对象和数组
while循环与do-while循环与for循环 的区别:
while循环:只有满足条件才会执行 不固定循环次数(条件)
do-while:不管是否满足条件,一定会执行一次
for:循环固定的次数
17.跳转语句
-
continue :退出当前这一次循环,继续下一次循环
continue语句只能应用在循环中(while、do......while、for)语句中 用于中止本次循环,根据控制表达式还允许继续进行下一次循环。
var iNum = 0;
for (var i=1; i<10; i++) {
if (i % 5 == 0) {
document.write(i);
continue;
}
iNum++;
}
alert(iNum);
-
break :退出整个循环
break语句只能应用在循环(while、do......while、for)或switch语句中 break语句用于退出循环,阻止再次反复执行任何代码或者退出一个switch语句
for (var i=1; i<10; i++) {
if (i % 5 == 0) {
break;
}
iNum++;
}
alert(iNum);