JavaScript基础学习笔记

最新推荐文章于 2024-05-24 13:39:19 发布

JiaXinXiaoBingGan

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量25

点赞数

文章标签： javascript 学习笔记

本文链接：https://blog.csdn.net/JiaXinBinGan/article/details/132070796

版权

一.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>

JiaXinXiaoBingGan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础学习笔记

从数组给定的下标位置删除给定数量的元素，然后将给定的元素插入到删除的位置。let声明的变量只在它所在的代码块有效。:返回字符串中位于区间[start,end)内的字符串。:将字符串中指定的子字符串使用新的字符串进行替换。:查找某个指定的字符串在字符串中首次出现的位置。：将数组中的每个元素按照给定的字符串组合起来。将字符串按照给定的字符串分割为字符串数组。:从数组给定的下标位置删除给定数量的元素。" "或者’ '引起来的内容都是字符串。:将给定的数组与当前数组依次拼接起来，:添加元素（添加在元素末尾），
复制链接

扫一扫