什么是Js
js是javascript的全称,是当前最流行、应用最广泛的客户端脚本语言,用于在网页中添加一些动态效果和交互功能
js是一种解释型语言,不需要提前编译,能够在各种操作系统下运行(
- 编译:源代码–编译–目标代码–执行(目标代码)
- 解释:源代码–解释器–执行(V8引擎提升了解释型语言的运行速度,可以媲美编译型语言)
js与html和css共同构成了网页,其中html用于定义网页内容,css用来控制网页的外观,js用来控制网页的行为。
JS代码只能运行在浏览器中,作为网页脚本使用,为网页添加行为(不能够单独运行)
js嵌入html的方式
1.在head中使用 – 嵌入式
<script>
// 向网页中添加一个元素 document.write();给网页添加元素--输出
document.write('<h1>JS滴滴滴</h1>')
</script>
2.使用script标签搭配src属性引入js文件 --外部脚本
<!-- 引入外部js文件 -->
<script src="Tset.js"></script>
// 外部js文件
document.write("<h1>hello world -- 外部js文件</h1>")
3.使用元素的事件属性(onclick – 点击事件),写入js代码 onclick只是其中一种事件属性
<!-- 当页面已经完成加载,再去调用document.write,此时当前页面的内容会被覆盖-->
<input type="button" value="点击" onclick="document.write('<h1>点击事件内容</h1>')" >
4.使用超链接伪URL 在href属性中用javascript:js脚本的格式
<!--alert(message) 调用window对象的提示框,可以把message通过提示框弹出-->
<a href="javascript:alert('你在点什么?')">超链接伪URL</a>
JavaScript代码的执行顺序:
浏览器在解析html文档时,根据文档流从上到下逐行进行解析和显示的。JavaScript代码也是html文档的组成部分,因此JavaScript代码的执行顺序也是根据script标签的位置来确定的
注意:定义src属性引入外部js文件的script标签,不应该在包含JavaScript代码。如果嵌入了代码,则只会执行外部js文件中的代码
js中的重要概念
一·标识符:凡是可以命名的地方就可以被称作标识符
标识符的命名规则:
- 第一个字符必须是字母、下划线(_)或美元符号($)
- 不能与JavaScript关键字、保留字重名
标识符的命名规范:
- 严格区分大小写。Hello和hello
- 如果标识符由多个单词组成,除首个单词外,后面单词的首字母大写
- 见名知意
二、JavaScript保留字:
ES3时,将java所有的关键字都被列为了js保留字
三、JS注释:
注释是给开发人员看的,程序在执行时会自动忽路注释的内容,所
以我们通常使用注释来为代码添加一些解释说明或描述,以提高代码的可读
性。
JavaScript 中的注释与 C/C++、Java、PHP 等语言中注释的定义方式相同,
支持单行注释和多行注释两种风格。
// 单行注释
/多行注释 */
四、变量
js是一种弱类型语言。
弱类型是指变量任何数据都可以存放。可以存放数字,可以存放字符串,也
可以存放对象的引用。
在2015年前,只能使用 var 关键字声明变量。
在2015年(ECMAScript6)发布后,新增let和const两个关键字声明变量。
let关键字来声明变量,其所声明的变量只在声明所在块内有效(局部变量)。可以声明同名变量
const关键字和let类似,只能在声明所在的块中有效,但是使用const定义的变量一旦定义就不能修改(常量)
五、JavaScript数据类型
JavaScript数据类型分为:原始数据类型和引用类型
原始数据类型有6种
-
undefined:变量未初始化,函数没有返回值时
// undefined -- 变量没有被初始化时,或函数无返回值时 var a; console.log(a) a = "tst" console.log(a)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BUvyV1H8-1663501549270)(/Users/zhangyu/Library/Application Support/typora-user-images/image-20220725152052152.png)]
-
null:代表不存在的对象,在该变量中没有存放任何对象的引用。
// null 特殊数据类型,表示一个"空"值,即不存在任何值 a = null; console.log(a)
-
boolean:true/false
// 布尔值 ture/false a = true; console.log(a) a = false; console.log(a)
-
number:数字型,包含整数和小数。(NaN表示非数字,发生在类型转换失败时)
// 数字类型 number 可以是整数,可以是小数 a = 100; console.log(a) a = 100.111; console.log(a)
-
string:字符串型。可以单引号或双引号声明
a = '这是单引号字符串'; console.log(a) a = "这是双引号字符串"; console.log(a) // 当字符串内容有单引号或双引号时,字符串内容的引号可以用\转义或者用不同的引号完成声明 a = "I'm Qi"; a = '你好,我是XXX,人送外号"XXX"' a ="你好,我是XXX,人送外号\"XXX\""
-
Symbol:ES6引入的新原始数据类型。表示独一无二的值
Js运算符
-
算数运算符:+、-、*、/、%
var a = 100; var b = 12; var c = a + b; console.log(c) c = a - b; console.log(c) c = a / b; // 不会因为是两个整数相除,而发生自动的类型转换把结果转换为整数 console.log(c) c = a * b; console.log(c) c = a % b; console.log(c)
-
赋值运算符:=、+=、-=、*=、/=、%=、++、–
-
比较运算符:、=、!=、!==、>、<、>=、<=
// 比较运算符
console.log(55 == "55") //ture == 只比较其值,不会比较类型
console.log(55 === "55") //false === 除比较值以外,还会比较类型
console.log("55" != 55) // false 只根据值比较,不比较类型
console.log("55" !== 55) // true 除比较值以外,还会比较类型,数据或类型不同结果就为ture
- 逻辑运算符:&&、||、!
- 三目运算符:条件表达式 ? 表达式1 : 表达式2;
var result = 4 > 3 ? "4比3大" :"4比3小";
console.log(result)
JS自动类型转换的情况
-
字符串数据做减法时会转换成数字型number,
var x = '10' - 2; // x = 8 会将字符串转为number类型 console.log(x) x = '10' - '8'; // x = 8 x = 10 - '2a' // 如果字符串中的数据不是数字,结果会是NaN--代表非数字 // 字符串做加法 会做字符串的连接 var y = '10' + 2; // 内容为102的字符串
-
数字字符串做减、乘、除法时,会自动把字符串转换为number类型
-
当数字字符串做加法时(两个加数,其一为字符串时),会做字符串连接
-
做运算时,如果字符串内容有非数字符号,结果为NaN表示非数字
JS强制类型转换
强制类型转换 :parseInt() 和 parseFloat()
typeof 关键字–判断变量属于什么数据类型
var str = '1234'
var intNum = parseInt(str);
// 如何判断变量属于什么数据类型 typeof 关键字--判断变量属于什么数据类型
console.log(typeof intNum)
var floatNum = parseFloat(str)
console.log(typeof loatNum)
str = '1234asdasf'
console.log(typeof intNum)
var floatNum = parseFloat(str)
console.log(typeof loatNum)
parseInt() 和 parseFloat()的异同
- parseInt只能把字符串转换为整数, parseFloat可以把字符串转换为小数
- parseInt 转换字符串出现第一个非数字的符号时,会将第一个非数字以后的字符全部忽略,parseFloat转换字符串出现第一个非数字且为非小数点符号时,才会将后续的字符忽略
- parseInt当转换字符串第一个符号为非数字时,结果为NaN,parseFloat出现第一个非数字且为非小数点符号时,结果为NaN
js引用数据类型
常用的三种类型:
-
对象(Object)
-
JavaScript中的对象类型是一组由键、值组成的无序集合,定义对象类型需要使用花括号{}
-
语法格式{name1:value1,name2:value2…,nameN:valueN}
-
其中name1、name2 、…、nameN为对象中的键,value1、value2、…、valueN 为对应的值
-
对象类型的键都是字符串类型的,值则可以是任意数据类型,要获取对象中的某个值,可以使用对象名.键或者对象名[键]
-
需注意:在定义对象时,键(属性)是字符串类型,但是通常不需要使用引号完成键(属性)的定义
-
在定义对象时,键(属性)是字符串类型,但是通常不需要使用引号完成键(属性)的定义 但是存在某些情况必须使用引号定义键(属性): 1.属性名称为JS关键字,保留字时 2.属性名包含特殊字符(如:空格、除字母、数字、_、$以外的其他字符) 3.属性名以数字开头
-
-
对象的定义 语法格式:{name1:value1,name2:value2,…,nameN:valueN}
-
// js对象是一种由无序的键值对组成的集合,定义一个对象的类型需要使用{} // 语法格式:{name1:value1,name2:value2,...,nameN:valueN} // 注意:键必须是字符串类型 // 定义一个对象,包含姓名、年龄、性别、拥有的汽车(数组) var person={'name':'王','age':28,'gender':'男','cars':['1','1','1']} console.log(person) // 获取对象的某个属性 console.log(person.name) console.log(person['name']) /* 在定义对象时,键(属性)是字符串类型,但是通常不需要使用引号完成键(属性)的定义 但是存在某些情况必须使用引号定义键(属性): 1.属性名称为JS关键字,保留字时 2.属性名包含特殊字符(如:空格、除字母、数字、_、$以外的其他字符) 3.属性名以数字开头 */
-
-
获取对象的某个属性 对象.属性 对象[属性]
// 获取对象的某个属性 console.log(person.name) console.log(person['name'])
-
对象属性的修改 对象名.键名 = 新值 或对象名[‘键名’] = 新值
-
// 修改对象的属性 对象名.键名 = 新值 或对象名['键名'] = 新值 person.name = '刘备' person['name'] = '曹操' console.log(person)
-
-
对象属性的添加 添加方式 对象名.新键名 = 新值
-
// 当我们定义好一个对象后,可以动态的添加对象的属性 添加方式 对象名.新键名 = 新值 person.test = '1100' console.log(person)
-
-
对象属性的删除 delete
-
// 删除对象属性 delete delete person.test; console.log(person)
-
-
-
数组(Array)
-
数组是一组按顺序排列的数据的集合,数组中的每个值都称为元素,而且数组中可以包含任意类型的数据
-
在JavaScript 中定义数组需要使用方括号[ ],数组中的每个元素使用逗号进行分隔
-
数组中的元素可以通过索引来访问
-
数组的定义定义数组:1.[value1,value2,value3,…,valueN];
2.new Array(value1,value2,value3,…,valueN) -
/* 数组 是有序的值集合,数组中的每一个值称为元素,可以通过索引(下标)去获取数组中的元素 定义数组:1.[value1,value2,value3,...,valueN]; 2.new Array(value1,value2,value3,...,valueN) */ var ary =[10,12,14,'qwe',{'name':'zhang3'},undefined,null,true]; var array = new Array(1,2,4,'array',{name:'array'},true); console.log(ary) console.log(array)
-
数组的访问 方式:数组名[索引]
-
// 访问数组的元素 通过索引访问 方式:数组名[索引] console.log(ary[3])
-
-
访问数组的元素 通过索引进行修改 数组名[索引] = 新值
-
// 访问数组的元素 通过索引进行修改 方式: 数组名[索引] = 新值 ary[2] = "你好" console.log(ary[2])
-
-
数组新加元素push函数-向数组的末尾添加元素(一个或多个) 也可以返回数组的新长度
-
// 数组新加元素push函数-向数组的末尾添加元素(一个或多个) 也可以返回数组的新长度 var length = ary.push(100,"再见"); console.log(ary)
-
-
-
-
函数(Function)
-
函数是一段具有特定功能的代码块,函数并不会自动运行,需要通过函数名调用才能运行
-
函数的定义 格式:
-
function 函数名(参数列表){
// 函数中的代码
} -
/* 函数是执行特定功能的代码块 alert()、console.log()都是在js中内置的函数 自定义函数语法格式如下: function 函数名(参数列表){ // 函数中的代码 } */ function sayHello(name){ // console.log("你好:" + name); alert("你在点什么?" + name) } // 函数在定义时 可为参数定义默认值 function sayHello(name ="蠢货"){ // console.log("你好:" + name); alert("你在点什么?" + name) } // 函数返回值 通过return 返回 function sayHello(name ="蠢货"){ // console.log("你好:" + name); // alert("你在点什么?" + name) return "你在点什么?" + name; } var str =sayHello(); console.log(str)
-
-
JS的输出方式
有时,我们可能会根据某些需要对程序的运行结果进行输出,输出到浏览器中。在Js中提供了多种输出语句把结果输出到浏览器中
-
第一种:alert(message) 弹出一个提示框展示message
// alert(message) 弹出一个提示框展示message alert("你好");
-
第二种:console.log(massage) 向浏览器控制台去输出信息
// console.log(massage) 向浏览器控制台去输出信息 console.log("你好");
-
第三种:ocument.write(html代码) 把内容写入到html文档中
// document.write(html代码) 把内容写入到html文档中 document.write("<h1>你好</h1>")
-
第四种:confirm(message) 弹出一个提示框展示message,和alert(message)不同, confirm提供的弹框有两个按钮(确定和取消),点击确定返回true,点击取消返回false
// confirm(message) 弹出一个提示框展示message var a =confirm("你是不是在摸鱼"); if (a){ alert("是的") }else{ alert("没有") }
-
第五种:innerHTML属性,通过它设置或者获取指定HTML元素中内容(搭配Dom使用)
<div id="test"> JS 第五种输出方式 </div> <script> // 可以获取到指定id的元素对象 var test = document.getElementById("test") // 可以通过元素对象的innerHTML属性去获取元素内容或者修改元素内容 // 获取元素内容 alert(test.innerHTML); // 设置元素内容 test.innerHTML = "<h1>搭配Dom完成输出</h1>" </script>
JS条件判断语句
-
if语句
-
if 语句 :if(条件表达式){ // 表达式为真执行的代码 }
-
-
if else语句
-
if else语句:if(条件表达式){ // 表达式为真执行的代码 }else { // 表达式为假执行的代码 }
-
-
if else-if else语句
-
if else-if else语句:if(条件表达式1){ // 表达式1为真执行的代码 }else if(条件表达式2){ // 表达式2为真执行的代码 }else if(条件表达式3){ // 表达式3为真执行的代码 }else{ // 前面所有的表达式结果都为假时执行的代码 }
-
-
switch-case语句
-
switch - case语句代码执行和java一样,不同点在于表达式的值和value的比较,用的是 === 来进行比较(比较的是值和类型,而if只比较值,不比较类型,如:if的1=='1’是为ture的,而switch中是为false的)
-
switch - case 语句:switch(表达式){ case:value1: ....... break; case:value2: ....... break; case:value3: ....... break; default: ....... }
-
JS循环语句
-
for循环语句
-
语法格式:for(表达式1;表达式2;表达式3){
// 循环表
} -
for (var i = 0;i<10;i++){ document.write(i+"<br>") } // 使用循环遍历数组 var array = [1,2,3,4,5,6,7,8] for (var i=0;i<array.length;i++){ document.write(array[i] + "<br>") } // 九九乘法表 for (var i = 1; i<10;i++){ for (var j = 1;j<=i;j++){ document.write(j+ '*'+ i +'=' + j*i+"      ") } document.write("<br>") document.write("<br>") }
-
-
for in循环 主要是用于遍历对象的属性
-
语法格式:
-
for(变量 in 对象){
}
可以把对象中的属性,在每一次循环中,赋值给变量(只是把键名完成赋值)
-
-
需注意:在for in 循环中不能通过对象名.键名的方式获取属性值,只能通过对象名[键名]获取
-
// 遍历对象 var obj ={name:'zhang3',age:19,address:'武侯区'} for(var prop in obj){ document.write(prop + "=" + obj[prop]+" ") } // 不推荐for in 循环遍历数组 var array = [2,3,'zhang3','li4'] for (var e in array){ //遍历数组时,变量获取的是元素索引(下标) document.write(array[e] + " ") }
-
-
for of循环
-
for of 循环是ES6中新添加的一个循环方式,与for in 循环类似。使用for of循环可以轻松遍历数组或字符串,无法遍历对象
-
语法格式:
-
for(变量 of 遍历对象){
// 循环要执行的代码
}
-
-
// 遍历数组时 变量就相当于数组中的元素 array = [2,3,'zhang3','li4'] for (var value of array){ document.write(value + "<br>") } // 使用for of 循环遍历字符串,变量相当于字符串中的字符 var str = 'asdasfasfasg'; for (var c of str){ document.write(c + "<br>") }
-