JavaScript基础总结
JavaScript学习
1.什么是JavaScript
JavaScript是运行在浏览器上的 脚本语言，简称JS。最初叫做LiveScript。JavaScript让浏览器更加生动，不再是单纯的静态页面。JavaScript是网景公司的布兰登艾奇开发的。
JavaScript运行在浏览器的内存当中。JavaScript不用程序员手动编译，直接通过浏览器打开并解释执行，JavaScript的目标程序以普通文本形式保存，这种语言都叫做“脚本语言”。
JSP和JS的区别
JSP:JavaServer Pages（隶属于Java语言，运行在JVM中）
JS：JavaScript（运行在浏览器上，脚本语言）
JavaScript事件和事件句柄
JavaScript是 依靠事情去驱动的，然后执行对应程序。事件句柄是以HTML标签的属性存在的。当触发某个事件时（如：鼠标点击）运行JS代码，这时运行的代码就是注册到对应句柄上的JS代码。
<body>
<!--
点击这个按钮这个操作叫做事件
这里的onclick是事件句柄
其中的值是JavaScript代码，当触发事件时JavaScript代码将运行。
window是浏览器窗口对象，alert是对话框
-->
<input type="bottom" value="按钮 οnclick="window.alert('hello')"/>
</body>
2.JavaScript嵌入到HTML中的三种方式
嵌入方式一：
<!--方式一，内嵌入-->
<body>
<!--
这里的onclick是事件句柄
其中的值是JavaScript代码，当触发事件时JavaScript代码将运行。
window是浏览器窗口对象，alert是对话框
-->
<input type="bottom" value="按钮 οnclick="window.alert('hello')"/>
</body>
嵌入方式二：
<body>
<!--第二种方式：脚本块方式-->
<script >
/*这是注释*/
/*
暴露在脚本块的代码在页面打开时执行。
HTML中的代码执行遵循至上而下执行。
JavaScript的脚本块能放在HTML的任何地方，甚至能放在<html></html>外面
*/
window.alert("hello"); //alert会阻塞页面加载的作用
</script>
</body>
第三种方式：
<body>
<!--引入JavaScript代码文件-->
<!--不能单标签引入，引入代码的同时不能script中写入代码-->
<script src="jscode.js">/*不能写代码*/</script>
</body>
3.JavaScript的变量
强类型语句和弱类型语言对比
<body>
<script>
/*
java是一种强类型语言，Java存在编译阶段，编译阶段在编译阶段已确定了变量类型。一旦一个变量被指定了某个数据类型，如果不经过强制转换（底层数据空间还是原来那个），那么它就永远是这个数据类型了。如python也是强类型语言。
JavaScript是弱类型语言，没有编译阶段。数据类型可以被忽略的语言，一个变量可以赋不同数据类型的值。(类型不安全的语言)
*/
</script>
</body>
JavaScript定义变量
javascript变量又分局部变量和全局变量。
全局变量定义在函数外部，全局变量的生命周期是：浏览器打开时声明创建，浏览器关闭时销毁。作用域是在任何位置都可以访问
局部变量定义在函数内部，局部变量的生命周期是：函数调用时创建，函数结束时销毁 。作用域是函数内部。
javascript总是在不知不觉中就出人意料地创建了全局变量，其原因在于javascript的两个特性。第一特性是javascript可直接使用变量，甚至无需声明。第二特性 是javascript有个暗示全局变量的概念，即任何变量，如果未经声明，就为全局对象所有（也就像正确声明过的全局变量一样可以访问）。
<body>
<script>
//全局变量（函数体外变量）
var i; //没赋值是默认是undefined
alert("i="+i);
//弱类型，值能随意什么数据类型
i=1;
i=1.2;
i=false;
i="abc";
myfunction=function(){
//这里定义局部变量
var j;
}
</script>
</body>
4.JavaScript函数定义
<body>
<script>
/*
语法格式：
function 函数名(形参){函数体} 或者
函数名 = function(形参){函数体}
*/
function sum(a,b){alert(a+b);} //定义函数
sum(1,2); //调用函数
</script>
<!--把编写的函数，注册到onclick上-->
<input type="button" value="求和" onclick="sum(1,2)"/>
</body>
JavaScript函数
<body>
<script>
function sum(a,b){
return a+b
}
/*
JavaScript函数传参无类型限制，传入参数个数能随意，不限制个数
并且JavaScript函数不能重名，后声明函数会覆盖前声明函数。（不能重载）
*/
var number;
number=sum(1,2);
alert(number); //3
number=sum("hello");
alert(number); //helloundefined
number=sum();
alert(number); //发现是NaN
number=sum(1,2,3);
alert(number); //3
</script>
<!--把编写的函数，注册到onclick上-->
<input type="button" value="求和" onclick="sum(1,2)"/>
</body>
5.JavaScript数据类型
js中有数据类型有：原始类型（基本类型），引用类型。
-
原始类型：Undefind，Number，String,Boolean,Null.
-
引用类型：Object以及Object的子类。
-
ES6后的新类型：symbol类型
<body>
<script>
/*js中存在运算符typeof来动态获取数据的类型。返回结果包含："undefind"，"number"， "string","boolean","object","function"
*/
function sum(a,b){
if(typeof a=="number"&&typeof b=="number"){
return a+b
}
}
</script>
</body>
Undefind类型：当一个变量没有手动赋值，系统默认赋值undefind
Number类型：包含一般数字，NaN(不是数字),Infinity（无穷）。isNaN(数据)函数能判断是不是数字，返回真假。还有函数parseInt(),parseFloat(),Math.ceil()等，Math.ceil()为向上取整。
Boolean类型：只有真和假。
String类型：就是字符串，有支持类（类比Java的构造器），String的父类是Object。var a ="123"为String类型，var b=new String(“123”);是Object类型。String类型也可以当成Object类型使用，通过‘.’来调用方法。
Object类型
<body>
<script>
/*
Object类有属性：prototype，constructor
函数：toString(),valueof(),toLocaleString()
*/
/*
JS中类的定义和函数一样
语法格式：
function 类名(形参){类体} 或者
类名 = function(形参){类体}
当使用new来创建时当成类来处理。
*/
function myobject(){}
var obj =new myobject(); //当成类在堆中创建对象。
/*
在Js中类的定义和构造函数的定义是放在一起来完成
*/
function myobj(a,b,c){
this.a=a;
this.b=b;
this.c=c;
//函数
this.sum=function(){
return this.a+this.b+this.c;
}
}
var obj2 = new myobj(1,2,3);
var s=obj2.sum();
</script>
</body>
object类型中通过prototype属性动态扩展函数
<script>
function cat(name,weight){
this.name=name;
this.weight=weight;
this.function getname(){
return this.name;
}
}
var tom = new cat(tom,12);
tom.getname();
//动态扩展
cat.prototype.getweight=function(){
return this.weight;
}
tom.getweight();
</script>
扩展String类型的函数
<script>
//string继承object类，所以能扩展函数。
String.proyotype.iswhat(){
return "这是string"
}
"abc".iswhat();
</script>
6.js中的等同运算符和全等运算符
<script>
/*
==等同运算符（判断值）
===全等运算符（判断值和类型）
*/
alert(1==true) //true
alert(1===true) //false
alert(null==undefind) //true
alert(null===undefind) //false
</script>
7.js中的事件句柄
将函数注册到事件句柄中。使用方法一将函数注册到事件句柄中：
<body>
<script>
hello = function(){
alert("hello");
}
</script>
<!-- 设置按键，并把""中的操作注册到onclick事件句柄上-->
<input type="button" value="hello" onclick="hello()"/>
</body>
使用方法二进行函数注册：
<body>
<!-- 设置按键-->
<input type="button" value="jack" id="bt"/>
<script>
//在script中把函数注册到事件句柄上
jack = function(){
alert("jack");
}
//通过document获取标签对象（document代表当前已经加载的HTML页面）
//注：页面从上至下加载页面，所以必须放在按钮后面注册
var bt = document.getElementById("bt");
bt.onclick=jack; //将jack函数注册到onclick事件句柄上
//将匿名函数注册到onclick上
bt.onclick=function(){alert("hello jack");}
</script>
<script>
/*
注册巧用，通过使用window.onload等页面加载完成后再注册在按钮事件句柄 上注册函数不用考虑按钮的位置。（window代表浏览器窗口）
*/
window.onload=function(){
document.getElementById("bt").onclick=function(){
alert("hello js");
}
}
</script>
</body>
标签对象
这里解释一下标签对象，我们可以通过document来获取标签对象，通过对象我们可以修改标签中的属性。
<body>
<input type="button" id="bt"/>
<script>
//标签对象
var bt = document.getElementById("bt");
bt.onclick=function(){
bt.type="text"; //按钮变文本条
}
</script>
</body>
8.js的事件
事件就是一个操作或情况，如用户点击按钮这就是一个事件。js中有很多事件，常见的事件如下：
/*
load 页面加载事件
click 点击事件
doubleclick 双击事件
blur 焦点失去事件
focus 获得焦点事件
keydown 键盘按下
keyup 键盘弹起
mousedown 鼠标按下事件
mousemove 鼠标移动
mouseup 鼠标键弹起
......
*/
对事件的处理
对事件处理是利用到注册到事件句柄的函数。这里必须说明一下事件发生和事件处理和事件句柄的关系。这里通俗的解释一下：
-
事件：一系列操作和情况（如：点击鼠标，按键盘，页面加载完毕）。
-
事件句柄：一种事件对应一个事件句柄，当事件发生时浏览器调用对应事件的事件句柄上的函数进行处理。
-
事件处理：对发生事件进行处理，通过回调函数（可以理解成程序员编写浏览器调用的函数）进行处理。
<body>
<script>
/*
事件：页面加载完毕 对应的事件句柄：onload
event浏览器传入的事件参数
*/
window.onload = function(event){
//在事件句柄上注册的匿名函数（也是回调函数）
alert(event+"页面加载完毕");
//页面加载过程中不断提醒
}
</script>
</body>
通过js代码触发事件
出来使用者操作触发事件，我们还可以通过js代码人为的触发事件。可以通过节点对象的click()等方法触发事件，例子如下：
<body>
<script>
window.onload=function(){
//获取节点对象(标签对象)
var form=document.getElementById("formuser");
var subm=document.getElementById("submit");
var username=document.getElementById("username");
var password=document.getElementById("password");
var reset=document.getElementById("reset");
//处理提交按钮的点击事件
subm.onclick=function(){
form.submit(); //表单提交方法
reset.click(); //触发点击事件(重置表单)
}
//处理焦点失去事件
username.onblur=function(){
//var regExp=/正则表达式/;
if(regExp.test(username.value)){
//提醒通过
span.InnerText="通过";
//或者给张小勾图片(通过样式修改)
span.class="样式";
}else{
span.InnerText="名字不合规格"
}
}
password.onblur=function(){
//var regExp=/正则表达式/;
if(regExp.test(password.value)){
//提醒通过
span.InnerText="通过";
}else{
span.InnerText="密码不合规格"
}
}
}
</script>
<form action="http://localtion/" name="formuser" method="post">
用户名<input type="text" name=username id="username"/>
<span id=span1></span><br>
密码<input type="password" name=password id="password"/>
<span id=span1></span><br>
<input type="botton" value="提交" id="submit"/>
<input type="reset" value="重置" id="reset">
</form>
</body>
9.js中的void(0)
这个void是真正意义的空路径。当我们点击一个超链接时不进行任何跳转时，就用到void。
超链接标签上的属性href="javascript:void(0)"代表完全空路径，不进行跳转。其中的javascript表示后面声明后面代码为js代码。
如果href="",代表跳转到当前路径，就是当前页面头部。
<!-- 不进行跳转 -->
<a href="javascript:void(0)">超链接</a>
<!-- 跳转到当前页面头部 -->
<a href="">超链接</a>
<!-- 跳转到指定页面 -->
<a href="路径">超链接</a>
10.js中的数组
因为js是弱类型语音，所有js中的数组能存储任何类型的数据。并且会不出现越界问题，超出界限的下标的数据值为undefined。没有赋值的数据也是undefined。
<script>
var arr =[1,true,"a",3.3];
//for in语法（跟Java有点区别）
for(var i in arr){
//这里的i是数组下标
//window.alert(i);
window.alert(arr[i])
}
//越界
alert(arr[10]); //undefined
alert(arr.length); //4
//扩容
arr[6]=7;
alert(arr.length); //7
</script>
通过Array()内置类创建数组
<script>
var array =new Array(3); //创建大小为3的数组
var array = new Array(1,2,3,4) //创建大小4，元素1，2，3，4的数组
</script>
js中的for in和with控制语句
for in 语句用法如下：
<script>
/*
这里说一下for in语句
js中的for in获取的是数组的下标或者类的属性名
*/
var[] arr ={1,true,"a",3.3};
//遍历数组（i是数组下标）
for(var i in arr){ window.alert(arr[i]) }
user=function(name,age){
this.name=name;
this.age=age;
}
var user = new user("jack",12);
//遍历类属性(对象属性允许使用属性名来获取)user["name"]等于user.name
for(var str in user){window.alert(user[str])}
</script>
with用法如下：
<script>
user=function(name,age){
this.name=name;
this.age=age;
}
var user = new user("jack",12)
//with语句块内的变量都属于user的属性（等同变量前面加user.）
with(user){
alert(name+age);
//alert(user.name+user.age)
}
</script>
11.什么是DOM？
以下内容来自：https://www.w3school.com.cn/htmldom/dom_intro.asp（W3school）
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
这个是比较官方的解释，其实可以认为DOM就是js中的document对象,我们可以通过document对象动态地获取到网页上的HTML标签对象。通过对其进行相应的操作（如获取属性值，修改属性值等等）
12.正则表达式
很多语音的支持正则表达式，大部分编译语音都支持正则表达式。正则表达式常常用于字符串匹配。 如：检测邮箱格式，手机号码格式等等
创建正则表达式
<script>
/*
js中创建正则表达式
flags:
g 全局匹配
i 忽略大小写
m 多行搜索 （非标准正则表达式时可以使用，如普通字符串abc）
方法一：（不能使用""，否则认为是string）
var regExp=/正则表达式/flags;
方法二：(通过内置类通过字符串创建正则表达式)
var regExp=new RegExp("正则表达式",flags);
*/
//例子：
var regExp =/abc/m; //全局匹配字符串abc
var regExp2 =/[0-9]{4,9}/ //匹配4个到9个0-9的数字
var regExp3 = new RegExp("abc",m);
var regExp4 = new RegExp("/[0-9]{4,9}/",g)//全局匹配4个到9个0-9的数
var bol=regExp.test("abc"); //进行测试的方法，返回boolean类型
</script>
常见的正则表达式
这里给个原文地址，以下内容均来自https://c.runoob.com/front-end/854
正则表达式这东西真的不好学，只能拿来主义了，这么多字符匹配规则，哪记得住。用时上网找。这东西有人专门研究的，大可不必过多深入。
13.js获取时间
有时需要获取系统时间。
<script>
var t =new Date(); //获取系统当前时间
document.write(t+"<br>");
document.write(t.toLocaleString()+"<br/>");
var year = t.getFullYear(); //获取年
var month = t.getMonth(); //获取月（0-11）
var day = t.getDate(); //获取日
document.write(year+":"+(month+1)+":"+day+"<br>");
var hour = t.getHours();
var min = t.getMinutes();
var second= t.getSeconds();
document.write(hour+":"+min+":"+second+"<br/>");
document.write(t.getTime()); //系统毫秒数
</script>
当然这个时间是不会跳动的，如果你希望能动态得看到时间的跳转。请参考下面的代码：
<body>
<script>
function disptime(){
var t = new Date();
document.getElementById("span1").innerHTML=t.toLocaleString();
}
window.onload=function(){
var timeinterval=window.setInterval("disptime()",1000);
//window.clearInterval(timeinterval); //清除订时用的方法
}
</script>
<span id="span1"></span>
</body>
14.什么是BOM
我们可以认为BOM就window对象。如果你想查看window对象相关属性和方法请去查看：https://www.w3school.com.cn/js/js_window.asp，window相对简单很多，看一下文档基本都会。
· 全网最简单！3分钟用满血DeepSeek R1开发一款AI智能客服，零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布，跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像：SSE 如何助力 AI 内容实时呈现？（Typescript篇）