JavaScript语法-基础_js语法文本-优快云博客

本文链接：https://blog.youkuaiyun.com/BLee_0123/article/details/124740501

这篇博客详细介绍了JavaScript的基础知识，包括改变HTML内容、JS语法、DOM和BOM操作、变量、数据类型、表达式与运算符、条件语句、循环语句、函数、对象、异常处理、表单验证、事件处理、DOM操作、BOM以及正则表达式。内容覆盖了从变量声明、数据类型到对象和函数的创建，再到错误处理和事件监听，全面解析JavaScript在网页交互中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、JS能做什么

改变HTML内容
改变HTML属性
改变CSS样式
隐藏HTML元素
显示隐藏HTML元素

二、JS知识体系
JS语法---->DOM操作---->BOM操作---->JS框架

三、JS的书写位置
第一种写法：
在<body>中的<script>标签中，书写JavaScript代码

<script>
	document.getElementById("demo"),innerHTML = "我的第一段JavaScript"
</script>

第二种写法：
将代码单独保存为.js文件，然后在HTML文件中引入

<body>
	<script src="/demo/myScript.js"></script>
<body>

四、知识结构
1）规范
每个语句后面以分号;结尾
注释：
1、双斜杠//后面的代码被视为注释
2、/*与/*之间的代码被视为注释
3、注释会被忽略，不会被执行

2）编辑与运行
1、Console窗口调试
在这里插入图片描述
2、Chrome snippets调试

3）输出语句

//window.alert()弹出警告框来显示数据
window.alert(2 + 1);

<p id="demo">段落</p>
//操作HTML元素
document.getElementById("demo").innerHTML = "已修改";

//document.write()写到HTML文档
document.write(Date());

注意：在HTML文档完全加载后使用document.write()将删除所有已有的HTML

//console.log()写到控制台
a = 5;
b = 6;
c = a + b;
console.log(c);

4）输入数据来源
在这里插入图片描述
5）变量
1、要使用变量，第一步就是声明，并给它赋值
var关键字定义变量，等号表示赋值

//声明变量
var a = 10;
//重新声明 JavaScript 变量，该变量的值不会丢失
var driver="benz";
var driver;

//声明新变量时，可以使用关键词 "new" 来声明其类型
var name=new String;
var x=new Number;
var y= new Boolean;
var lst=new Array;
var game=new Object;

2、变量的默认值
一个变量只定义，不赋值初始值，默认值：undefined
一个变量只有被var定义，并赋初始值，才算正式初始化完成

var a;
console.log(a);  // undefined
a = 100;
console.log(a);  // 100

//Undefined 这个值表示变量不含有值。
//可以通过将变量的值设置为null来清空变量
name=null;

3、变量的命名规则
要只能右字母、数字、下划线、$组成，不能以数字开头
不能是关键字或保留字()
大小写敏感，a和A是两个不同的变量

4、定义多个变量

var lastname="dog", age=30, job="worker";
//声明也可横跨多行
var lastname="John",
age=20,
job="driver";
//一条语句中声明的多个变量不可以同时赋同一个值
//x,y为undefined，z为1
var x,y,z=1;

6）数据类型
基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
复杂数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)、正则（RegExp）、日期（Date）、Map、Set。

1、typeof查看数据类型

typeof "haha"                // 字符串
typeof 6 					 // 整数
typeof 6.18                  // 小数
typeof false                 // 布尔类型
typeof [1,2,3,4]             // 数组
typeof {name:'alex', age:99} // 对象
var d = new Date();
typeof d;  					 // 日期

2、String类型要点：
多个字符串拼接，用加号。
length是字符串的长度属性。
字符串有丰富的方法：
在这里插入图片描述

3、数组

//数组取值
var name=new Array("xixi","hh","alex");
first_name = name[0]
//一种写法
var name= ["xixi","hh","alex"]
//另一种写法
var name=new Array();
name[0]="xixi";
name[1]="hh";
name[2]="alex";

4、对象
JavaScript对象时被命名值的容器。
对象也是变量，但是对象包含很多值。
值以名称: 值对的方式来书写（名称和值由冒号分隔）。

//对象键值
var name={firstname:"John", lastname:"Dog", id:123};
//访问属性
name_=name.lastname;
name_=name["lastname"];

//创建对象
methodName : function() {
    // 代码 
}
//访问对象
objectName.methodName()
//作为属性不带括号
objectName.methodName

7）表达式与运算符
1、算术表达式
加号有“加法”和“连接符”两种作用，当其中一个操作数是字符串，另一个操作数也会转换为字符串，然后进行字符串连接。否则，两个操作数都转为数字，然后进行加法运算。
隐式转换：如果参与运算的操作数不是数字类型，JS内部会自动调用Number()函数，将此操作数转换为数字类型。
在这里插入图片描述

2、赋值表达式

含义	运算符
赋值	=
快捷赋值	+= -= *= /= %=
自增运算	++
自减运算	- -
注意：++x是先赋值，再计算， x++是先计算，再赋值，自减运算同理。

3、关系表达式

含义	运算符
>	大于
<	小于
>=	大于等于
<=	小于等于
等于	==
不等于	!=
全等于（类型与值都相等）	===
不全等于（值和类型有一个不相等，或两个都不相等）	!==

注意点：
一个等号（=）是赋值，两个等号（==）才是比较值是否相等。
两个等号（==）运算符不比较值的类型，它会进行隐式转换后比较值是否相等。
三个等号（===）运算符不但比较值是否相等，而且会比较类型是否相同。
在这里插入图片描述
NaN作为特殊的数字类型值，在==比较时，呈现NaN不自等。
null和undefined，在==比较时，却相等。
false等于0，true等于1。

4、逻辑表达式
置反运算符(!)的结果，一定是布尔值。
逻辑运算符的优先级是：
!非 > &&与 > ||或

console.log(!true || false);  // false
console.log(5 && 6 || 7 && 8);  // 6

5、综合表达式
综合表达式是其他表达式综合在一起的表达式。
优先顺序为：非运算符 > 算术运算符 > 关系运算符 > 逻辑运算符
在这里插入图片描述

6、条件表达式

variablename=(condition)?value1:value2

//变量age中的值小于19，则向变量playgames赋值 "年龄太小"，否则赋值 "年龄已达到"
playgames=(age<19)?"年龄太小":"年龄已达到";

8）语句
在这里插入图片描述
1、条件语句
使用if来规定要执行的代码块，如果指定条件为true
使用else来规定要执行的代码块，如果相同的条件为false
使用else if来规定要测试的新条件，如果第一个条件为false
使用switch来规定多个被执行的备选代码块

2、循环语句
for-多次遍历代码块
for/in-遍历对象属性
while-当指定条件为true时循环一段代码块
do/while-当指定条件为true时循环一段代码块

9）函数
1、函数声明
和变量类似，函数必须先定义然后才能使用
使用function关键字定义函数，function英语是功能的意思
在这里插入图片描述

2、函数调用
执行函数体中的所有语句，被称为函数调用
调用函数非常简单，只需要在函数名称后书写圆括号对即可
在这里插入图片描述

3、函数返回值
函数体内可以使用return关键字表示函数的返回值。当函数调用时，一旦遇到return语句，则会立即退出函数，执行权交还调用者。
在这里插入图片描述

4、局部变量
在函数内部声明的为局部变量，局部变量只能在本函数内部调用
在这里插入图片描述
5、全局变量
在函数外部声明的为全局变量，全局变量在函数内/外都能被调用

注意：
在函数体内，如果没有加var给变量赋值，则将定义全局属性

6、Math函数库
在这里插入图片描述

7、其他内置函数
时间：Date
HTML文档（document）：DOM
浏览器（windows窗口）：BOM

10）正则表达式
1、正则表达式示例：
格式：/pattern/modifiers
示例：/zhaiyue/i是一个正则表达式
zhaiyue是模式（pattern）（在搜索中使用）
i是修饰符（把搜索修改为大小写不敏感）

2、正则表达式使用
在JavaScript中，正则表达式常用于两个字符串方法：search()和replace()
search()方法使用表达式来搜索匹配，然后返回匹配的位置。
replace()方法返回模式被替换处修改后的字符串
exec()方法是一个正则表达式方法：
它通过指定的模式（pattern）搜索字符串，并返回已找到的文本；如果未找到匹配，则返回null。

3、修饰符与模式
在这里插入图片描述

11）异常处理
try语句能够测试代码块中错误
catch语句允许处理错误
throw语句允许创建自定义错误
finally能够执行代码，在try和catch之后，无论结果如何

12）表单验证
HTML表单验证能够通过JavaScript来完成。
如果某个表单字段（fname）为空，name该函数会发出一条警告消息，并返回false，以防止表单被提交出去。

13）事件
HTML事件可以是浏览器或用户做的某些事情。
通常，事件发生时，用户会希望做某件事。
JavaScript允许在事件被侦测到时执行代码。

常用的HTML事件：

事件	描述
onchange	HTML元素已被改变
onclick	用户点击了HTML元素
onmouseover	用户把鼠标移动到HTML元素上
onmouseout	用户把鼠标移开HTML元素
onkeydown	用户按下键盘按键
onload	浏览器已完成页面加载

14）框架
JQuery

五、JS案例
JS语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS语法</title>
    <style>
    </style>
</head>
<body>
    <div >
        js变量
    </div>

    <script>

        //1.仅定义变量
        var  a ;
        console.log(a); //它的值是undefined类型
        a = 100;   //变量赋值
        console.log(a);  //输出100

        //2.变量类型
        var b=undefined;  // undefined 类型变量
        var c=null;   // null 类型变量
        var d='ddd';  // 字符串类型变量
        console.log(b);  
        console.log(c);
        console.log(d);

        //3.变量声明提升
        //先使用变量
        console.log('x1的值为：'+x1);//输出undefined，而不是异常
        //后定义变量
        var x1=12;

    </script>
</body>
</html>

var、let、const的区别：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>var、let、const的区别
    </title>
</head>
<body>
    <dir></dir>
    <script>
        //1.证明：先使用，再声明
        console.log(a1);
        // console.log(a2);//异常，let变量不存在变量提升
        // console.log(a3);//异常，const常量不存在常量提升
        var a1=10;
        let a2=20;
        const a3=30;

        //2.证明：值是否可以修改
        var b1=10;
        let b2=20;
        const b3=30;
        b1=100;
        b2=200;
        // b3=300;//异常，常量不可以修改

        //3.证明：先声明再赋值
        var c1;
        let c2;
        // const c3;//异常,声明的时候必须赋值
        c1=100;
        c2=200;
        c3=300;

        //4.证明：函数作用域外是否可以访问
        (function test(){
            var d1=100;
            let d2=200;
            const d3=300;
        })();
        // console.log(d1);//异常
        // console.log(d2);//异常
        // console.log(d3);//异常
        
        //5.证明：块作用域外是否可以访问
        {
            var e1=100;
            let e2=200;
            const e3=300;
        }
        console.log(e1);
        // console.log(e2);//异常，只能在块作用域里访问
        // console.log(e3);//异常，只能在块作用域里访问

    </script>



</body>
</html>

函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS函数</title>
</head>
<body>
    <div></div>

    <script>
        //1.在函数内声明的变量，局部变量
        function fun() {
            var  x =  10 ;
        }
        //console.log(x); // 报错


        //证明1：同名变量遮蔽效应
        var  a1 =  100 ;
        function   fun1() {
            var  a1 = 500 ;  
            a1++;  
            console.log(a1); // 输出 501
        }
        fun1();
        console.log(a1);  // 还是输出100

        //证明2：不加var赋值时，定义的是全局属性
        function fun2() {
            a2 = 10 ; // 不加var赋值时，定义的是全局属性
        }
        fun2();  //调用函数
        console.log(a2); //输出结果是10，证明a2为全局属性

    </script>
</body>
</html>

闭包：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闭包</title>
</head>
<body>
    <p>什么是闭包</p>
    <script>
        //闭包示例
        function   fun() {
            var   a =  10 ;
            return  function   inc() {//返回内部函数
                a++;
                console.log(a); 
            }
        }
        var   c =   fun(); //内部函数放到外部执行
        c();   // 输出11，局部变量a 发生了改变
        c();   // 输出12，局部变量a 发生了改变

    </script>
</body>
</html>

表达式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS表达式</title>
</head>
<body>
    <h1>表达式</h1>
    <script>

        // 算术表达式-加号用作连接符
        console.log(5+'6');   //56 其中一个操作数为字符串，另一个也会转换为字符串，再进行字符串连接
        console.log('5'+'6'); //56 
        console.log('5'+false); //5false 

        // 算术表达式-加号用作加法
        console.log(5+false); // 5
        console.log(5+true);  //6

        // 算术表达式-隐式转换
        console.log(5*'6');  
        console.log(10 /'2');
        console.log(10 -'2');
        console.log(10 +'2');
        console.log(10 %'3');

        // 逻辑运算符
        // 与的短路计算
        console.log(1 && 2);  // 2
        console.log(0 && 2);  // 0
        console.log(false && 2);  // false
        console.log(null && 2);  // null
        console.log(true && 10);  // 10

        // 或的短路计算
        console.log(1 || 2);  // 1
        console.log(0 || 2);  // 2
        console.log(false || 2);  // 2
        console.log(null || 2);  // 2
        console.log(true || 10);  // true

        // 逻辑运算符的优先级： 非 > 与 > 或
        console.log( !true  ||  false);           //false  
        console.log(5 && 6  ||  7 &&  8  ); // 6 

        // 综合表达式优先级：非运算符 > 数学运算符 > 关系运算符 > 逻辑运算符
        console.log(10  <  5 + 6);                      // true
        console.log(11  >  10 && 13 >  6 + 6);  // true
        console.log(11  >  10 && 13 >  6 + 7);  // false
        console.log(!10  < 6 - 3);                      // true
        console.log(!10  < 6 - 6);                      // false
        
    </script>
</body>
</html>

DOM：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> 
    <title>JS的DOM操作</title>
</head>
<body>
    <p>松勤网</p>
    <p>松勤教育</p>
    <script> 
        var ps=document.getElementsByTagName("p");
        //console.log(ps[0].innerHTML); //输出：松勤网
        //ps[0].innerHTML='<b>软件测试</b>';
        //ps[1].innerText='<b>软件测试</b>'; 

        ps[0].style.color = '#fff';
        ps[0].style.backgroundColor = 'red';
        ps[1].style.fontSize = '32px';

    </script>
</body>
</html>

BOM：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的BOM操作</title>
</head>
<body>
    <p></p>
    <script>
        //证明1：全局变量是window对象的属性
        var  x =  100;
        console.log(window.x == x );  // 输出 true

        //证明2：内置函数是window对象的方法
        console.log(window.isNaN == isNaN  ); // 输出 true
        console.log(window.alert == alert  ); // 输出 true

        //3：识别浏览器内核
        var broser  =  navigator.userAgent ; 
        if (broser.indexOf('Trident') > -1  )  {  
            console.log('IE内核');
        } else if (broser.indexOf('AppleWebKit') > -1  )  {   
            console.log('苹果谷歌内核');
            console.log(broser);
        } else if (broser.indexOf('Presto') > -1  )  {  
            console.log('opera内核');
        } else if (broser.indexOf('Gecko') > -1  )  {  
            console.log('火狐内核');
        } else{
            console.log('其他内核');
        }


    </script>
</body>
</html>

事件：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 事件</h1>
<p>点击按钮来显示日期。</p>
<button onclick="displayDate()">时间是？</button>
<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
function myFunction(){
	document.getElementById("demo1").innerHTML="Hello World";
}
function myFunction1(){
	document.getElementById("demo1").innerHTML="";
}
</script>
<p id="demo"></p>
<p>单击按钮触发函数。</p>
<button onmouseover="myFunction()" onmouseout="myFunction1()">点我</button>
<p id="demo1"></p>
</body>
</html>

对象操作：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 对象方法</h1>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
// 创建对象：
var person = {
    firstName: "Bill",
    lastName : "Gates",
    id       : 12345,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};
// 显示对象中的数据：
document.getElementById("demo1").innerHTML = person.firstName;
document.getElementById("demo2").innerHTML = person.fullName();
document.getElementById("demo3").innerHTML = person.fullName;
</script>

</body>
</html>

异常处理：

<!DOCTYPE html>
<html>
<body>

<p>请输入 5 到 10 之间的数字：</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">检测输入</button>
<p id="p01"></p>

<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "")  throw "是空的";
    if(isNaN(x)) throw "不是数字";
    x = Number(x);
    if(x < 5)  throw "太小";
    if(x > 10)   throw "太大";
  }
  catch(err) {
    message.innerHTML = "输入：" + err;
  }
  finally{console.log(err);}
}
</script>

</body>
</html>

循环语句：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 循环</h1>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
var txt = "";
//var person = {fname:"Bill", lname:"Gates", age:62,function:myfuncion(){}}; 
var person = '3.14';
var x;
for (x in person) {
  console.log(x);
  txt += person[x] + " ";
}
document.getElementById("demo1").innerHTML = txt;


var cars = ["BMW", "Volvo", "porsche", "Ford"];

var i = 0;
var len = cars.length;
var text = "";

for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}
document.getElementById("demo2").innerHTML = text;



var a = Math.abs(-1);


var text = ""
var i = 0;
do {
  text += "<br>数字是 " + i;
  i++;
}
while (i < 10);  
document.getElementById("demo3").innerHTML = text;
</script>

</body>
</html>

条件语句：

<!DOCTYPE html>
<html>
<body>

<p>单击按钮以显示基于时间的问候语：</p>

<button onclick="myFunction()">试一试</button>

<p id="demo1"></p>


<script>
function myFunction() {
  var greeting;
  var time = new Date().getHours();
  var time1 = new Date().getMonth();
  if (time < 10) {
    greeting = "早上好";
  } else if (time < 20) {
    greeting = "白天好";
  } else {
    greeting = "晚上好";
  }
  document.getElementById("demo1").innerHTML = greeting;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>
<p id="demo1"></p>

<script>
var text;
switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "周末马上就到了";
    break;
  case 0:
  case 6:
    text = "今天是周末";
    break;
  default:
    text = "期待周末";
}
document.getElementById("demo").innerHTML = text;
document.getElementById("demo1").innerHTML = new Date().getDay();
</script>

</body>
</html>

正则表达式：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>在字符串中搜索“alex”，并显示匹配的位置：</p>

<p id="demo1"></p>

<script>
var str = "Welcome to alex"; 
var n = str.search("alex");
document.getElementById("demo1").innerHTML = n;
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 正则表达式</h1>

<p>将“microsoft”替换为以下段落中的“alex”：</p>

<button onclick="myFunction()">试一试</button>

<p id="demo">Please visit Microsoft and alex microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace(/microsoft/ig,"alex");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 正则表达式</h2>

<p id="demo"></p>

<script>
var obj = /Kill/i.exec("The best things in life are free kill!");
document.getElementById("demo").innerHTML =
"Found " + obj[0] + " in position " + obj.index + " in the text: " + obj.input;
</script>

</body>
</html>

输出：

<!DOCTYPE html>
<html>
<body>
<h1>JS输出方法汇总</h1>
<p>JS输出演示案例</p>
<p id="demo1"></p>

<script>
//document.getElementById("demo1").innerHTML = 16 + 6;
//document.write(5 + 6);
//<button οnclick="document.write(9 + 6)">试一试</button>
//window.alert(5 + 6);
console.log(5 + 6);
</script>

</body>
</html>

验证表单：

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  var y = document.forms["myForm"]["fage"].value;
  if (x == "" || y == "") {
    alert("必须填写姓名or年龄！");
    return false;
  }else if (Number(y)>18 && Number(y) <100) {
    alert("年龄太大了");
    return true;
  }
  else {
    alert("年龄不符合规范");
    return false;
  }
}
</script>
</head>
<body>

<form name="myForm" action="http://www.songqinnet.com" onsubmit="return validateForm()" method="post">
  姓名：<input type="text" name="fname">
  年龄：<input type="text" name="fage">
  <input type="submit" value="提交">
</form>

</body>
</html>