JavaScript学习记录-CSDN博客

本文链接：https://blog.csdn.net/qq_45515301/article/details/119575423

这篇博客深入介绍了JavaScript作为客户端脚本语言的基础知识，包括ECMAScript标准、变量、数据类型、运算符、流程控制和函数。此外，还详细讨论了DOM操作，如获取元素、修改内容和样式，以及BOM（浏览器对象模型），如window对象、location、history和navigator。最后，文章提到了事件监听和HTMLDOM的相关概念，展示了如何实现简单的交互和动态效果。

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

JavaScript

客户端脚本语言
JavaScript = ECMAScript + BOM + DOM

ECMAScript

客户端脚本语言的标准

与html结合方式

内部定义
- 使用script标签
外部定义
- 通过src属性引入外部js文件
示例

<!DOCTYPE html>
<html lang="en">
<!-- script可在任意地方写，但是script在head中则先执行，
在body中则head执行完才执行 -->

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
	<!-- 内部方式 -->
    <script>
        alert("hello world");
        //注释
    </script>
    
    <script src="js_0.js"></script><!-- 外部方式-->
</body>

</html>

注释

单行注释：//
多行/**/

数据类型

原始数据类型(基本数据类型)
- number:数字(整数，小数，NaN)（NaN 不是一个数字的数字类型）
- string:字符串
- boolean
- null 空的占位符
- undefined：未定义。如果一个变量没有给初始化值，则会默认赋值为undefined
引用数据类型：对象

变量

js为弱类型语言：在开辟变量存储空间时不定义空间将来存储数据类型
var 变量名 = 初始化值;

<script>
        // var a = 3
        // alert(a);
        // a = "abb";
        // alert(a);
        //alter是输出一个弹框
        var num0 = 1;
        var num1 = 1.1;
        var num2 = NaN;
        //document.write()为输出语句
        document.write(num0 + "</br>");
        document.write(num1 + "</br>");
        document.write(num2 + "</br>");
</script>

运算符

一元运算符：只有一个运算数的运算符 ++ –
算数运算符
赋值运算符 = += -=
比较运算符 ===(全等于)
逻辑运算符 && || ！
三元运算符？：判断表达式的值，真为1，假为2
注意：类型不同时做运算，会先进行类型转换

特殊语法

使用var关键字定义的变量是局部变量，不用的话是全局变量（不常用）

流程控制语句

同Java
switch中的case判断可以是不同的类型的判断条件

案例

//js_1.js
var num = 1;
var count = 1;
// document.write("<table border = '1' align = 'center'>");
document.write("<table align = 'center'>");
for (num = 1; num <= 9; num++) {
    document.write("<tr>");
    for (count = 1; count <= num; count++) {
        document.write("<td>");
        document.write(num + "*" + count + "=" + num * count + "   ");
        document.write("</td>");
    }
    // document.write("<br>")
    document.write("</tr>")
}

<!DOCTYPE html>
<html lang="en">
<style>
    td {
        border: 1px solid;//css写边框
    }
</style>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <script src="js_1.js"></script>
</body>
</html>

对象

Fuction

函数(方法)对象
创建

//法一
var fun = new Fuction(形参列表，方法体);
//不常用

//法二
function 方法名称(形参){
	方法体;
}

//法三
var 方法名 = function(形参){
	方法体;
}

方法
属性
- length：形参个数
特点
- 方法定义时形参的类型不用写，返回值不需在方法定义中设置返回类型
- 方法是一个对象，如果名称相同，则会覆盖
- js中，方法的调用只与方法的名称有关，和参数列表无关
- 在方法声明中有一个隐藏的内置对象(数组),arguments封装所有实际参数
示例

function count(a, b) {
    alert(a + b);
}
// count(1, 2);

var count1 = function (a, b) {
    alert(a + b);
}
// count(2, 3);

function add() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {//这里arguments.length则为传入形参个数
        // document.write(arguments[i]);
        sum += arguments[i];
    }
    return sum;
}
var m = add(1, 2, 3, 4, 5, 6);
// document.write(m);
alert(m);
// add(1, 2, 3, 4, 5);

array

创建

//法一
var arr = new Array(元素列表);
//法二
var arr = new Array(默认长度)
//法三
var arr = [元素列表]

方法
- join(参数)：将数组中的元素按指定分割符拼接成字符串，默认逗号
- push(参数)：添加参数在末尾
属性
- length表示数组的长度
特点
- 数组中元素类型可变
- 数组长度可变
示例

var arr1 = new Array(1, 2, 3);
document.write(arr1 + "<br>");

var arr2 = new Array(2);
arr2[1] = 12;
document.write(arr2 + "<br>");

// var arr3 = new Array[1, 2, 3, 4];
// document.write(arr3 + "<br>");

var arr4 = ["asd", 1, true];//类型可变，但是注意是中括号
document.write(arr4[1] + "<br>");
document.write(arr4 + "<br>");//默认输出为一个字符串，都拼接在一起
document.write(arr4.join("-") + "<br>")
arr4.push("mt");
document.write(arr4.join("-") + "<br>")
//输出结果：
/**1,2,3
  *,12
  *1
  *asd,1,true
  *asd-1-true
  *asd-1-true-mt */

Date

日期类

创建

var date = new Date();

方法
- tolocaleString()：返回日期本地形式的字符串
- getTime()：返回当前毫秒值

Math

数学对象

创建
- Math对象不用创建，直接使用
方法
- random() 返回介于0和1之间一个数，含0不含1
- round(数) 约数
- ceil(数) 向上舍入
- floor(数) 向下舍入

RegExp

正则表达式对象
正则表达式：定义字符串的组成原则
1. 单个字符 [] 如 [a]
  - \d:单个数字字符
  - \w：单个单词字符
2. 量词符号
  - ? 表示出现0次或1次
  - * 出现0次或多次
  - + 出现1次或多次
  - {m,n} m<= 数量 <=n,若m或n没有则表示最少或最多
正则对象
1. 创建

	var reg = new RegExp("正则表达式");
    var reg = /正则表达式/;

示例

var reg = new RegExp("^\\w{6,12}$");
// 这里前面的\表示转义,^和$表示开始和结尾
var reg1 = /^\w{6,12}$/;
// 这种常用
alert(reg);
alert(reg1);

var uname = "asdfghjkl";
var flag = reg.test(uname);
// test函数检测字符串是否符合要求
document.write(flag);

Global

全局对象，里面的方法不需要对象可以直接调用
方法
- encodeURI() url编码
- decodeURL() url解码
- encodeURIComponent() 编码
- dencodeURIComponent() 解码
- parseInt() 将括号中内容转成数字，逐一判断数字直至非数字
- isNaN() 判断一个值是否为NaN
- eval() 将js字符串转成脚本来执行
示例

var uname = "江苏";
var en = encodeURI(uname);
document.write(en + "<br>");
var den = decodeURI(en);
document.write(den + "<br>");

var n = "123abd";
var num = parseInt(n);
document.write(num + "<br>");
//123

var n1 = "n123abd";
var num1 = parseInt(n1);
document.write(num1 + "<br>");
//NaN

var code = "alert(\"victory\")";
document.write(code);
eval(code);

BOM

浏览器对象模型，将浏览器各个组成部分封装成对象
组成
- window：窗口对象
- Navigator：浏览器对象
- Screen：显示器屏幕对象
- History：历史记录对象
- Location：地址栏对象

window对象

创建
方法
- alert() 显示带有信息的警告框，只有确定按钮
- confirm() 确认对话框，有确定和取消按钮，会返回true和false
- prompt() 显示可提示用户输入的对话框，会返回用户输入的值
- 开关浏览器
  - open() 打开一个新界面。也可以用一个var得到界面的对象，便于下面对其的控制关闭
  - clode() 关闭浏览器窗口，谁调用关闭谁
- 定时器有关的方法
  - setTimeout(方法,毫秒值)：指定毫秒后执行代码
  - setInterval(方法,毫秒值)：循环定时，每过毫秒执行一次。有返回值，用于取消定时
  - clearTimeout(对象)：取消定时，将setInterval得到一个对象放进来即可
属性
- 获取其他dom对象
特点
- 不需要创建，直接使用，window.方法名
- 其引用可省略
示例

开关浏览器

//开关浏览器
var k;
var f = document.getElementById("bt");
f.onclick = function () {
	k = open("www.baidu.com");
}

var m = document.getElementById("close");
m.onclick = function () {
	k.close();//谁调用关闭谁
}

轮播图

var m = 1;
var p = document.getElementById("pic");
var lunbo = function(){//假定有三张图片
	m++;
	if(m>3){
		m = 1;
	}
	p.src = "../img/banner_"+m+".jpg";
	
}
setInterval(lunbo,2000);//无参方法不可以带括号！！！

Location对象

地址栏对象
创建：location
location.href(“网址”) 可以跳转界面
案例：跳转首页

var t = 5;
var time = document.getElementById("time");
function jump(){
	t--;
	time.innerHTML = t+"";
	if(t==0){
		location.href = "http://www.baidu.com";
	}
}
setInterval(jump,1000);

History对象

history表示的是当前窗口开过的页面，而不是浏览器的历史记录

创建
- window.history
- history
方法
- back() 加载当前窗口中前一个url
- forward() 加载当前窗口中下一个url
- go(参数) 加载history列表中某个具体页面
  - 正数前进几个历史目录
  - 负数后退几个历史目录
属性
- length 返回当前窗口历史列表中的url数量

DOM

简单介绍

控制html文档内容
获取元素对象 document.getElementById(“id”)，看api手册看属性修改
修改标签体内容：innerHTML

var h = document.getElementById("title");
h.innerHTML = "hhhh";

事件
- 某些组件被执行了某些操作后，触发某些代码的执行
- 绑定事件
  - onclick属性，点击后触发。onclick后面相当于写了一条js代码，可以建一个js方法调用
  - js获取元素对象，设定事件属性(常用，好维护)
开关灯案例

var i = document.getElementById("pic");
var flag = false;
i.onclick = function(){
	if(flag){
		i.src = "../img/off.gif";
		flag = false;
	}else{
		i.src = "../img/on.gif";
		flag = true;
	}
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img id= "pic" src="../img/off.gif">
		<script src = "./开关灯.js"></script>
	</body>
</html>

DOM

核心DOM

Document：文档对象
1. 创建(获取)：在html dom模型中可以使用window对象来获取
2. window.document
3. document
- 方法：
  - 获取Element对象：
    1. getElementById() ：根据id属性值获取元素对象。id属性值一般唯一
    2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
    3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
    4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
  - 创建其他DOM对象：
    1. createAttribute(name)
    2. createComment()
    3. createElement()
    4. createTextNode()
Attribute:属性对象
1. setAttribute() 设置属性
2. removeAttribute() 删除属性
- 案例

var b1 = document.getElementById("button1");
var b2 = document.getElementById("button2");
// var s = document.getElementById("jump");
var s = document.getElementsByTagName("a")[0];
//使用标签名获得，因为返回的是数组，所以用的是第一个元素
//超链接只可在a标签中用，若是p标签则没有用
button1.onclick = function(){
	
	s.setAttribute("href","https://www.baidu.com");
}
button2.onclick = function(){
	
	s.removeAttribute("href");
}

Node：节点对象其他5个的父对象
- 特点：所有dom对象都可以被认为是一个节点
- 方法：
  1. appendChild()：向节点的子节点列表的结尾添加新的子节点。
  2. removeChild()：删除（并返回）当前节点的指定子节点。
  3. replaceChild()：用新节点替换一个子节点。
- 属性：
  - parentNode 返回节点的父节点。
- 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: 1px solid red;//对div边框做设置
			}
			#div1{
				width: 200px;
				height: 200px;
			}
			#div2{
				width: 100px;
				height: 100px;
			}
			#div3{
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<!-- <img id= "pic" src="../img/banner_1.jpg" width="100%"> -->
		<!-- <a id = "jump">点击跳跃</a> -->
		<!-- <input type="button" id = "button1" value="设置属性">
		<input type="button" id = "button2" value="删除属性"> -->
		<div id = "div1">
			div1
			<div id = "div2">div2</div>
		</div>
		<!-- 当前div2是div1的子节点 -->
		<a id = "del" href = "javascript:void(0);">点击删除div2</a>
		<a id = "add" href = "javascript:void(0);">点击添加div3</a>
		<!-- 这里的a标签由于href没写，默认是当前页面，所以点击后页
		面没有变化，如果用button则功能正常 -->
		<!-- 需要在href中写"javascript:void(0);"才可保留其可点击
		的属性，但不进行超链接的跳转 -->
		<!-- <script src = "./增删节点.js"></script> -->
		<script>
		var del = document.getElementById("del");
		del.onclick = function(){
			var div1 = document.getElementById("div1");
			var div2 = document.getElementById("div2");
			div1.removeChild(div2);
		}
		var add = document.getElementById("add");
		add.onclick = function(){
			var div1 = document.getElementById("div1");
			var div3 = document.createElement("div");
			div3.setAttribute("id","div3");
			div1.appendChild(div3);
		}
		</script>
	</body>
</html>

HTML DOM

标签体的设置和获取：innerHTML

var div = document.getElementById("div1");
var innerhtml = div.innerHTML;
div.innerHTML = "<input type = 'button'>";
//这里的innerHTML即为标签体，可以直接修改它，也可以用+=添加东西

控制元素样式
- style属性设置
- 提前定义类选择器的样式，通过元素classname来控制。在css中写

var div = document.getElementById("div1");
div.onclivk = function(){
	div.style.border = "1px solid red";
}
div.onclivk = function(){
	div.className = "d1";//d1为一个css样式
}

事件监听机制

某些组件被执行了某些操作后，触发某些代码的执行
常见的事件：
- 点击事件：
  1. onclick：单击事件
  2. ondblclick：双击事件
- 焦点事件
  1. onblur：失去焦点
  2. onfocus:元素获得焦点。
- 加载事件：
  1. onload：一张页面或一幅图像完成加载。
- 鼠标事件：
  1. onmousedown 鼠标按钮被按下。
  2. onmouseup 鼠标按键被松开。
  3. onmousemove 鼠标被移动。
  4. onmouseover 鼠标移到某元素之上。
  5. onmouseout 鼠标从某元素移开。
- 键盘事件：
  1. onkeydown 某个键盘按键被按下。
  2. onkeyup 某个键盘按键被松开。
  3. onkeypress 某个键盘按键被按下并松开。
- 选择和改变
  1. onchange 域的内容被改变。
  2. onselect 文本被选中。
- 表单事件：
  1. onsubmit 确认按钮被点击。
  - 返回false不提交，true提交
  1. onreset 重置按钮被点击。