1 什么是JavaScript
javascript是轻量级函数优先的解释性编程语言; javascript的三大部分
是ECMAscript脚本规范性语言; 通过文档对象模型操作网页; 通过浏览器对象模型操作浏览器; 单线程
vscode的常用脚本:
Live Server 实时更新; Prettier - Code formatter 格式化代码插件; Bracket Pair Colorizer 代码样式清晰化;
2 JavaScript的引入和注释
2.1 JavaScript的引入
< script src= '' > < script>
< script > < script>
2.2 JavaScript注释
单行注释使用
单行注释使用
代码结尾要用;
3 JavaScript变量的声明
JavaScript中,用于声明变量的语法:
var variable_name= new value; 声明字符串必须使用单引号’ '或者双引号" "; 不能使用保留字作为变量名; 第一种
< script>
var name= '张三' ;
< script>
var name;
name= '张三' ;
var name= '张三' age= 10
4 JavaScript变量的提升
JavaScript和其他编程语言一样,都会经历编译和执行,js在编译的时候会把所有的变量提前收集起来提前定义,其他的程序不会又变动
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
console. log ( name) ;
var name = "张三" ;
< / script>
< / body>
< / html>
没有报错unfined
5 JavaScript 数据类型
number;
String;
Boolean;
null ;
symbol;
undefine;
对象{ } ;
函数 ( ) { } ;
数组[ ] ;
5.1 Numer 数据类型
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var numberone = 1000 ;
console. log ( numberone) ;
var numbertwo = new Number ( 1000.1121212 )
console. log ( numbertwo) ;
var boolean1 = Number. isInteger ( numberone) ;
console. log ( boolean1) ;
var boolean2 = Number. isNaN ( numbertwo) ;
console. log ( boolean2) ;
console. log ( numbertwo. toFixed ( 2 ) ) ;
< / script>
< / body>
< / html>
5.2 String 数据类型
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var contextone = "今天不学习,明天变垃圾," ;
console. log ( contextone) ;
var contexttwo = new String ( "后天不学习。要变臭垃圾" ) ;
console. log ( contexttwo) ;
var contextsum = contextone + contexttwo;
console. log ( contextsum) ;
var contextlenth = contextone. length;
console. log ( contextlenth) ;
var contextfour = " bianli ji " ;
console. log ( contextfour. trim ( ) ) ;
var contextfive = contextone. charAt ( 2 ) ;
console. log ( contextfive) ;
var contextsix = contextone. slice ( 0 , 5 ) ;
console. log ( contextsix) ;
var contextseven = contextone. indexOf ( "垃圾" ) ;
console. log ( contextseven) ;
var contexteight = contextone. replace ( "今天" , "天天" ) ;
console. log ( contexteight) ;
var time = "2022-11-08" ;
var time1 = time. split ( "-" ) ;
var time2 = time1. join ( "/" )
console. log ( time2) ;
< / script>
< / body>
< / html>
5.3 Boolean数据类型
Boolean只有两个值 true,false ,声明:
var boolean= true ;
true false Number非空值 ✔ Number为0或NaN ✔ String非空值 ✔ String空值 ✔ 数组不参与比较时 ✔ 数组参与比较时 ✔ 对象 ✔ Null ✔ undefined ✔ NaN ✔
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var num = 100 ;
var booleanone = Boolean ( num) ;
console. log ( "booleanone转换的值为:" + booleanone) ;
var num1 = 0 ;
var booleantwo = Boolean ( num1) ;
console. log ( "booleantwo转换的值为:" + booleantwo) ;
var Str = 'xiaowang' ;
var booleanthree = Boolean ( Str) ;
console. log ( "booleanthree转换的值为:" + booleanthree) ;
var Str1 = "" ;
var booleanfour = Boolean ( Str1) ;
console. log ( "booleanfour转换的值为:" + booleanfour) ;
var arr = [ ] ;
var booleanfive = Boolean ( arr) ;
var arr1 = [ ] ;
var booleansix = arr === arr1
console. log ( "booleanfive转换的值为:" + booleanfive) ;
console. log ( "booleansix转换的值为:" + booleansix) ;
var obj = { } ;
var booleaneight = Boolean ( obj) ;
console. log ( "booleaneight转换的值为:" + booleaneight) ;
console. log ( "undefined转换的值为:" + Boolean ( undefined ) ) ;
console. log ( "boolean转换的值为:" + Boolean ( NaN ) ) ;
var no = ull;
console. log ( "Null转换的值为:" + Boolean ( no) ) ;
< / script>
< / body>
< / html>
当其他数据类型和布尔值比较的时,都是先转换为number进行比较;
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var num = 0 ;
var boolean1 = false ;
var result1 = num == boolean1;
console. log ( result1) ;
var num1 = 1 ;
var result2 = num1 == boolean1;
console. log ( result2) ;
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var ss = true ;
console. log ( ! ss) ;
< / script>
< / body>
< / html>
5.4 undefined 数据类型
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var ss
console. log ( ss) ;
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var ss = {
}
console. log ( ss. adv) ;
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
function inss ( ) { }
console. log ( inss ( ) ) ;
< / script>
< / body>
< / html>
5.5 Symbol数据类型
Symbol是ES 6新增的一种基本数据类型; 作用:表示的独一无二; 背景:ES5 以字符串为对象属性名容易冲突,为了解决冲突新增了Symbol; 特性:
不能使用new关键字,因为Symbol基本数据类型,不是对象,实际上就是类似于String的基本数据类型; Symbol函数的参数是对Symbol的描述,所以返回值不同。 对象作为Symbol函数的参数,会先转花为字符串 Symbol只能转化为字符串和布尔值,不能转化为number类型; 提供一个方法查询Symbol函数的描述 decription;
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var aa = Symbol ( "小王" ) ;
var bb = Symbol ( "小王" ) ;
console. log ( aa == bb) ;
console. log ( bb. description) ;
var lesson = Symbol ( 'kecheng' ) ;
var classone = {
[ lesson] : "语文"
} ;
console. log ( classone) ;
var classtwo = { } ;
classtwo[ lesson] = "数学" ;
console. log ( classtwo) ;
var classthree = { } ;
Object. defineProperty ( classthree, lesson, {
value : "英语"
} ) ;
console. log ( classthree) ;
< / script>
< / body>
< / html>
6 JavaScript 对象的基本知识
6.1 创建对象的三种方式;
通过创建字面量创建;
对象的操作方式:
增加/修改对象名.属性名=值 查询 对象名.属性名/方法或者对象名[属性] 删除 delete.属性/方法
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var lesson = {
subject1 : '语文' ,
subject2 : '数学' ,
subject3 : '英语' ,
begin : function ( ) {
console. log ( '上课' )
}
} ;
lesson. subject4 = "自然" ;
lesson. end = function ( ) {
console. log ( '下课' )
}
console. log ( lesson) ;
console. log ( '------------我是分割线---------------' ) ;
console. log ( lesson. subject1) ;
console. log ( lesson[ "subject2" ] ) ;
lesson. begin ( ) ;
lesson. end ( ) ;
console. log ( '------------我是分割线---------------' ) ;
lesson. subject4 = "大学自然" ;
console. log ( lesson) ;
console. log ( '------------我是分割线---------------' ) ;
delete lesson. subject1
console. log ( lesson) ;
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var lesson = new Object ( ) ;
lesson. subject1 = "语文" ;
lesson. start = function ( ) {
console. log ( 上课) ;
}
console. log ( lesson) ;
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
function Lesson ( sub1, sub2, sub3, sub4 ) {
this . sub1 = sub1;
this . sub2 = sub2;
this . sub3 = sub3;
this . sub4 = sub4;
}
var lesson = new Lesson ( "数学" , "语文" , "英语" , "自然" )
console. log ( lesson) ;
< / script>
< / body>
< / html>
6.2 new的作用;
创建了一个新的空对象; 将构造函数的作用域指向了新的对象(this 指向了新的对象,this的作用域是全局) 执行构造函数的代码(为属性赋值); 返回一个新的对象;
6.3 深拷贝和浅拷贝
浅拷贝
把一个对象赋值给另外一个对象实际上赋值的是第一个对象的引用,2个引用都指向同一个地址所以修改第一个对象的值时,赋值对象的值也会变动;
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
function Lesson ( sub1, sub2, sub3, sub4 ) {
this . sub1 = sub1;
this . sub2 = sub2;
this . sub3 = sub3;
this . sub4 = sub4;
}
var lesson = new Lesson ( "数学" , "语文" , "英语" , "自然" ) ;
var lesson2 = lesson;
lesson. sub1 = '大学数学' ;
lesson. sub2 = '大学语文' ;
lesson. sub3 = '大学英语' ;
lesson. sub4 = '大学自然' ;
console. log ( lesson2) ;
< / script>
< / body>
< / html>
深拷贝
引用类型复制后 ,会在产生新的地址,2个对象相互独立不干扰;
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var lesson = {
subject1 : '语文' ,
subject2 : '数学' ,
subject3 : '英语' ,
}
var lessons = JSON . stringify ( lesson) ;
var lessona = JSON . parse ( lessons) ;
lesson. subject1 = '大学语文' ;
console. log ( lesson) ;
console. log ( lessona) ;
< / script>
< / body>
< / html>
7 JavaScript数组
JavaScript数组是列表对象,原型中定义了遍历和操作数组的方法,js数组没有固定的长度以及可以存放任何类型的数据类型; 声明数组的两种方法:
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var arr = [ 1 , 2 , 34 , "小王" , "小狗屁" , true ]
console. log ( arr) ;
var arr1 = new Array ( 1 , 34 , "小王" , "小狗屁" , true ) ;
console. log ( arr1) ;
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var arr = [ 1 , 2 , 34 , "小王" , "小狗屁" , true ]
arr[ 6 ] = "小王八" ;
console. log ( arr) ;
arr. unshift ( "增加第一位" ) ;
console. log ( arr) ;
arr. push ( "增加最后一位" ) ;
console. log ( arr) ;
var arr1 = [ 1 , 2 , 34 , "小王" , "小狗屁" , true ]
arr1[ 10 ] = 10 ;
console. log ( arr1) ;
console. log ( "----------我是分隔线--------" )
var arr2 = [ 4 , 5 , 6 , "大王" , "大狗屁" , false ]
arr2. shift ( ) ;
arr2. pop ( ) ;
console. log ( arr2) ;
console. log ( "----------我是分隔线--------" )
var arr3 = [ 4 , 5 , 6 , "大王" , "大狗屁" , false ]
arr3[ 0 ] = "小狗" ;
console. log ( arr3) ;
console. log ( arr3[ 5 ] ) ;
< / script>
< / body>
< / html>
JS数组的进阶操作
splice 用于删除或者替换数组,以及清空数组; join 把数组转化位字符串,以及为数组加上间隔符号; concat 拼接数组;
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var arr = [ 1 , 2 , 34 , "小王" , "小狗屁" , true ]
arr. splice ( 0 , 2 ) ;
console. log ( arr) ;
var arr1 = [ 1 , 2 , 34 , "小王" , "小狗屁" , true ]
arr1. splice ( 0 , 1 , 2 , "小狗" , "小狗" , "小狗" ) ;
console. log ( arr1) ;
var arr2 = [ 1 , 2 , 34 , "小王" , "小狗屁" , true ]
arr2. splice ( 0 )
console. log ( arr2) ;
console. log ( "----------我是分隔线--------" )
var arr3 = [ 1 , 2 , 34 , "小王" , "小狗屁" , true ]
console. log ( arr3. join ( "++" ) ) ;
console. log ( "----------我是分隔线--------" )
arr. concat ( arr3) ;
console. log ( arr. concat ( arr3) ) ;
< / script>
< / body>
< / html>
8 JavaScript运算符
8.1 赋值运算符
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
var denghao = "我是赋值运算符号" ;
console. log ( denghao) ;
</ script>
</ body>
</ html>
8.2 算数运算符
基本的算数运算符; 加号(String和String相加是拼接,String和number相加会先把数字转化为字符串进行拼接,列表和number类型相同)
自增和自减
自增:a=a+1 等于 a++或者++a,a++和a–单独使用是没有区别的,在表达式中++a会先进行自增 然后再执行表达式,a++是表达式执行完了再进行自增; 自减:和自增的逻辑相同;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
var a = 11 ;
var b = 2 ;
console. log ( a + b) ;
console. log ( a - b) ;
console. log ( a * b) ;
console. log ( a / b) ;
console. log ( a % b) ;
c = 1 ;
var b = ++ c + 5 ;
console. log ( b) ;
e = 1
var fb = e++ + 5 ;
console. log ( fb) ;
</ script>
</ body>
</ html>
8.3 比较运算符
符号名 符号 > 大于 >= 大于等于 < 小于 <= 小于等于 == 转换类型等于 === 不转换类型等于
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
var a = 1 ;
var b = "1" ;
console. log ( a == b) ;
console. log ( a === b) ;
</ script>
</ body>
</ html>
8.4 逻辑运算符
&& 必须满足左边和右边的表达式同时为true才能为真; | | 左边和右边的表达式其中一个为为true就能为真; !取反; 优先级 &&的优先级高于| |;加上括号的优先级最高;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
console. log ( true && false ) ;
console. log ( true || false ) ;
console. log ( ! false ) ;
console. log ( true || false && false ) ;
console. log ( ( true || false ) && false ) ;
</ script>
</ body>
</ html>
8.5 常用的调试技巧
9 流程控制
9.1 if 、if…else、if…else if…else
特性:if 只有一条语句的时候可以不用写{} 条件 ? 表达式1 : 表达式2(条件为true时,执⾏表达式1,否则执⾏表达式2)
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
var a = 5 ;
if ( a < 3 ) {
console. log ( "上小班" ) ;
}
else if ( a >= 3 && a < 6 ) {
console. log ( "上中班" ) ;
} else {
console. log ( "上大半班" ) ;
}
var eat = 1 ;
var result = eat === 1 ? "牛肉" : "肥肠" ;
console. log ( result) ;
</ script>
</ body>
</ html>
9.2 switch
必须使用break,不然会打印所有的语句块; default 可以使用break; 格式:
switch(n){
case n:
代码块
break;
case n:
代码块
break;
default:
break;
}
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
var memu = "红烧牛肉" ;
switch ( memu) {
case "红烧牛肉" :
console. log ( "红烧牛肉必须要炖" ) ;
break ;
case "泡椒牛肉" :
console. log ( "泡椒牛肉必须要爆炒" ) ;
break ;
case "水煮牛肉" :
console. log ( "水煮牛肉必须嫩" ) ;
break ;
default :
console. log ( "不吃了" ) ;
}
</ script>
</ body>
</ html>
9.3 for循环
格式:
for (语句 1; 语句 2; 语句 3) {
要重复的代码块
}
// 语句1 声明⼀个变量
// 语句2 指定循环跳出条件
// 语句3 控制变量的变化
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
var meum = [ "肝腰合炒" , "香辣牛肉" , "莲白回锅肉" , "青椒肉丝" , "羊肉笼笼" , "平菇肉片汤" ]
for ( var a = 0 ; a < meum. length; a++ ) {
console. log ( meum[ a] ) ;
}
</ script>
</ body>
</ html>
9.4 while/do…while循环
var a=0
while (条件表达式或者变量) {
代码块
a++
}
do {
代码块
}
while (条件);
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
var meum = [ "肝腰合炒" , "香辣牛肉" , "莲白回锅肉" , "青椒肉丝" , "羊肉笼笼" , "平菇肉片汤" ] ;
var a = 0 ;
while ( a < meum. length) {
console. log ( meum[ a] ) ;
a++ ;
}
</ script>
</ body>
</ html>
9.5 小小挑战
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
var sum = 0 ;
var count = 0 ;
for ( var index = 1 ; index <= 100 ; index++ ) {
if ( index % 7 == 0 ) {
sum = sum + index;
count++ ;
}
}
console. log ( sum) ;
console. log ( count) ;
</ script>
</ body>
</ html>
题目二 用代码输出下面的图形
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
for ( var index = 1 ; index <= 5 ; index++ ) {
for ( var indexone = 1 ; indexone <= index; indexone++ ) {
document. write ( '* ' ) ;
}
document. write ( '<br/>' ) ;
}
</ script>
</ body>
</ html>