不是怎么还在转啊...

002-JavaScript

JavaScript

  • JavaScript（简称JS）是一门跨平台、面向对象的脚本语言（就是不用编译直接运行的语言），是用来控制网页行为，实现页面的交互效果

  • JavaScript和Java时完全不同的语言，不论是概念还是设计。但是基础语法类似

  • 组成

    • ECMAScript：规定了JS基础语法和新知识，包括变量、数据类型、流程控制、函数、对象等
    • BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等
    • DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等

JS核心语法

JS引入方式

  • 内部脚本：将JS代码定义在HTML页面中

    • JS代码必须位于 <script> </script> 标签之间

    • 在HTML文档中，可以在任意地方，防止任意数量的<script>

    • 一般会把脚本置于<body> 元素的底部，可以改善显示速度

      image-20250818174029899

  • 外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

    image-20250818174337380

基础语法

变量&常量

  • JS中用let关键字来声明变量（弱类型语言，变量可以存放不同类型的值）

  • 变量名需要遵循如下规则（和Java基本一致）：

    • 只能用字母、数字、下划线、美元符号组成，且数字不能开头
    • 变量名严格区分大小写，如name和Name时不同的变量
    • 不能使用关键字做变量，如：let、var、if、for

  • JS中用const关键字来声明常量

    • 一旦声明，常量的值就不能改变（不可以重新赋值）

      image-20250818175035294

输出语句

  • alert(a)：弹出框（实际上是window.alert()，window可省略）
  • console.log(PI)：输出到浏览器控制台（F12可查看）（打一个log回车可快速生成）
  • document.write(PI)：输出到body区域（不常用）

数据类型

  • JavaScript的数据类型分为：基本数据类型和引用数据类型（对象）

  • 基本数据类型：

    • number：数字
    • boolean：布尔，true、false
    • null：对象为空。JS是大小写敏感的，因此null、Null、NULL是完全不同的
    • undefined：当声明的变量未初始化时，该变量的默认值是undefined
    • string：字符串：字符串，单引号、双引号、反引号（大键盘上的tab上方，反引号和波浪线在同一个键上）皆可，推荐使用单引号

  • 获取数据类型

    • 使用typeof运算符

      image-20250818180221187

      image-20250818180547303

  • 模板字符串语法

    • ``   // 反引号，大键盘上的tab上方，反引号和波浪线在同一个键上

    • 内容拼接变量时，使用${} 包住变量

      image-20250818180905903

函数

  • 介绍：函数（function）是被设计用来执行特定任务的代码块，方便程序的封装复用

  • 定义具名函数：JS中的函数是通过function关键字进行定义，语法为：

    image-20250818202708811

    • 弱类型语言，不需要指定形参和返回值的类型

  • 调用具名函数：函数名称(实际参数列表)

    image-20250818202757380

    • 参数填多了也没关系，多出来的参数会被忽略掉

  • 定义匿名函数：匿名函数是指一种没有名称的函数，可以通过两种方式定义：函数表达式和箭头函数

    image-20250818203152494

    • 此时，前面的变量add就成为了函数名

  • 调用匿名函数：通过变量名直接调用

    image-20250818203300439

自定义对象

  • 定义格式

    image-20250818203628250

  • 定义函数时可以省略冒号和function

    image-20250818203733300

  • 调用格式

    image-20250818203800495

  • 注意：在箭头函数中，this并不指向当前对象，而是指向当前对象的父级！！！（直接定义对象，其父级是全局对象window），不推荐使用这种方法定义对象内函数

    image-20250818204252308

json

  • 概念：JavaScript Object Notation，JavaScript对象标记法（JS对象标记法书写的文本）

  • 由于其语法简单，层次结构鲜明，现多用于数据载体，在网络中进行数据传输

    image-20250818204714949

  • JS对象和json本质上完全不一样，JS对象是对象，json本质上就是字符串

    image-20250818204747824

  • 示例

    image-20250818205001366

    image-20250818205039438

DOM

  • 概念：Document Object Model，文档对象模型

  • 将标记语言的哥哥组成部分封装成对应的对象

    • Document：整个文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象

    image-20250819192036446

DOM操作

  • DOM操作核心思想：将网页中所有的元素当做对象来处理。（标签的所有属性在该对象上都可以找到）

  • 操作步骤：

    • 获取要操作的DOM元素对象
    • 操作DOM对象的属性或方法（不建议还在MDN查，建议在W3School中查询）

  • 获取DOM对象

    • 根据CSS选择器来获取DOM元素，获取匹配到的第一个元素：document.querySelector('选择器')
    • 根据CSS选择器来获取DOM元素，获取匹配到的所有元素：document.querySelectorAll('选择器')
      • 注意：得到的十一个NodeList节点集合，是一个伪数组（就是有长度、有索引，的数组，但没有操作方法）

  • 示例

    image-20250819193119428

  • 早期的获取DOM对象方式

    image-20250819193228636

事件监听

  • 事件：HTML事件是发生在HTML元素上的“事情”。比如：

    • 按钮被点击
    • 鼠标移动到元素上
    • 按下键盘按键

  • 事件监听：JavaScript可以在事件触发时，就立刻调用一个函数作出相应，也称为事件绑定或注册事件

  • 语法（新版）：事件源.addEventListener('事件类型'， 事件触发执行的函数);

    • 可以多次绑定同一事件，绑定的事件都会触发

    image-20250819193724847

  • 事件监听三要素

    • 事件源：那个DOM元素出发了事件，要获取dom元素
    • 事件类型：用什么方式触发，比如：鼠标单击 click
    • 事件触发执行的函数：要做什么事

  • 早期版本写法（仅了解）：事件源.on事件 = function() {...}

    • 多次绑定同一事件，后面的事件会覆盖前面的事件

    image-20250819194114226

常见事件

鼠标事件

  • click：鼠标点击
  • mouseenter：鼠标移入
  • mouseleave：鼠标移出

键盘事件

  • keydown：键盘按下触发
  • keyup：键盘抬起触发

焦点事件（例如点一下输入框就聚焦在输入框了）

  • focus：获得焦点触发
  • blur：失去焦点触发

表单事件

  • input：用户输入时触发
  • submit：表单提交时触发

JS模块化

  • js文件内导包

    • 被导出的函数要加export关键字

    image-20250819200238755

    • 导入的位置用import关键字导入，大括号中可以填多个内容

      image-20250819200626089

  • html文件内导入js文件

    • 如果js文件使用了export和import等关键字，那么就形成了模块化的js文件，此时导入html中需要指定type为"module"

    image-20250819200410844

posted @ 2025-08-23 15:55  Quirkygbl  阅读(8)  评论(0)    收藏  举报