JavaScript简介及常用语法

news2025/1/20 11:57:23

简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web ，更可广泛用于服务器、 PC 、

笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习

引入 JavaScript 代码

内部引用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入JavaScript代码</title>
</head>
<body>
<script>
alert("hello world");
</script>
</body>
</html>

注意： JavaScript 代码需要用 script 标签进行包裹， script 标签放在 body 或 head 部分都可运行

外部引用

demo.js

<script>alert("hello world");</script>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="./demo.js"></script>
</body>
<script>alert("hello world");</script>
</html>

JavaScript 输出

JavaScript 没有任何打印或者输出的函数

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

使用 window.alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。

使用 console.log() 写入到浏览器的控制台。

window.alert()

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

操作 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>

注意：

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码

innerHTML = " 段落已修改。 " 是用于修改元素的 HTML 内容 (innerHTML) 的 JavaScript 代码

写到 HTML 文档

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>

写到控制台

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值

浏览器中使用 F12 来启用调试模式，在调试窗口中点击 "Console" 菜单

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>

JavaScript 语句是发给浏览器的命令

这些命令的作用是告诉浏览器要做的事情

分号

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript语法</title>
</head>
<body>
<h1>我的网页</h1>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
a = 1;
b = 2;
c = a + b;
document.getElementById("demo1").innerHTML = c;
x = 1; y = 2; z = x + y;
document.getElementById("demo2").innerHTML = z;
</script>
</body>
</html>

代码块

JavaScript 可以分批地组合起来

代码块以左花括号开始，以右花括号结束

代码块的作用是一并地执行语句序列

本例向网页输出一个标题和两个段落

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码块</title>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="myPar">我是一个段落。</p>
<div id="myDiv">我是一个div。</div>
<p>
<button type="button" onclick="myFunction()">点击这里</button>
</p>
<script>
function myFunction(){
document.getElementById("myPar").innerHTML="你好世界！";
document.getElementById("myDiv").innerHTML="你最近怎么样?";
}
</script>
<p>当您点击上面的按钮时，两个元素会改变。</p>
</body>
</html>

变量

在编程语言中，变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值

我们使用 var 关键词来声明变量：

var carname;

变量声明之后，该变量是空的（它没有值）。

如需向变量赋值，请使用等号：

carname="Volvo";

不过，您也可以在声明变量时对其赋值：

var carname="Volvo";

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量</title>
</head>
<body>
<p>点击这里来创建变量，并显示结果。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
}
</script>
</body>
</html>

注意：多变量声明时：

一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可

var lastname="Doe", age=30, job="carpenter";

算数运算符

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一只雪梨干(runoob.com)</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
</script>
</body>
</html>

赋值运算符

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一只雪梨干(runoob.com)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x, y, z;
x = 5;
y = 6;
z = (x + y) * 10;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

JavaScript 关键字

JavaScript 关键字用于 标识要执行的操作

和其他任何编程语言一样， JavaScript 保留了一些关键字为自己所用。

var 关键字告诉浏览器创建一个新的变量

注释

// 后面的内容不会当作 JavaScript 进行解析（单行注释）

/* */ （多行注释）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注释符号</title>
</head>
<body>
<h1 id="myH1"></h1>
<p id="myP"></p>
<script>
// 输出标题：
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落：
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>
<p><b>注释：</b>注释不会被执行。</p>
</body>
</html>

JavaScript 字母大小写

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时，请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样，变量 myVariable 与 MyVariable 也是不同的。

语句标识符

JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句

语句标识符是保留关键字不能作为变量名使用