JavaScript

已于 2024-06-02 11:19:45 修改
阅读量626 收藏 23
点赞数 27
文章标签： javascript
于 2024-06-01 12:30:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71299382/article/details/139370528
版权

1.JavaScript

  • 脚本型语言和编译型语言的区别
    • 脚本型语言诸如JavaScript之类的语言是一行一行自上而下进行运行的 即一行一行的展示效果 并且一旦遇到某一行出现错误 那么就会停止往下运行 而编译型语言诸如Java之类的语言则是先编译在运行 一旦出现语法错误的话 那么类似Java这种语言将会被编译器提示语法错误 并且无法编译为字节码文件
    • 脚本型语言对于语法要求较为不严格 而编译型语言对于语法要求就挺严格的
      在这里插入图片描述
  • 常见用途
    • 和用户进行交互
    • 对标签进行增删改查
    • 实现绚丽的动画效果
    • 和服务器进行交互

2.script标签

  • 我们可以利用script标签来编写js代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert('Hello World!')
    </script>
</head>
<body>

</body>
</html>
  • 我们也可以利用script标签来导入js文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="test.js"></script>
</head>
<body>

</body>
</html>

3.语法简介

  • 常见的打印有两种：1.alert()(弹窗效果) 2.Console.log()(将打印内容输出到浏览器中的控制台处)(推荐)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 第一种打印方式就是弹窗
        alert('HelloWorld!')
        // 第二种打印方式就是写入浏览器中的控制台
        console.log('HelloWorld!!!')
    </script>
</head>
<body>

</body>
</html>
  • 每一条语句可加分号 也可不加分号(建议)
    • 如果不加分号的话 那么每一条语句都要独立成行
  • 在JS中 有两种注释方式 单行注释(//) 多行注释(/**/)
  • 在JS中 通过var、let(建议)定义变量 通过const定义常量

4.数据类型

在JS中 数据类型分为8种
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 定义一个数字类型的变量
        let a = 10
        let b = 1.1
        // 定义一个bigint类型的变量 有别于数字类型的范围限制 该类型没有限制范围 通过n可以用来标识bigint类型的数值
        let c = 111111111111111n
        // 定义一个字符串类型的变量
        let d = 'Hello World!'
        // 定义一个布尔类型的变量
        let e = true
        // 定义一个undefined类型的变量 即使没有进行赋值操作的变量 也称为undefined类型的变量
        let f = undefined
        // 定义一个null类型的变量
        let g = null
        // 定义一个对象类型的变量 数组是对象类型
        let h = [11, 'haha', 111n, null]
        // 定义一个对象类型的变量 对象也是对象类型 其中 成员是以键值对的形式储存
        let i = {
            name: 'Jack',
            age: 11
        }
        // 定义一个symbol类型的变量
        let j = Symbol()
        console.log(a)
        console.log(b)
        console.log(c)
        console.log(d)
        console.log(e)
        console.log(f)
        console.log(g)
        console.log(h)
        console.log(i)
        console.log(j)
        console.log(typeof Symbol())
    </script>
</head>
<body>

</body>
</html>

5.typeof运算符

typeof有两种表现形式：1.typeof(x) 2.typeof x

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 打印10的类型
        console.log(typeof 10)
        // 打印1.1的类型
        console.log(typeof 1.1)
        // 打印1n的类型
        console.log(typeof 1n)
        // 打印hello world的类型
        console.log(typeof 'hello world')
        // 打印true的类型
        console.log(typeof true)
        // 打印null的类型 这是历史遗留问题 为了兼容以前 所以该错误一致延续至今 但是官方文档明确表示null为null类型 而非object类型
        console.log(typeof null)
        // 打印对象的类型
        console.log(typeof {name: 'Jack', age: 11})
        // 打印Symbol()的类型
        console.log(typeof Symbol())
        // 打印a的类型
        let a
        console.log(typeof a)
    </script>
</head>
<body>

</body>
</html>

6.字符串

1.字符串的拼接

  • 方式一：通过+将若干个字符串拼接起来
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        const name = 'Jack'
        const age = 11
        console.log('my name is ' + name + ' and age is ' + age)
    </script>
</head>
<body>

</body>
</html>
  • 方式二：通过``配合${}的方式拼接字符串
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        const name = 'Jack'
        const age = 11
        console.log(`my name is ${name} and my age is ${age}`)
    </script>
</head>
<body>

</body>
</html>
  • 方式三：在方式二的基础上进行变种 即${}内支持简单的拼接、运算
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        console.log(`my name is ${'Ja' + 'ck'} and my age is ${5 + 6}`)
    </script>
</head>
<body>

</body>
</html>

2.字符串的遍历

  • 方式一
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        const str = 'Jack'
        for(const subStr of str){
            console.log(subStr)
        }
    </script>
</head>
<body>

</body>
</html>
  • 方式二
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        const str = 'Jack'
        for(let i = 0; i < str.length; ++i){
            console.log(str.charAt(i))
        }
    </script>
</head>
<body>

</body>
</html>

3.数组的遍历

  • 方式一
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        const arr = [1, 2, 3]
        for(const e of arr){
            console.log(e)
        }
    </script>
</head>
<body>

</body>
</html>
  • 方式二
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        const arr = [1, 2, 3]
        for(let i = 0; i < arr.length; ++i){
            console.log(i, arr[i])
        }
    </script>
</head>
<body>

</body>
</html>
  • 方式三
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        const arr = [1, 2, 3]
        arr.forEach((e, idx) => {
            console.log(idx, e)
        })
    </script>
</head>
<body>

</body>
</html>

4.对象的遍历

  • 方式一
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        const obj = {
            name: 'Jack',
            age: 11
        }
        for(const k in obj){
            console.log(k, obj[k])
        }
    </script>
</head>
<body>

</body>
</html>
  • 方式二
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        const obj = {
            name: 'Jack',
            age: 11
        }
        for(const k of Object.keys(obj)){
            console.log(k, obj[k])
        }
    </script>
</head>
<body>

</body>
</html>
  • 方式三
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        const obj = {
            name: 'Jack',
            age: 11
        }
        for(const entry of Object.entries(obj)){
            console.log(entry[0], entry[1])
        }
    </script>
</head>
<body>

</body>
</html>
  • 方式四
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        const obj = {
            name: 'Jack',
            age: 11
        }
        for(const v of Object.values(obj)){
            console.log(v)
        }
    </script>
</head>
<body>

</body>
</html>

7.常用API

你可以通过该教程查询相关类型的常用API

8.函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 定义一个加法函数
        function sum(a, b){
            return a + b
        }
        // 结果为30
        console.log(sum(10, 20))
    </script>
</head>
<body>

</body>
</html>
  • 函数的形参可以设置默认值(注意：数字类型和非数字类型运算的结果为NaN 即Not a Number)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function sum(x, y=10){
            return x + y
        }
        console.log(sum())
    </script>
</head>
<body>

</body>
</html>
  • 函数可以作为参数
    • 传递匿名函数(类似于Java中的匿名类)
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function test(func, a, b){
            console.log(func(a, b))
        }
        test(function (x, y){
            return x + y
        }, 10, 20)
    </script>
</head>
<body>

</body>
</html>
    • 传递箭头函数(类似于Java中的Lambda表达式)
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function test(func, a, b){
            console.log(func(a, b))
        }
        test((x, y) => {
            return x - y
        }, 10, 20)
    </script>
</head>
<body>

</body>
</html>
    • 箭头函数简化(当语句体中仅有一个语句时 省略大括号 如果是return语句的话 那么需要省略return)
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function test(func, a, b){
            console.log(func(a, b))
        }
        test((x, y) => x * y, 10, 20)
    </script>
</head>
<body>

</body>
</html>
  • 函数也可以作为返回值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function sum(x, y){
            return x + y
        }
        function test(){
            return sum
        }
        console.log(test()(10, 20))
    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function sum(x, y){
            return x + y
        }
        function test(){
            return sum(10, 20)
        }
        console.log(test())
    </script>
</head>
<body>

</body>
</html>

9.监听标签的点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function test(x, y){
            alert(x + y)
        }
    </script>
</head>
<body>
<button onclick="test(10, 20)">测试</button>
</body>
</html>

10.DOM

所谓的DOM 就是document object model 即文档对象模型 每一个html元素都相当于一个文档对象/节点(一个元素的内容 除了子元素节点以外 空白位置也会被当作文本节点看待) DOM操作就是对html中的节点进行增删改查操作

  • JavaScript中内置了document 通过它可以根据不同的方式获取节点
    • getElementById、getElementsByClassName两者的区别在于html中id是唯一的 而class是不唯一的 因此前者的结果仅仅只有一个对象 而后者可以获取多个对象
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function remove(){
            // 获取id为second的对象
            const li2 = document.getElementById('second')
            // 对其进行删除操作
            li2.remove()
        }
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li id="second">222</li>
    <li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>	

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function remove(){
            // 获取class为li的对象集合
            const lis = document.getElementsByClassName('li')
            // 将对象集合中的第二个节点删除
            lis[1].remove()
        }
    </script>
</head>
<body>
<ul>
    <li class="li">111</li>
    <li class="li">222</li>
    <li class="li">333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>
    • 我们可以为ul标签添加内容为文本的li标签
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function add(){
            // 获取ul对象
            const ul = document.getElementsByTagName('ul')[0]
            // 创建li对象
            const li = document.createElement('li')
            // 创建文本节点 为li对象设置内容
            const text = document.createTextNode('文本')
            // 文本节点添加到li中
            li.append(text)
            // 将li节点添加到ul中
            ul.append(li)
        }
    </script>
</head>
<body>
<ul></ul>
<button onclick="add()">添加</button>
</body>
</html>
  • 也可以通过document以选择器的方式获取指定的对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function remove(){
            const span = document.querySelector('div span')
            span.remove()
        }
    </script>
</head>
<body>
<div>
    <span>我是一个span</span>
</div>
<button onclick="remove()">删除</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function remove(){
            const lis = document.querySelectorAll('ul li')
            lis[0].remove()
        }
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function remove(){
            const li1 = document.querySelector('#first')
            li1.remove()
        }
    </script>
</head>
<body>
<ul>
    <li id="first">111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>
axihaihai
关注
  • 27
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
javaScript api
11-03
JavaScript API 是一种重要的编程资源，它为开发者提供了与JavaScript语言交互的接口和工具。这个离线版的JavaScript API 指南，以CHM（Compiled Help Manual）格式提供，是开发者学习和查阅JavaScript相关功能和...
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
19 JavaScript学习：调试
百锦再的博客
04-28 7万+
使用控制台：在浏览器的开发工中的控台输入代码实时查看的函数等信息，帮调试程序4. 使用调试工具一些开环境（）或者浏览器插件提供了专门的调试工具，如Chrome DevTools、Firefox Developer Tools等，可以更，开发者可以发的错误，并及时修复，代码质量和开发效率。使用断点：在浏览器的开发者工具中设置断点，当程序执行到断点处时暂停执行，开发者可以查看当前变量的值、调用栈等信息，帮助定位问题。关键字可以手动触发断点，不需要依赖开发者工具中的设置断点功能，方便在代码中灵活地进行调试。
10 JavaScript学习：函数
百锦再的博客
04-23 7万+
使用 function 关键字：// 函数体使用函数表达式：// 函数体使用箭头函数（ES6）：// 函数体// result 等于 5// result 等于 6。
学习JavaScript这一篇就够了
热门推荐
轻松的小希
11-25 76万+
目录第一章 JavaScript简介1.1、JavaScript的起源1.2、JavaScript的组成1.3、JavaScript的特点1.4、JavaScript的使用1.4.1、标签引用1.4.2、文件引用1.5、JavaScript的输出1.5.1、页面输出1.5.2、控制台输出1.5.3、弹出窗口输出1.6、JavaScript的注释1.6.1、单行注释1.6.2、多行注释第二章 JavaScript基础语法2.1、标识符2.2、字面量和变量2.2.1、字面量2.2.2、变量2.3、数据类型2.3
JavaScript详解
weixin_48373085的博客
01-25 2万+
HTML对象，定时器，表单验证，正则表达式
JavaScript简介
wsdhy_的博客
04-02 4457
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言 脚本语言：最开始从 Script 单词翻译过来的。 java、c、c## c++ 都是非脚本语言 脚本和非脚本语言的区别：在于执行方式。 脚本语言：直接浏览器解析执行。 非脚本的：有一个先编译的过程。会生成中间的可执行代码文件。 动态语言：解释执行JavaScript代码的时候才去确定数据的类型。 弱类型语言： 1：变量的类型由实际的数值来确定。任何的变量可以保存任意的数据的类型。 2：不同数据...
03 JavaScript学习：浏览器中执行 JavaScript
百锦再的博客
04-19 6万+
我比较习惯Chrome浏览器。Chrome 是由 Google 开发的免费网页浏览器，调试代码非常方便。Chrome 官网地址：https://www.google.com/intl/zh-CN/chrome/。
26 JavaScript学习：JSON和void
百锦再的博客
05-03 8万+
在 JavaScript 中，JSON 格式是一种常见的数据交换格式，它与 JavaScript 对象有着相似的结构，但在一些细节上有所不同。在 JSON 中，每个键值对由一个名称和一个值组成，名称是一个字符串，值可以是字符串、数字、布尔值、Null、数组或嵌套对象等不同类型的数据。是一个特殊的表达式，通常用于在 href 属性中作为超链接的 URL，以防止页面跳转。在 JavaScript 中，可以使用内置的 JSON 对象提供的方法将 JSON 字符串转换为 JavaScript 对象。
JavaScript JavaScript JavaScript
06-26
JavaScript JavaScript JavaScript
JavaScript实例大全
12-19
这个压缩包“JavaScript实例大全”显然是一份集合了多种JavaScript相关资源的宝典，包括“JavaScript网页设计300例”、“javascript源码大全”以及“jquery 1.7 中文 api 修正版”。 首先，“JavaScript网页设计300...
JAVASCRIPT HashTable
10-31
JAVASCRIPT HashTable
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 462
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Next.js静态导出与动态路由优化
天涯学馆
07-20 1069
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1174
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 1025
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

axihaihai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值