JS简介（复习）

最新推荐文章于 2024-10-02 05:39:15 发布

枫晚ing

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量86

点赞数

文章标签： javascript java 前端

本文链接：https://blog.csdn.net/m0_62074330/article/details/130955552

版权

本文介绍了JavaScript的基础知识，包括变量的作用域与定义（var、let、const），数据类型的检测（typeof），运算符的规则，流程控制语句，以及函数的定义和调用。此外，还讲解了数组、字符串的方法，JSON的使用，以及BOM（浏览器对象模型）和DOM（文档对象模型）的概念与常用方法。

摘要由CSDN通过智能技术生成

（不细致学习，大体了解过程）

书写语法：区分大小写，与Java一样，变量名，函数名以及其他的一切东西都是区分大小写的
每行结尾分号可有可无
注释，同java一样
大括号里面为代码块

输出语句：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MWdiOK7Y-1685446476560)(D:\study\笔记\typora\vue\assert\image-20230411195559309.png)]$

变量：

在这里插入图片描述

变量特点：

作用域比较大，全局变量
可以重复定义

var x = 1；

var x = 2；

在js中不报错，Java中报错
let 局部变量，不能重复定义
const 常量，不能被改变

数据类型，运算符和流程控制语句：

数据类型

在这里插入图片描述

使用 typeof 运算符可以获取数据类型
在这里插入图片描述

null 是开发最初的原始的错误，沿用至今，现如今解释为 null 就是对象的占位符

运算符

在这里插入图片描述

1.等于和不等于在判断时遵循的一些规则
   如果有一个操作数是布尔值，则在比较相等特性之前先将其转化为数值类型  false-0    true-1
            
   如果有一个操作数是字符串，另一个操作数是数值，在比较相等之前会先将字符串转换成数值
            
   如果一个操作数是对象，另一个不是，则会调用对象的valueOf()方法，用得到的基本类型的数值按照之前的规则比较，比较时需要遵循规则如下
null和undefined是相等的

在比较是否相等之前，null和undefined不能转换成其他任何值

如果其中一个操作数为NaN，则相等操作符返回false，不相等操作返回true。即使两个操作数都是NaN，返回的也是false

如果两个操作数都是对象时，比较他们是不是同一个对象。这里所说的是否是同一个是比较其指向的内存地址是否相同，如果是，返回true 反之返回false

2.全等于等于
 等于的判断遵循上述规则，而全等除了遵循上述规则 ，还会判断等号两边操作数的类型是否相同，如果不同就会返回false，相同返回true

类型转化

在这里插入图片描述

流程控制

在这里插入图片描述

函数：

定义方式一

在这里插入图片描述

定义方式二

在这里插入图片描述

注意：在 JS 中，函数调用可以传递任意个数的参数

JS对象：

【基础对象：Array String JSON】 BOM DOM

Array

在这里插入图片描述

**特点：**JS 当中的数组，相当于 Java 中的集合

长度可变类型可变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cVC1WDEG-1685446476564)(assert/image-20230411203642921.png)]

Array中的属性和方法

在这里插入图片描述

//forEach:遍历数组中有值的元素
var arr = [1,2,3,4];
arr.forEach(function(e){
    console,log(e);
})
//或者采用下面的简化写法：ES6 箭头函数（e) => {...}
arr.forEach((e) =>{
    console.log(e);
})

//push:添加元素到数组末尾
aee.push(7,8,9);

//splice:删除元素  (删掉元素3和4)
arr.splice(2,2); //从下标为2开始删，删两个

String

在这里插入图片描述

String中的属性和方法

在这里插入图片描述

//创建字符串对象
var str = new String("Hello String");
var str1 = "   Hello String";

//charAt()
console.log(str.charAt(4)); //获取索引为4的元素

//indexOf()
console.log(str.indexOf("lo"));  //输出 3

//trim()
var s = str1.trim();  //去除字符串左右两边的空格

//substring(Start, end)  -----（开始索引，结束索引 【含头不含尾】）
console.log(s.substring(0,5));   //输出 Hello
console.log(str1.substring(0,5));  //输出 He

JavaScript自定义对象

在这里插入图片描述

JSON-介绍

**概念：**JavaScript Object Notation, JavaScript对象标记法
JSON 是通过JavaScript对象标记书写的文本
由于其语法肩带，层次结构鲜明，现多用于作为 数据载体 ，在网络上进行数据传输。

在这里插入图片描述

JSON-基础语法

在这里插入图片描述

JSON转化方法

在这里插入图片描述

BOM对象（Browser Object Model）

**概念：**浏览器对象类型，允许 js 与浏览器进行对话，js 将浏览器的各个组成部分封装成对象

组成：

在这里插入图片描述

Window对象

在这里插入图片描述

//获取
window.alert("Hello BOM");
alter("Hello BOM Window");

//confirm  ---对话框   ---确认：true， 取消 false
var flag = confirm("你确实删除该对象么");
alert(flag);

//定时器   -setInterval    ---周期性的执行某一个函数
var i = 0;
setInterval(function () {
    i++;
    console.log("定时器执行了" + i + "次")
}, 2000);

//定时器 -setTimeout   ---延迟指定时间执行一次
setTimeout(function () {
    alert("JS")
}, 3000);

Location对象

在这里插入图片描述

alert(location.href);
location.href = "http://www.baidu.com";

DOM对象（Document Object Model）

在这里插入图片描述

//1.获取Element元素
//1.1获取元素-根据ID获取
var img = document.getElementById('h1');
alert(img);

//1.2获取元素-根据标签获取 -div
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
    alert(divs[i]);
}

//1.2获取元素-根据name属性获取
var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
    alert(ins[i]);
}

//1.2获取元素-根据class属性获取
var divs1 = document.getElementsByClassName('cls');
for (let i = 0; i < divs1.length; i++) {
    alert(divs1[i]);
}

//2.查阅参考手册，属性，方法
var divs1 = document.getElementsByClassName('cls');
var div1 = divs1[0];

div1.innerHTML = "传智教育123";

案例通过DOM操作。完成如下效果的实现

在这里插入图片描述

<body>
    <img id="a" src="image/on.gif"> <br><br>

    <div class="cls">传智教育</div>
    <br>
    <div class="cls">黑马程序员</div>
    <br>

    <input name="hobby" type="checkbox">电影
    <input name="hobby" type="checkbox">旅游
    <input name="hobby" type="checkbox">游戏


</body>
<script>
    //1.点亮灯泡：src属性值
    var img = document.getElementById('a');
    img.src = "image/off.gif";

    //2.将所有的div标签的内容后面加上：very good（红色字体）
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML += "<font color = 'red'> very good </font>";
    }

    //3.使所有的复选框呈现选中的状态
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked = true;
    }
</script>