JavaScript

这玩意儿是昵称 · 2024-10-14 · 次阅读

JS

Ⅰ.显示数据

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

1.window.alert()

这之中可以进行运算，如果输出不是字符，可以不要”“

操作HTML元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

例如：

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p> //使用标签来获取
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>         //注意这是一个覆盖操作，js对大小写很敏感

2.document.write()

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

网页加载后输出流就已经停止，重新调用document.write()就会发生覆盖，

事实上write方法会隐性调用open方法写一个新的文档（所以要加标签），如果强制使用close方法，会直接输出所有缓存的输出内容，理论上一旦调用了close方法，就不能在用write，这样也会覆盖

3.console.log()

其中为输出的变量，这是写在控制台用于调试（F12），不会出现在网页上

Ⅱ.语法

//注释方法同C语言

1.字面量

数字（Number）

可以是整数或者是小数，或者是科学计数(e)，输出时不会使用科学计数法

字符串（String）

可以使用单引号或双引号:

表达式

用于计算： 比如1/1

数组（Array）

定义一个数组：[]

定义方法：

var cars=new Array();
cars[0]="Saab";    //数组的寻址从0开始,可以创建空数组
cars[1]="Volvo";
cars[2]="BMW";
//或者
var cars=new Array("Saab","Volvo","BMW");
//再或者
var cars=new Array("Saab","Volvo","BMW");
//最简单的
var cars=["Saab","Volvo","BMW"];

注意：typeof不能区分数组和对象，都会输出对象，要用：

if(car instanceof Array){
document.write("是数组")
}

对象（Object）字面量

定义一个对象： {firstName:”John”, lastName:”Doe”, age:50, eyeColor:”blue”}

定义方法：

var person={firstname:"John", lastname:"Doe", id:5566};
//或者
var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};                       //其实就是无所谓折行
//或者
var people = new Object();
people.name = 'Tom';   
people.age = 21;  
people.eat = function(){  } //追加属性和方法

寻址方式：

name=person.lastname;
name=person["lastname"];
函数（Function）

定义一个函数： function myFunction(a, b) { return a * b;}

带参数的变量使用：

<p>点击这个按钮，来调用带参数的函数。</p> 
<button onclick="myFunction('Harry Potter','Wizard')">
点击这里        //可以发送任意多的参数，变量接受参数时是按顺序的
</button> 
<script> 
function myFunction(name,job){      //参数要作为变量声明
alert("Welcome " + name + ", the " + job); 
} 
</script>

带有返回值的函数：和C一样 return 变量;

注意： 整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。

如果只是想退出函数，不继续执行，那么return可以不带任何参数

2.变量

<script>
var length;              //不管什么类型，都是用var
length = 6;
document.getElementById("demo").innerHTML = length;
    //只会获取第一个出现的
</script>

//undefined 和 [null](用于清空变量，var a=null)

如果在判断之后输出，都会是undifined

//字面量是不可变的运算符同样可以出现在赋值中

//和python一样，变量是动态类型，可以使用typeof()来查看变量类型

//存在布尔量,写为var x=true/false;

运算符
类型 实例 描述
赋值，算术和位运算符 = + - * / 在 JS 运算符中描述
条件，比较及逻辑运算符 == != < > 在 JS 比较运算符中描述

function用于定义函数在{}之间的会一并执行

js会忽略多余的空格，可以随便加以提高可读性

可以在字符串中使用\折行，可以正常显示

JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

声明变量类型

可以使用关键词 “new” 来声明其类型：

var carname=new String;
var x=   new Number;
var y=   new Boolean;
var cars=  new Array;
var person= new Object;
对象属性

[JavaScript 变量均为对象](可以说 “JavaScript 对象是变量的容器”。但是，我们通常认为 “JavaScript 对象是键值对的容器”。键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为对象属性。 JavaScript 对象是属性变量的容器)

访问对象属性的方法：

person.lastName;
//或者
person["lastName"];        //这些表达式相当于一个普通变量
对象方法

对象的方法定义了一个函数，并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。

var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }  //this其实等价于person
};     //其实就是将函数作为对象属性（实际上是它的返回值）

访问对象方法

创建：

methodName : function() {
    // 代码 
}

访问：

var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
//这时函数是person对象的一个方法，如果作为属性访问【即不加()】，会返回函数的定义
EX局部变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

不在函数内声明的就是全局变量，它会在页面关闭后删除（这就是变量的生命周期）

BEFORE作用域
作用域类型
  1. 全局作用域：
    • 全局作用域中的变量在整个程序中都可以访问。
    • 例如，在浏览器中，全局作用域由 window 对象表示。
  2. 函数作用域：
    • 函数作用域中的变量只能在该函数内部访问。
    • 当函数执行完毕后，函数作用域中的变量通常会被销毁。
  3. 块级作用域：
    • 块级作用域中的变量只能在特定的代码块（如 if 语句、for 循环、while 循环等）内部访问。
    • JavaScript ES6 引入了 let 和 const 关键字，允许在块级作用域中声明变量。
作用域链

作用域链是一系列嵌套的作用域，从当前作用域开始，一直到全局作用域结束。当查找变量时，JavaScript 引擎会沿着作用域链向上查找，直到找到该变量或到达全局作用域。

EX未声明的变量

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

var声明的属于不可配置全局属性，没有则是[可配置全局属性](非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以使用delete var删除。)

在 HTML 中, 全局变量是 window 对象，所以 window 对象可以调用函数内的未声明（未加 var)的局部变量。

注意：所有数据变量都属于 [window 对象]( 全局变量，或者函数，可以覆盖 window 对象的变量或者函数，因此，自设变量时尽量不要和已有的window变量或函数重名，这样会覆盖掉。局部变量，包括 window 对象可以覆盖全局变量和函数。 )。

外部访问局部变量

通过全局对象：在函数内部，可以通过将局部变量赋值给 window 对象的属性来使其成为全局可访问的。例如，使用 window.a = a; 语句，可以在函数外部通过 window.a 访问到这个局部变量的值。

定义全局变量：在函数内部不使用 var、let 或 const 等关键字声明变量时，该变量会被视为全局变量，从而可以在函数外部访问。但这种做法通常不推荐，因为它可能导致意外的副作用和代码难以维护。

返回值：可以通过在函数内部使用 return 语句返回局部变量的值，然后在函数外部接收这个返回值。这样，虽然局部变量本身不会被暴露，但其值可以通过函数调用传递到外部。

闭包：JavaScript 中的闭包特性允许内部函数访问外部函数的局部变量。即使外部函数执行完毕后，其局部变量仍然可以被内部函数引用。

属性和方法：定义在全局作用域中的变量和函数都会变成 window 对象的属性和方法，因此可以在调用时省略 window，直接使用变量名或函数名。

闭包的一个重要特性是它们可以访问创建时的作用域，即使外部函数已经执行完毕。这意味着闭包可以访问外部函数的局部变量，即使这些变量在外部函数执行完毕后仍然存在。

3.事件

DOM

通过 [HTML DOM](当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。)，可访问 JavaScript HTML 文档的所有元素。

HTML DOM模型被构造为对象的树：

1728045667035

js可以改变页面中的：

html元素，html属性（属性本身实际上也以是js），css样式

还可以对事件做出反应

Ⅰ.查找 HTML 元素

通过 id 找到 HTML
 var x=document.getElementById("intro"); //未找到就是null
//返回是以对象（在x中）的形式，即x.innerHTML
通过标签名找到 HTML
var y=x.getElementsByTagName("p"); //就是找标签是<p>
//返回是个数组，形式同上，即y[0].innerHTML
通过类名找到 HTML
var x=document.getElementsByClassName("intro");
//返回同标签名

Ⅱ.改变HTML

1.输出流
document.write()
2.内容
document.getElementById("id").innerHTML="新的 HTML"
//顺带一提，getElementById()是方法，innerHTML是属性，可以套
3.属性
document.getElementById("id").attribute="新属性值"
//改的是值，不是HTML属性本身，attribute是要改的HTML属性（不是对象属性）
4.样式(css)
document.getElementById(id).style.property=新样式
//property就是style属性下的color等。有横线的都去掉换成下一个字母大写（?）
5.使用事件

包括但不限于：

  • 元素被点击。
  • 页面加载完成。
  • 输入框被修改。

比如： 

<button type="button" onclick="document.getElementById('id1').style.color='red'"> 
<--就是说可以当属性值,也可以调用函数-->
    这就是HTML事件属性

还有：

<p id="p1">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
<--visibility就是设置是否可见-->
6.事件反应

包括但不限于：

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时

比如：

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
//替换文本

除了onclick事件之外，还有：

onload与onunload

<–它们用于处理cookie，onload还用于事先检测访问者的浏览器类型和版本–>

onchange
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
//value就是你输入的值（所以事先输入的value是初始值！！！）
//toUpperCase()是内置函数，用于小写转大写，对其他没有影响
</script>
<body>
输入你的名字:
<input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
</body>
onmousedown与onmouseup
onmouseover 和 onmouseout
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>
</body>
EXTRA this

这里说说这个this，它是js中的一个关键字，它在函数被调用时自动创建并用作指向调用该函数的上下文的引用。

在函数中它代表了调用函数的这个元素（作为一个对象）。

如果将其填入变量位置，则表示调用这个函数的这个元素的值。（就像上面）

也就是说

onmouseover="mOver(this)"
function mOver(obj){
	obj.innerHTML="Thank You"
}
与
onmouseover="mOver()"
function mOver(){
	this.innerHTML="Thank You"
}
实际上是一样的
onfocus
<script>
function myFunction(x){
	x.style.background="yellow";   //是的，只有background
}
</script>
输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>

其他事件对象：https://www.runoob.com/jsref/dom-obj-event.html

7.addEventListener()

用于为元素添加一个或多个事件句柄（其实就是onclick之类的） 不会覆盖，可以重复。

比如：

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate); 
/*           存在removeEventListener()，移除事件监听，可以用document.getElementById("myBtn").removeEventListener("click", displayDate)来实现                                               */
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}    //要有条件才调用，不要像这里多此一举
</script>

IE8以及之前的用的是attachEvent()和detachEvent()

解决办法：

var x = document.getElementById("myBtn");if (x.addEventListener) {                    
	// 所有主流浏览器，除了 IE 8 及更早版本    
	x.addEventListener("click", myFunction);} else if (x.attachEvent) {                  
	// IE 8 及更早版本    
	x.attachEvent("onclick", myFunction);}
赏

这玩意儿是昵称