一.JavaScript 引入方式
行内脚本
<input type="button" value="点击" onclick="alert('你点击了按钮');">
内部脚本
<script type="text/javascript">
document.getElementById("btn").οnclick=function(){
alert('你点击了按钮');
}
</script>
外部脚本
//.js文件
document.getElementById("btn").onclick=function(){
alert('你点击了按钮');
}
为啥HTML,CSS,JS代码要分开写?
分开写便于开发和维护。
二.JavaScript语法
1.数据类型(6种)
number,string,boolean,object,null,undefined
number
let num = 1;
string:
let str = "张三";
var str2 = '李四';
" "或者’ '引起来的内容都是字符串
object:
var obj = new Object();
let Obj = {属性1:'属性值1',属性2:'属性值3'};
boolean:
var b = true;
null:
//空值
undefined:
var num ;//变量没赋值
console.log(num);
可以用typeof来查看数据类型
let b = true;
console.log(typeof b);
2.变量
JavaScript是否区分大小写?
区分大小写
var与let的区别?
let声明的变量只在它所在的代码块有效。var声明的变量属于全局变量
3.常量
使用const关键字定义一个常量
const num = 100
4.字符串常用方法
charAt(index)
:返回指定位置的字符
indexOf(str,index)
:查找某个指定的字符串在字符串中首次出现的位置
substring(start,end)
:返回字符串中位于区间[start,end)内的字符串
split(str)
将字符串按照给定的字符串分割为字符串数组
replace(oldStr,newStr)
:将字符串中指定的子字符串使用新的字符串进行替换
5.数组
数组的创建
let 数组名 = new Array(数组长度);
let 数组名 = new Array(数组元素1, 数组元素2, ..., 数组元素n);
let 数组名 = [数组元素1, 数组元素2, ..., 数组元素n];
数组可以通过下标来赋值并且可以自动扩容。
let list = new Array(10);
list[5] = 10;
数组的常用方法
push(元素1,元素2...)
:添加元素(添加在元素末尾),并返回当前数组的长度。
join(str)
:将数组中的每个元素按照给定的字符串组合起来
let num= [1, 2, 3];
let str = num.join("-");
console.log(str);//结果 1-2-3
splice(index,count)
:从数组给定的下标位置删除给定数量的元素
splice(index,count,元素1,元素2...)
:从数组给定的下标位置删除给定数量的元素,然后将给定的元素插入到删除的位置
let num1= [1, 2, 3,4,5,6,7,8]
num.splice(2, 1); //将数组num从下标为2的位置删除1个元素
console.log("删除元素后:" + num3);
num.splice(3, 2, 10, 20, 30); //将数组num从下标为3的位置删除2个元素,然后将10,20,30从删除位置添加到数组中
console.log("删除元素的同时增加元素:" + num3)
concat(数组1,数组2,.........)
:将给定的数组与当前数组依次拼接起来,返回一个新的数组。
6.对象
创建对象的两种方式:
let 对象名 = new Object();
let 对象名 = {
};
let stu = new Object();
stu.name = "张三";
stu.sex = "男";
stu.age = 20;
console.log(stu);
let teacher = {
'name' : '李刚',
'level': '教授',
'salary': 18000
'nick-name':'男'
};
console.log(teacher);
访问对象
方法一:对象名.属性名
console.log(stu.name)
方法二:对象名[属性名]
console.log(teacher["nick-name"])
遍历对象属性
第一种:for -in
for(const stuProp in stu){
console.log(stu[stuProp]);
}
第二种:基于工具类遍历
Object.keys(stu).forEach(prop => console.log(prop + "=" + stu[prop]));
实现两个对象属性名和属性值一致,但内存地址不一致
方法一
let stu1 = {
name: '李四',
sex: '男'
}
let stu2 = {};
Object.keys(stu1).forEach(prop => stu2[prop] = stu1[prop]);
console.log(stu2);
方法二
let s1 = JSON.stringify(stu1); //将stu1直接转换成JSON格式的字符串,所谓的JSON格式,就是我们使用大括号定义对象的格式
console.log(s1)
//再将这个JSON格式的字符串解析成一个对象,这个解析出来的对象就与原来的对象地址不一样了
let stu3 = JSON.parse(s1);
console.log(stu3)
console.log(stu1 == stu3)//false
周期函数
setInterval(函数名,毫秒数);
清除周期函数
clearInterval(周期函数)
let t = setInterval(function ...,1000)
clearInterval(t)
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.img-box{
width: 590px;
height: 470px;
margin: 0 auto;
}
img{
display: none;
}
.active{
display: block;
}
</style>
</head>
<body>
<div class="img-box">
<img class="active" src="../img/a.jpg" />
<img src="../img/b.jpg" />
<img src="../img/c.jpg" />
<img src="../img/d.jpg" />
<img src="../img/e.jpg" />
<img src="../img/f.jpg" />
</div>
</body>
<script type="text/javascript">
let imgs = document.getElementsByTagName("img");
let imglen = imgs.length;
let index = 0;
function ch(){
imgs[index].className = "";
index++;
if(index ===imglen){
index=0;
}
imgs[index].className = "active";
}
let t = setInterval(ch, 1000);
for(let i = 0;i<imglen;i++){
imgs[i].onmouseover = function (){
clearInterval(t);
}
imgs[i].onmouseout = function(){
t = setInterval(ch, 1000);
}
}
</script>
</html>