【黑马JavaWeb入门之JavaScript】

最新推荐文章于 2026-08-14 16:20:15 发布

原创最新推荐文章于 2026-08-14 16:20:15 发布 · 1k 阅读

29 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

JS核心语法

简介

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成如下：

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

备注：ECMA国际（前身为欧洲计算机制造商协会），制定了**标准化的脚本程序设计语言 ** ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。

JS引入方法

JS的引入有两种方法，一是内部脚本，二是外部脚本。

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

JavaScript代码必须位于
一般会把脚本置于 元素的底部，可改善显示速度

<body>
    ......
    <script> alert('Hello JS') </script> 
</body>

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

外部JS文件中，只包含JS代码，不包含

alert('Hello JS') //写在js/demo.js文件中

引入外部js

<script src="js/demo.js"></script>

JS基础语法

输出语句

alert(…)	警告框
document.write(…)	在HTML输出内容，即浏览器body区域（不常用）
console.log(…)	写入浏览器控制台

变量

JS中主要通过 let 关键字来声明变量的。
JS是一门弱类型语言，变量是可以存放不同类型的值的。

变量a既可以存数字，也可以存字符串。

let a=20;
a="hello"

备注：在早期的JS中，声明变量还可以使用 var 关键字来声明，但不严谨，可被重复声明。

常量

使用const关键字，一旦声明，常量的值就不能改变（不可以重新赋值）。

<script> //常量 
    const PI = 3.14; 
    PI = 3.15; 
    alert(PI); 
</script>

若更改常量值，打开浏览器控台，发现报错，该错误就表示，常量不可以被重新分配值。
在这里插入图片描述

在这里插入图片描述

数据类型

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

基本数据类型

number	数字（整数、小数、NaN(Not a Number)）
string	字符串，单双引(‘…’)、双引号(“…”)、反引号(`…`)皆可，正常使用推荐单引号
boolean	布尔。true，false
null	对象为空。 JavaScript 是大小写敏感的，因此 null、Null、NULL是完全不同的
undefined	当声明的变量未初始化时，该变量的默认值是 undefined

使用反引号引起来的字符串，也称为模板字符串,内容拼接时，使用 ${ } 来引用变量,可简化拼接字符和变量的写法
typeof关键字可以返回变量的数据类型

<script>
    //1. 数据类型
    alert(typeof 10); //number
    alert(typeof 1.5); //number
   
    alert(typeof true); //boolean
    alert(typeof false); //boolean
    alert(typeof "Hello"); //string
    alert(typeof 'JS'); //string
    alert(typeof `JavaScript`); //string
    alert(typeof null); //object
    let a ;
    alert(typeof a); //undefined
    //2. 模板字符串 - 简化字符串拼接
    let name = 'Tom';
    let age = 18;
    console.log('我是'+name+', 我今年'+age+'岁');
    console.log(`我是${name}, 我今年${age}岁`);
  </script>

函数

函数（function）是被设计用来执行特定任务的代码块，方便程序的封装复用。
1.具名函数

具有函数名

如下方法定义

function 函数名(参数1,参数2..){
    要执行的代码
}

示例：

function add (a,b) {
    return a+b;
}
let result=add(10,20);//函数调用
alert(result);

注意：由于JS是弱类型语言，形参、返回值都不需要指定类型。在调用函数时，实参个数与形参个数可以不一致，但是建议一致。

2.匿名函数

是指一种没有名称的函数，由于它们没有名称，因此无法直接通过函数名来调用，而是通过变量或表达式来调用。

//函数表达式
let add=function(a,b){
    return a+b;
}
let result = add (100,200);

把function省略掉，变成箭头型函数

//箭头函数
let add=(a,b)=>{
    return a+b;
}
let result =add(1000,2000);

上述匿名函数声明好后，函数赋值给add变量，通过add函数可以直接调用

3.自定义对象
语法格式

let 对象名 = {
    属性名1: 属性值1,//属性间用逗号分隔
    属性名2: 属性值2,
    属性名3: 属性值3, 
    方法名称:function(形参列表){}//function可省略
};

示例：

let user = {
      name:'Tom',
      age:18,
      gender:'男',
      sing(){
        alert(this.name + '悠悠的唱着最炫的民族风~')
      }
    }

user.name //属性调用;
user.sing();//方法调用

4.JSON

JSON对象：JavaScript Object Notation，JavaScript对象标记法。JSON是通过JavaScript标记法书写的文本。格式如下：

{ "key":value, "key":value, "key":value }

key必须使用引号并且是双引号标记，value可以是任意数据类型,当value为字符串型时，需要用双引号标记。
由于JSON语法简单，层级结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
API说明

JSON.stringify(…)	将js对象，转换为json格式的字符串
JSON.parse(…)	将json格式的字符串，转为js对象

示例：

let person = {
      name: 'itcast',
      age: 18,
      gender: '男'
    }
    alert(JSON.stringify(person)); //js对象 --> json字符串
    let personJson = '{"name": "heima", "age": 18}';
    //外部的单引号表示这是一个字符串，若无，JavaScript会尝试解析 {} 作为代码块或对象字面量，而不是字符串
    alert(JSON.parse(personJson).name);//json字符串 --> js对象

DOM

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。封装对象分为：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象

html内容

</html>
<html>
  <head>
    <title>DOM</title>
  </head>
  <body>
    <h1>DOM对象标题</h1>
    <a href="#">你好</a>
  </body>
</html>

DOM树
在这里插入图片描述

DOM的作用：
- 改变HTML元素内容
- 改变HTML元素样式CSS
- 对HTML DOM事件做出反应
- 添加和删除HTML元素
获取DOm对象
- document.querySelector(‘CSS选择器’);//获取第一个元素
- document.querySelectorAll(‘CSS选择器’)；

注意：第二种方法获得的所有元素，会封装到一个NodeList节点集合中，是一个伪数组（有长度、有索引的数组，但没有push、pop等数组方法）

let h1 = document.querySelector('h1'); 
let hs =document.querySelectorAll('h1');
// 调用DOM对象中属性或方法 
hs[0].innerHTML = '修改后的文本内容';

可查看DOM对象的网站 W3school

JS事件监听

事件介绍

事件：HTML事件是发生在HTML元素上的 “事情”。
- 按钮被点击
- 鼠标移到元素上
- 输入框失去焦点
- 按下键盘按键
事件监听：JavaScript可以在事件触发时，就立即调用一个函数做出响应，也称为事件绑定或者注册事件。

事件监听语法

事件监听语法和三要素：
- 事件源: 哪个dom元素触发了事件, 要获取dom元素
- 事件类型: 用什么方式触发, 比如: 鼠标单击 click, 鼠标经过 mouseover
- 要执行的函数: 要做什么事

事件源.addEventListenner('事件类型',要执行的函数);

实例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS事件</title>
</head>
<body>
    <input type="button" id="btn" value="按钮">
    <script>
        //事件监听 - addEventListener (可以多次绑定同一事件)
        document.querySelector('#btn').addEventListener('click', () => {
            console.log('按钮被点击了11');
        });
        document.querySelector('#btn').addEventListener('click', () => {
            console.log('按钮被点击了22');
        });
    </script>
</body>
</html>

常见事件

鼠标事件	click: 鼠标点击，mouseenter:鼠标移入，mouseleave:鼠标移出
键盘事件	keydown:键盘按下触发，keyup:键盘抬起触发
焦点事件	focus:获得焦点触发，blur:失去焦点触发
表单事件	input:用户输入时触发，submit:表单提交时触发

JS程序优化

为了便于维护和开发，可将HTML中的JS代码单独写成一个JS文件并在HTML中引入

示例：HTML文件中对JS文件的引入

<!-- type="module" 模块化JS -->
    <script src="./js/eventDemo.js" type="module"></script>

若JS文件中的JS代码有大量相同和重复的逻辑，可以另外定义一个工具类的JS文件，将其引入

示例：eventDemo.js

import{printLog} from "./util.js";//使用import进行引入
document.querySelector('#b2').addEventListener('click', () => {
            printLog("我被点击了...");
        })

示例：util.js

//要想被正常引入，需要将函数使用export暴露出去
export function printLog(msg) {
    console.log('msg');
}

注：本篇文章是基于黑马程序员的《JavaWeb+AI》b站课程做的学习笔记

标签

#javascript #开发语言 #ecmascript