JavaScript基础

最新推荐文章于 2024-10-11 17:39:47 发布

xvrn

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量614

点赞数 25

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_82197189/article/details/139158120

版权

为什么学习JavaScript

JavaScript是web开发人员必须学习的3门语言中的一门：
HTML定义了网页的内容
CSS描述了网页的布局
JavaScript控制了网页的行为

JavaScript是脚本语言

JavaScript是一种轻量级的编程语言；是可插入HTML页面的编程代码；插入HTML页面后，可由所有的现代浏览器执行

JavaScript用法

HTML中的JavaScript脚本代码必须位于<script>与</script>标签之间
JavaScript脚本可被放置在HTML页面的<body>和<head>部分中

`<script>`标签

如需在HTML页面中插入JavaScript，使用<script>标签
<script>和</script>会告诉JavaScript在何处开始和结束
<script>和<script>之间的代码行包含了JavaScript
浏览器会解释并执行位于<script>和</script>之间的JavaScript代码

JavaScript:直接写入HTML输出流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这是一个段落</p>

    <script>
        document.write("<h1>Hello World</h1>");
        document.write("<p>这是一个标题<p>");

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

效果图：

JavaScript:对事件作出反应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button type="button" onclick="alert('Hello World')">点击我</button>
</body>
</html>

效果图：

JavaScript:改变HTML内容、属性样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo">这是一个段落</p>

    <script>
        function myFunction(){
            x=document.getElementById("demo");    //找到元素
            x.innerHTML="Hello JavaScript!";      //改变内容
            x.style.color="red";          //改变样式
        }
    </script>
    <button type="button" onclick="myFunction()">点击</button>
</body>
</html>

效果图：
点击前：

点击后：

JavaScript：验证输入

用正则表达式对输入的空格，或者连续空格isNaN进行判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
  <input id="demo" type="text">
  <script>
    function myFunction(){
        var x=document.getElementById("demo").value
        if(isNaN(x)||x.replace(/(^\s*)| (\s*$)/g,"")==""){
             alert("不是数字");
        }
    }
  </script>
  <button type="button" onclick="myFunction()">点击</button>
</body>
</html>

效果图：

`<body>`中的JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <script>
    document.write('<h1>hello world</h1>')
  </script>
</body>
</html>

效果图：

`<head>`中的Javascript函数

JavaScript 函数放置到 HTML 页面的 <head> 部分

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script>
       document.write('<h1>hello world</h1>')
     </script>
</head>
<body>
 
</body>
</html>

效果图：

外部的JavaScript

可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
在 <script>标签的 “src” 属性中设置该 .js 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <h1>web页面</h1>
   <p id="demo">段落</p>
   <button type="button" onclick="myFunction()">点击</button>
   <script src="myScript.js"></script>
</body>
</html>

外部的myScript.js文件内容

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

效果图：

注意细节：

在标签中填写 onclick 事件调用函数时，不是 οnclick=函数名，而是 οnclick=函数名+()

<script> 
function myfunction(){
    document.getElementById("demo").innerHTML="onclick事件触发";
}
</script>
</head>
<body>
    <h1 id="demo">一个段落</h1>
    <button onclick="myfunction()" type="button">点击这里</button>
</body>

外部 javascript 文件不使用 <script>标签，直接写 javascript 代码
HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档

<script>
function myfunction(){
    document.write("使用函数来执行document.write，即在文档加载后再执行这个操作，会实现文档覆盖");
}
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
<button type="button" onclick="myfunction()">点击这里</button>

效果图：
点击前

点击后

JavaScript输出

JavaScript可以通过以下不同方式来输出数据：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <h1>我的页面</h1>
   <p id="demo">我的段落</p>

   <script>
    //使用window.alert()弹出一个带有确认按钮的对话框
    window.alert("2+3");
    //使用document.write()将内容写到HTML输出流中;从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容
    document.getElementById("demo").innerHTML = "段落已修改";
    //将JavaScript直接写在HTML 文档中
    document.write(Date());
    //写道控制台
    console.log("Hello World");
   </script>

</body>
</html>

效果图：

JavaScript 语法

JavaScript 是一个脚本语言。
它是一个轻量级，但功能强大的编程语言。

JavaScript字面量

在编程语言中，一般固定值称为字面量，如3.14
数字（number）字面量可以是整数或者是小数，或者是科学技数（e）
字符串（String）字面量 可以使用单引号或双引号
表达式字面量 用于计算
数组（Array）字面量 定义一个数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <p id="demo1"></p>
 <p id="demo2"></p>
 <p id="demo3"></p>
 <p id="demo4"></p>
 <p id="demo5"></p>
 <p id="demo6"></p>
 <p id="demo7"></p>
 <p id="demo8"></p>
 <p id="demo9"></p>


 <script>
    //数字字面量可以是整数或者是小数，或者是科学计数(e)
    //科学计数（e）123e5=12300000
    document.getElementById("demo1").innerHTML=123e5;
    //整数
    document.getElementById("demo2").innerHTML=123;
    //小数
    document.getElementById("demo3").innerHTML=3.14;
    //字符串（String）字面量 可以使用单引号或双引号
    document.getElementById("demo4").innerHTML="Hello World";
    document.getElementById("demo5").innerHTML='Hello World';
    //表达式字面量 用于计算
    document.getElementById("demo6").innerHTML=5+6;
    //数组（Array）字面量 定义一个数组
    document.getElementById("demo7").innerHTML=[1,2,3,4,5];
 </script>

</body>
</html>

效果图：

对象（Object）字面量 定义一个对象

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数（Function）字面量 定义一个函数

function myFunction(a, b) { return a * b;}

JavaScript变量

在编程语言中，变量用于存储数据值
变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值
变量是一个名称。字面量是一个值
JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量
JavaScript 语句和 JavaScript 变量都对大小写敏感。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<p id="demo"></p>
<script>
    var length=6;
    document.getElementById("demo").innerHTML=length;
</script>

</body>
</html>

效果图：

JavaScript 操作符

JavaScript 操作符用于执行运算符的操作
算术运算符 加、减、乘、除、取模、递增、递减
赋值运算符 赋值、加法赋值、减法赋值、乘法赋值、除法赋值、递增赋值、递减赋值
比较运算符 等于、不等于、大于、小于、大于或等于、小于或等于
逻辑运算符 逻辑非、逻辑与、逻辑或

运算符优先级按先后顺序排列如下：

JavaScript使用算术运算符来计算值
JavaScript使用赋值运算符给变量赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<p id="demo"></p>
<p id="demo1"></p>
<script>
    //使用赋值运算符给变量赋值
    var x=7;
    var y=6;
    var z=(x+y)*100;
    document.getElementById("demo1").innerHTML=z;
    //使用 算术运算符 来计算值
    document.getElementById("demo").innerHTML=(5+6)*10;
</script>

</body>
</html>

效果图：

JavaScript语句标识符

JavaScript 语句通常以一个语句标识符为开始，并执行该语句。
语句标识符是保留关键字不能作为变量名使用。
下图列出了 JavaScript 语句标识符 (关键字) ：

JavaScript语句

JavaScript 语句是发给浏览器的命令。
这些命令的作用是告诉浏览器要做的事情
分号;
分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句
JavaScript 代码
JavaScript 代码是 JavaScript 语句的序列。
浏览器按照编写顺序依次执行每条语句。
JavaScript 代码块
JavaScript 可以分批地组合起来。
代码块以左花括号开始，以右花括号结束。
代码块的作用是一并地执行语句序列
反斜杠（\）
可以在文本字符串中使用反斜杠对代码行进行换行

JavaScript关键字

JavaScript 关键字用于标识要执行的操作，例如：var 关键字告诉浏览器创建一个新的变量

JavaScript 注释

JavaScript 注释是程序员编写代码时添加的文本，可以用于解释代码的作用，也可以用于隐藏代码
单行注释以 // 开头
多行注释以 /* 开头，以 */ 结尾

JavaScript 函数

avaScript 语句可以写在函数内，函数可以重复引用
引用一个函数 = 调用函数(执行函数内的语句)

JavaScript 字母大小写

JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。

js代码写在body，head和body后面的区别

计算机读代码的顺序是从上往下读的,html文件中的顺序是<head>→<body>→body后方
javascript代码写在<head>里面：
由于这时候网页主体（body）还未加载，所以这里适合放一些不是立即执行的自定义函数，立即执行的语句则很可能会出错（视浏览器而定）
javascript代码写在<body>里面：
这里可以放函数也可以放立即执行的语句，但是如果需要和网页元素互动的（比如获取某个标签的值或者给某个标签赋值），Javascript代码务必在标签的后面
javascript代码写在<body>下面：
这时候整个网页已经加载完毕了，所以这里最适合放需要立即执行的命令，而自定义函数之类的则不适合。

js中的立即执行函数

js立即执行函数通常用来创建一个独立的作用域并立即执行,常见的形式有小括号,或者一元运算符两种形式.立即函数内定义的任何变量或函数作用域也仅在当前立即函数体内,变量要有修饰符,不然就变成了全局变量
小括号
js引擎会把小括号内解释为表达式,这样就可以定义函数并立即执行了
小括号括起来的匿名/非匿名函数,如果需要传参可以在定义时使用形参,调用小括号内传入实参,当然js函数的特性你也可以不声明形参使用arguments对象

//使用小括号定义的立即执行函数
(function(){
	...
})()
 
(function(a,b){
	...
})(a,b)
 
 
//当然调用函数小括号也可以在内部
(function(){
	...
}())
 
(function(a,b){
	...
}(a,b))
 
 
//上面的匿名函数也可以是非匿名函数,当然除非是要用到递归调用,一般没必要,这个函数作用域仅在立即执行函数体内
 
(function test(a,b){
	...
})(a,b)

一元运算符
js引擎会把一元运算符后面的匿名函数解释为表达式,这样就可以定义函数并立即执行了;常用的有+,-,!,~等
形式和上面小括号的一样,只不过把小括号去掉,然后前面加上这些一元运算符即可

~function(a,b){
	
}(a,b)
 
~function test(a,b){
	
}(a,b)

JavaScript 正则表达式

什么是正则表达式？
正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
语法

/正则表达式主体/修饰符(可选)

其中修饰符是可选的
实例

var patt = /runoob/i

实例解析：
/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)

使用字符串方法

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。

search() 方法使用正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<p>搜索字符串"runoob",并显示匹配的起始位置：</p>
<button onclick="myFunction()">点击</button>
<p id="demo"></p>

<script>
    function myFunction() {
        var str = "Visit Runoob!";
        var n = str.search(/Runoob/i);
        document.getElementById("demo").innerHTML = n;
    }
</script>

</body>
</html>

效果图：

replace() 方法使用正则表达式

使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>替换 "microsoft" 为 "Runoob" :</p>
    <button onclick="myFunction()">点我</button>
    <p id="demo">Visit Microsoft!</p>
    <script>
    function myFunction() {
        var str = document.getElementById("demo").innerHTML; 
        var txt = str.replace(/microsoft/i,"Runoob");
        document.getElementById("demo").innerHTML = txt;
    }
    </script>

</body>
</html>

效果图：

正则表达式修饰符

正则表达式模式

使用 test()

test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
以下实例用于搜索字符串中的字符 “e”：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var patt1=new RegExp("e");
        document.write(patt1.test("The best things in life are free"));
    </script>

</body>
</html>

使用 exec()

exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
以下实例用于搜索字符串中的字母 “e”:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var patt1=new RegExp("e");
        document.write(patt1.exec("The best things in life are free"));
    </script>

</body>
</html>

效果图：