03 JavaScript基础入门

最新推荐文章于 2026-06-22 12:20:53 发布

原创最新推荐文章于 2026-06-22 12:20:53 发布 · 1.1k 阅读

22 ·

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

GEO检测

标签

#javascript

web开发专栏收录该内容

7 篇文章

订阅专栏

本文介绍了JavaScript的基本概念，包括其在网页开发中的作用，HTML、CSS与JavaScript的关系，以及JavaScript的基础语法、DOM对象（如获取元素、事件处理等）和BOM对象（如Window对象和存储API）的使用。

文章目录

一、JavaScript介绍
二、基础语法
三、DOM对象
四、BOM对象
- 1. Window对象
- 2. 存储对象

一、JavaScript介绍

1. 简介

JavaScript是一种广泛应用于网页开发的脚本语言。
它是一门客户端脚本语言，可以在网页上动态地修改HTML和CSS，并且可以实现与用户的交互。
JavaScript的语法和基本结构与Java类似，但是它是一门完全独立于Java的语言。
JavaScript拥有丰富的第三方库和框架，如jQuery、React、Angular等，可以大大简化开发过程。

HTML、CSS、JavaScript的关系
HTML：重在内容的组织，它用各种标签将页面中的元素组织起来，告诉浏览器该如何显示其中的内容。
CSS：重在内容样式的美化，负责HTML页面中元素的展现及排版。
JavaScript：重在内容之间的交互，使静态的HTML具有一定的交互行为。
JavaScript 的组成
JavaScript 语法。
DOM：页面文档对象模型，对页面中的元素进行操作。
BOM：浏览器对象模型，对浏览器窗口进行操作。

3. HTML引入方式

外部引入

<script src="JS文件路径"></script>

内部引入

<script>
JS具体内容，下面的例子都是内部引入
</script>

行内引入

<input type="button" value="button" onclick="alert('button')">

二、基础语法

1. 输入输出

弹出输入框

prompt("请输入:");

HTML页面效果
弹出警告框

alert("警告框");

HTML页面效果
控制台打印一个日志（F12调试器）

console.log("控制台日志");

2. 数据类型

var a = 10;    				// 数字
var b = '字符串';    		// 字符串
var c = true;    			// boolean
var d = undefined;    		// 未定义的值
var e = null;    		  	// 空值
var arr = [a, b, c];		// 数组, 不要元素类型相同
arr.push("test");			// 数组, 追加元素
console.log(a,b,c,d,e,arr[0],arr.length);
arr.splice(3, 1);			// 数组, 从下标开始删除几个元素
console.log(arr);
console.log(isNaN(b));		// 判断是否数字
console.log(b.length);		// 字符串长度

控制台日志

3. 运算符

算术运算符：+ - * / %
赋值运算符：= += -= /= %=
比较运算符： < > != ==（会进行类型转换）===（不会进行类型转换）
逻辑运算符：&& || !

4. 流程控制

if (条件1) {
    语句1
} else if (条件2) {
    语句2   
} else {
    语句3
} 
while (条件) {
    循环体;
}
for (表达式1; 表达式2; 表达式3) {
 循环体;
}

5. 函数

function 函数名(形参列表) {
    函数体;
    return 返回值;
}
返回值 = 函数名(实参列表);

6. 对象

使用 { } 创建对象

var role = {
	role_id: "id",
	name: "角色名称",
	status: true,
	sort: 1,
    getName: function() {
        console.log(role.name);
   },
};
console.log(role.name);
role.getName();

使用构造函数创建对象

function role(name,status,sort) {
    this.name = name;
    this.status = status;
    this.sort = sort;
}
var obj = new role("角色名称",true,1);
console.log(obj);

三、DOM对象

DOM对象提供了一种编程接口，使得开发者可以使用JavaScript等脚本语言来操作HTML和XML文档。
DOM将文档表示为一个树形结构，树中的每个节点都代表文档的一部分，包括元素、属性和文本。

1. 获取元素

querySelector

<h2>测试页面</h2>
<script>
    var elem = document.querySelector('h2');
    elem.innerText = 'test';
    console.log(elem);
</script>

querySelectorAll

<h2>测试页面1</h2>
<h2>测试页面2</h2>
<script>
    var elems = document.querySelectorAll('h2');
    elems[0].innerText = 'test';
    console.log(elems);
</script>

2. 事件

事件触发浏览器中的行为，包含：窗口事件、表单事件、键盘事件、鼠标事件等。

鼠标事件

<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    btn.ondblclick = function() {
        alert("双击鼠标");
    }
</script>

键盘事件

<input type="text" id="inp">
<script>
    var inp = document.getElementById('inp');
    inp.onkeydown = function() {
        alert("文本框内按下键盘");
    }
</script>

3. 操作元素

修改元素内容

<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function() {
        btn.innerText = 'test';
    }
</script>

4. 操作节点

创建节点

<div class="container"></div>
<script>
    var h2 = document.createElement('h2');
    h2.innerHTML = '新建标题';
    document.querySelector('.container').appendChild(h2);
</script>

删除节点

child = document.querySelector('.container').removeChild(h2);

四、BOM对象

BOM对象提供了与浏览器窗口进行交互的接口，其核心对象是 window。

1. Window对象

Window对象表示浏览器中打开的窗口。
如果文档包含框架（iframe标签），浏览器会为HTML文档创建一个window对象，并为每个框架创建一个额外的window对象。

function openWin(){
    myWindow = window.open('','');
    myWindow.document.write('新窗口');
    myWindow.document.write('<br>屏幕窗口的x坐标: ' + myWindow.screenLeft);
    myWindow.document.write('<br>屏幕窗口的y坐标p: ' + myWindow.screenTop);
}
openWin();

2. 存储对象

Web存储API提供了sessionStorage和localStorage两个存储对象来对网页的数据进行添加、删除、修改、查询操作。
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

<h2 id="h2name">测试页面</h2>
<script>
	localStorage.setItem("name", "test");
	document.getElementById("h2name").innerHTML = localStorage.getItem("name");
</script>