JavaScript基础知识学习总结篇(每个知识点都附带上机的例子，而不是纯理论) 上，当前字数统计：12435
程序员文章站
2023-12-30 10:47:40
JavaScript基础知识1 — JavaScript概述2 — HTML嵌入JavaScript代码方式3 — JavaScript的标识符4 — HTML的变量5 — JavaScript的函数5 —...
JavaScript基础知识(上)
知识体系结构如下：
【1】 JavaScript概述
【2】 HTML嵌入JavaScript代码方式
【3】 JavaScript的标识符
【4】 HTML的变量
【5】 JavaScript的函数
【6】 JavaScript的数据类型
【7】 null undefined NaN 的区别
【8】 JS的常用事件
【9】 JS回调函数的概念
【10】 JS注册事件的两种方式
【11】 JS代码的执行顺序
【12】 JS捕捉回车键
【13】 void运算符
【14】 JS的控制语句
【15】 设置和获取文本框的value
【16】 innerHTML 和innerText
【17】 JS正则表达式
【18】 表单验证
1.JavaScript概述
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。(源于百度百科)。
那么JavaScript 到底有什么用？
》JavaScript能够改变HTML内容
》JavaScript能够改变HTML属性
》JavaScript能够改变HTML样式（CSS）
》JavaScript 能够显示HTML元素
可能光定义不能够让人理解透彻，下面的学习，会带有例子，等学完例题之后再回过头来，就会恍然大悟了。各个部分的讲解， 不能光看，要学习自己给自己出题，来验证这个知识点正确与否，如果说只看而不屑用手，那么这样会忘的更快。
2.HTML嵌入JavaScript代码方式
一共有三种方式，和CSS类似，温馨提示：学习JavaScript的小伙伴，一定要先有HTML和CSS基础哦~学习要循序渐进，而不是一步登天。
<!DOCTYPE html>
<hmtl>
<head>
<meta charset="utf-8">
<title>html中嵌入JS代码的第一种方式</title>
</head>
<body>
<!--
1.要实现的功能
用户点击以下按钮，弹出消息框
2.JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
在JS中有很多事件，其中有一个事件叫做： 鼠标单击 click。并且任何事件
都会对应一个事件句柄叫做：onclick。【注意:事件和事件句柄的区别是：
事件句柄是在事件单词添加一个on。】而事件句柄是以html标签的属性存在的
3.使用JS代码弹出消息框：
在JS中有一个内置对象叫做window，全部小写，window代表浏览器对象
window对象有一个函数叫做:alert 用法是window.alert（"消息"）:这样就可以弹窗了
4.JS中的字符串可以使用的双引号，也可以使用单引号。
5.JS中的一条语句结束之后可以使用分号 也可以不使用。
-->
<!--window.可以省略不写-->
<input type="button" value="hello" onclick="window.alert('你好~我的朋友')">
</body>
</hmtl>
<!DOCTYPE html>
<hmtl>
<head>
<meta charset="utf-8">
<title>html中嵌入JS代码的第二种方式</title>
<!--
JS的脚本块在一个页面当中可以出现多次。没有要求。
JS的脚本块出现位置也没有要求，随意。
-->
<script type="text/javascript">
/*
暴露在脚本块中的程序，在页面打开的时候执行，
并且遵守自上而下的顺序依次逐行执行，（这个代码的执行
不需要事件）
*/
window.alert("hello world"); //alert函数会阻塞整个页面的加载。
//JS代码注释和Java一样。
window.alert("java");
</script>
</head>
<body>
<style type="text/css">
/*
css代码块
*/
</style>
<!--第二种方式：脚本块的方式
-->
<input type="button" value="按钮" />
</body>
</hmtl>
<!--
/**
* javadoc 注释：这里的注释信息会被javadoc.exe工具解析生成帮助文档。
*/
-->
<!DOCTYPE html>
<hmtl>
<head>
<meta charset="utf-8">
<title>html中嵌入JS代码的第三种方式</title>
</head>
<body>
<!--
引入独立的js文件
-->
<!--在需要的位置引入js脚本文件-->
<!--引入外部独立的js文件的时候，js文件中的内容，会遵循自上而下的方式依次逐行执行-->
<script type="text/javascript" src="XXX.js"></script>
</body>
</hmtl>
3.JavaScript的标识符
标识符，就是指变量、函数、属性的名字，或者函数的参数。（这句话说白了就是能够自己命名的，都是标识符。）
命名规则
》第一个字符必须是一个字母、下划线或是美元符号（$）
》其他字符可以是字母、下划线、美元符号或数字
》关键字和保留字不能作为标识符
》注意区分大小写
》驼峰命名 ：例如 userName
4.HTML的变量
弱类型语言的定义变量方式，相比强类型（c .java）来说简直不要太随意。万物皆可var 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于JS中的变量</title>
</head>
<body>
<script type="text/javascript">
/*
1.回顾Java中怎么定义/声明变量
数据类型 变量名：
例如：
int i;
2.Java中的变量怎么赋值
使“=”运算符进行赋值运算 等号右边先执行，然后再赋值给左边
例如：
i =10；
3.java 是一种强类型语言。
强类型怎么理解？
Java语言存在编译阶段，。假设有代码：int i;
这个变量i ,从编译类型最终到内存释放，一直都是int类型，不可能再变成其他类型。
byte short int long float double boolean char
12484812
javascript当中的变量
怎么声明变量？
var 变量名；
怎么给变量赋值？
变量名=值；
javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。
var i=100;
i=false;
i="abc";
i=new Object();
i=3.14;
*/
var i; //没有赋值 undefined(JS中存在的是一个具体值) 两个undefined相加 =NAN (not a number 也是一个具体的值)
alert(i);
alert(undefined);
//一个变量没有声明/定义 直接访问
//alert(k); //语法错误 不能这样写
var a,b,c=200;
alert(a);
alert(b);
alert(c);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS的局部变量和全局变量</title>
</head>
<body>
<script type="text/javascript">
/*
全局变量：
在函数体之外的声明变量属于全局变量，全局变量的声明周期是:
浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量
会一直在浏览器的内存当中，耗费内存空间
能使用局部变量尽量使用局部变量。
局部变量：
在函数体当中声明的变量，包括一个函数的形参都属于局部变量，
局部变量的声明周期是：函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。
局部变量声明周期较短。
*/
var userName ="lisi";
function name(){
var userName ="zhangsan";
alert(userName);
}
name();
alert(userName);
</script>
</body>
</html>
5.JS的函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS函数初步</title>
</head>
<body>
<script type="text/javascript">
/*
1.JS中的函数，等同于java语言中的方法，函数也是一段可以被重复利用的代码片段
函数一般都是可以完成某个特定功能的
2.回顾Java中的方法
【修饰符列表】返回值类型 方法名（形式参数列表）{
方法体;
}
例如：
public static boolean login(String userName ,String password){
...
return true;
}
3.JS中的变量是一种弱类型，那么函数应该怎么定义呢？
语法格式；
第一种方式：
function 函数名（形式参数列表）{
函数体;
}
第二种方式：
函数名=function（形式参数列表）{
函数体;
}
JS中的函数不需要指定返回值类型，返回什么类型都行。
4.JS函数可以重载吗
JS中函数在调用时，参数类型没有限制，参数个数没有限制
JS函数中，两个同名函数，后一个会将上一个函数覆盖。
*/
function sum(a,b){
//a和b都是局部变量，她们都是形参（变量名随意）
alert(a+b);
}
//函数必须调用才能执行
//sum(10,20);
sayHello=function(username){
alert("hello"+username);
}
//sayHello("张三");
</script>
<input type="button" value="hello" onclick="sayHello('杰克');" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body >
<script type="text/javascript">
window.onload =function(){
var b=document.getElementById("btn");
b.onclick =function(){
alert("Hello ");
}
}
</script>
<input type="button" value="你好" id="btn" />
</body>
</html>
6.JavaScript的数据类型
数据类型，是我在学校机房做的，所以例子…，大家上网搜一搜数据类型的例子。要善于自己给自己出题，自己给自己找题哦
基本数据类型（原始类型）：String、Number、Null、Undefined、Boolean
引用类型：Object
7.null undefined NaN 的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>null 和undefined NaN 有什么区别？</title>
</head>
<body>
<script type="text/javascript">
alert(typeof null); //"object"
alert(typeof NaN); //"number"
alert(typeof undefined); //"undefined"
//双等号 等同
alert(NaN== null); //false
alert(null== undefined); //true
alert(undefined==NaN) ; //false
//三等号 数据类型和值都相同
//在JS当中有两个比较特殊的运算符
alert(null===NaN); //false
alert(null===undefined); //false
alert(undefined===NaN); //false
</script>
</body>
</html>
- JS的常用事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS中的常用事件</title>
</head>
<body>
<input type="button" value="你好" onclick="sayHello()" />
<input type="button" value="我也好" id ="good"/>
<script type="text/javascript">
/*
(1)blur 失去焦点
(2)change下拉列表选中项改变，或文本框内容改变
(3)click 鼠标单击
(4)dbclick 鼠标双击
(5)focus 获得焦点
(6)keydown键盘按下
(7)keyup键盘弹起
(8)load页面加载完毕
(9)mousedown鼠标按下
(10)mouseover鼠标经过
(11)mousemove鼠标移动
(12)mouseout鼠标离开
(13)mouseup鼠标弹起
(14)reset 表单重置
(15)select 文本被选定
(16)submit 表单提交
任何一个事件都会对应一个事件句柄，在事件前加on
事件句柄以属性的形式存在。
*/
function sayHello(){
alert("hello");
}
function good(){
alert("very good !");
}
var bu = document.getElementById("good");
bu.onclick =good; // 调用good() 是错误写法
</script>
</body>
</html>
- JS回调函数的概念
注意一点：自己把函数代码写出来，由其他程序员去调用该函数。
Java中也有回调函数机制。
public class MyClass{
public static void main(String[] args){
//主动调用run()方法，站在这个角度run()正向调用
run();
}
//站在run方法这个角度，把run方法叫做回调函数，
public static void run(){
System.out.println("run...");
}
}
-
JS注册事件的两种方式
-
JS代码的执行顺序
由上到下，顺序执行。
这个我就不写例子了，我想由小伙伴们亲身去实践感受以下。给一些提示信息：放置一个按钮，在插入一个script代码块，按钮的点击事件句柄。先是按钮在代码块的下面，执行看看效果。然后在反过来，注意差别。 -
JS捕捉回车键
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS代码捕捉回车键</title>
</head>
<body>
<script type="text/javascript">
window.onload =function(){
var password =document.getElementById("password");
password.onkeydown =function(event){
//获取键值 回车：13 esc ：27
//event 会接收一个事件对象
if(event.keyCode==13){
alert("登录成功");
}
}
}
</script>
<input type="text" id="password" />
</body>
</html>
- void运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="javascript:void(0)"> 这是一个不跳转也页面的超链接</a>
<!--这里注意 调用函数需要指定方式 javascript:-->
</body>
</html>
-
JS的控制语句
和Java c等一样if switch while for break continue -
设置和获取文本框的value
每个标签可以设置的属性X，都可以 “.XXX”来使用。和Java类中属性类似。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置和获取文本框的value</title>
</head>
<body>
<script type="text/javascript">
window.onload =function(){
document.getElementById("btn").onclick =function(){
//alert("111"); 写完按钮的事件句柄先 调试一下，确定没问题在往下继续进行。运行时记得F12哦~
var t =document.getElementById("txt"); //拿到标签对象
alert(t.value); //标签的value
}
}
</script>
<input type="text" id="txt" /> 文本框
<input type="button" id ="btn" value="点我获取文本框的value" />
</body>
</html>
- innerHTML 和innerText
innerHTML 中可以写HTML代码
innerText 中写HTMl代码会被当作普通的字符串文本，并不会被执行。
（innerText例子由小伙伴自行完成）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击按钮 ，在DIV中显示内容</title>
</head>
<body>
<style type="text/css">
#div1{
width: 300px;
height: 350px;
background-color: aqua;
position: absolute;
top: 100px;
left: 100px;
border: 1px black solid;
}
</style>
<script type="text/javascript">
window.onload =function(){
var b = document.getElementById("btn");
b.onclick =function(){
//点击按钮 ，在div 中输出hello world
var d= document.getElementById("div1");
d.innerHTML="<center><font>hello world</font><center>";
}
}
</script>
<input type="button" value="更改div" id="btn" />
<div id="div1"></div>
</body>
</html>
- JS正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
</head>
<body >
<script type="text/javascript">
/*
1.什么是正则表达式？有什么用?
正则表达式：Regular Expression
正则表达式主要用在字符串匹配方面
2.正则表达式实际上是一门独立的学科，在Java语言中支持，c语言中也支持，JS中也支持。
大部分编程语言都支持正则表达式。最初使用在医学方面，用来表示神经符号。目前使用最多的是计算机编程领域，
用作字符串匹配，包括搜索方面。
3.正则表达式需要掌握到什么程度？
第一，常见的正则表达式要认识
第二，简单的正则要会写
第三，他人编写的正则表达式要认识。
第四，在Js中怎么创建正则
第五，在Js中，正则表达式对象有哪些方法？
第六：能够快速的从网络上找到自己需要的正则表达式，并且测试其有效性。
4.常见的正则表达式符号
. 匹配除换行符以外的任意字符
\w 匹配字母或者数字或者下划线或者汉字
\s匹配任意的空白字符
\d匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束。
*重复零次或更多次
+重复一次或更多次
？重复零次或一次
{n} 重复n次
{n,} 重复n次或者更多次
{n,m} 重复n到m次
\大写字母 （否定）
[^x]
{^aeiou}
5.会查找正则表达式。
6.怎么创建正则表达式对象，怎么调用方法？
第一种方式：
var r =/正则表达式/flags;
第二种方式：(使用内置支持类)
var r =new RegExp("正则表达式","flags");
关于flags :
g：全局变量
i:忽略大小写
m:多行搜索。前面是正则表达式时，m不能使用，只是前面是普通字符串的时候，m可以使用，
正则表达式的test()方法
true/false =正则表达式对象.test(用户的字符串).
*/
</script>
</body>
</html>
-
表单验证
表单验证要求：
1、用户名不能为空
2、用户名必须在6-14位之间
3、用户名智能由数字和字母组成，不能含有其他符号
4、密码和确认密码一致，邮箱地址合法
5、用以失去焦点验证
6、错误提示信息统一在span标签中提示，并且要求字体12号，红色
7、文本框再次获得焦点后，清空错误提示信息，如果文本框中的数据不合法要求清空文本框的 value
8、最终表单中所有项均合法方可提交。注意： 阅读下面这段话
我希望小伙伴这道题先自己想想，从需要几个标签出发，每个标签绑定什么事件，到实现满足题意要求 的代码。实在做不出来的小伙伴也不要着急。我会在最后给出这道题的答案，但还是要求小伙伴，参考借鉴。而不是的复制 粘贴 运行 大功告成！ 这样不是学习，得不到自己能力的进步。
<!DOCTYPE html>
<hmtl>
<head>
<meta charset="utf-8">
<title>表单验证</title>
</head>
<body>
<!--
表单验证：
1、用户名不能为空
2、用户名必须在6-14位之间
3、用户名只能由数字和字母组成，不能含有其他符号
4、密码和确认密码一致，邮箱地址合法
5、用以失去焦点验证
6、错误提示信息统一在span标签中提示，并且要求字体12号，红色
7、文本框再次获得焦点后，清空错误提示信息，如果文本框中的数据不合法要求清空文本框的value
8、最终表单中所有项均合法方可提交。
-->
<!--考虑这里用span 还是div -->
<style type="text/css">
span{
font-size: 12px;
color: red;
}
</style>
<!--哈哈哈，当然是span 了 div 独占一行哦 回答正确了吗？-->
<script type="text/javascript">
window.onload =function(){
//用户名部分
//拿到用户名
var name =document.getElementById("userName");
//拿到span标签
var userSpan =document.getElementById("nameError");
//用户名失去焦点
name.onblur =function(){
/*
这里的alert(111)没有什么实际作用
但是还要告诉小伙伴们 好程序不是一步登天的，写点，确定之前的代码没问题，在逐步往下进行。
*/
//alert(111);
//拿到用户名
var username =name.value;
//去空
username=username.trim();
//判断用户名是否为空 三种方式看个人喜好怎么写 ，没有人会死规定代码的
// if(username){
// //不是空
// alert("666");
// }else{
// //是空
// userSpan.innerText="用户名不能为空";
// }
//或者 if(username.length==0)
//或者 if(username=="")
//感觉还是这种舒服
if(username.length==0){
userSpan.innerText="用户名不能为空";
}else{
判断长度
if(username.length<6||username.length>14){
//不合法
userSpan.innerText="长度不合法";
}else{
//合法
//继续判断是否含有特殊符号 正则表达式
var reg =/^[A-Za-z0-9]+$/;
var ok=reg.test(username);
if(ok){
//最终合法
userSpan.innerText="✔";
}else{
//含有特殊符号
userSpan.innerText="含有特殊字符";
}
}
}
}
//获得焦点
name.onfocus =function(){
//清空非法的value
if(userSpan.innerText!=""&&userSpan.innerText!="✔"){
name.value="";
}
//清空
userSpan.innerText="";
}
//密码部分
//拿到确认密码
var agin=document.getElementById("pwdAgin");
var pwdspan =document.getElementById("pwdError");
agin.onblur =function(){
//拿到密码对象
var pwd =document.getElementById("password");
var pwdvalue=pwd.value;
var aginvalue =agin.value;
if(pwdvalue!=aginvalue){
//两次密码不一致
pwdspan.innerText="两次密码不一致";
}else{
//两次密码一致
if(aginvalue!=""){
pwdspan.innerText="✔";
}
}
}
//获得焦点
agin.onfocus =function(){
//清空非法的value
if(pwdspan.innerText!=""&&pwdspan.innerText!="✔"){
agin.value="";
}
//清空
pwdspan.innerText="";
}
//email部分
var emailElt =document.getElementById("email");
var emailspan =document.getElementById("emailError");
emailElt.onblur =function(){
//获取email的value
var email =emailElt.value;
//判断邮箱地址是否合法
var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok =reg.test(email);
//由于我的正则表达不熟练，大家注意 不要加双引号 ！！！！
//对象不支持“test”属性或方法
if(ok){
//合法 zhangsan@163.com
emailspan.innerText="✔";
}else{
//不合法
emailspan.innerText="邮箱地址不合法";
}
}
//获得焦点
emailElt.onfocus =function(){
if(emailspan.innerText!=""&&emailspan.innerText!="✔"){
emailElt.value="";
}
//清空
emailspan.innerText="";
}
//提交
var btn =document.getElementById("sub");
btn.onclick =function(){
//触发上面的内容
name.focus();
name.blur();
emailElt.focus();
emailElt.blur();
//可以提交
if(userSpan.innerText=="✔"&&pwdspan.innerText=="✔"&&emailspan.innerText=="✔"){
//获取表单对象
var form =document.getElementById("userform");
//提交
form.submit();
}else{
alert("含有不合法内容，无法提交");
}
}
}
</script>
<!--实际应该用post 但是只是为了练习，所以写成get-->
<!--
有心的小伙伴 可以利用学过的HTML CSS 知识 把界面优化的美观 一个小小的表格，让标签对齐也算是一种优化。
-->
<form id="userform" method="get" action="success.html">
用户名<input type="text" name="userName" id ="userName" /><span id="nameError"></span><br />
密码<input type="password" name="password" id="password" /><br />
确认密码<input type="password" name="pwdAgin" id="pwdAgin" /><span id="pwdError"></span><br />
邮箱<input type="text" name="email" id ="email" /><span id="emailError"></span><br />
<input type="button" value="提交" id ="sub"/>
</form>
</body>
</hmtl>
本文地址：https://blog.csdn.net/LJCC_c/article/details/109555895