JavaScript基本语法_javascript literal example-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41696334/article/details/104580826

本文深入讲解JavaScript中的五种数据输出方法：使用innerHTML修改HTML元素内容，利用document.write()进行HTML输出，通过window.alert()弹出警告框，借助console.log()记录至浏览器控制台，以及操作innerHTML属性展示数据。同时，文章还探讨了JavaScript的基本语法，包括语句结构、关键词、运算符、表达式和注释等内容。

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

JavaScript基本语法

JavaScript输出

JavaScript不提同任何内建的打印或显示函数。
JavaScript能够以不同的方式“显示”数据
- 使用window.alert()写入警告框
- 使用document.write()写入HTML输出
- 使用innerHTML写入HTML元素
- 使用console.log()写入浏览器控制台

使用innerHTML

如需访问HTML元素，JavaScript可使用document.getElementById(id)方法。
id属性定义HTML元素。innerHTML属性定义HTML内容：

<!DOCTYPE html>
<html>
	<body>
		<h1>一张网页</h1>
		<p>一个段落</p>
		<p id="demo"></p>
		<script>
			document.getElementById("demo").innerHTML = 1+1;
		</script>
	</body>
</html>

👇运行结果👇
在这里插入图片描述

更改HTML元素的innerHTML属性是在HTML中显示数据的常用方法。

使用document.write()

出于测试目的，使用document.write()比较方便：

<!DOCTYPE html>
<html>
	<body>
		<h1>一张网页</h1>
		<p>一个段落</p>
		<script>
			document.write(1+1);
		</script>
	</body>
</html>

👇运行结果👇

在这里插入图片描述

注意：在HTML文档完全加载后使用document.write()将删除所有已有的HTML。
注意：document.write()方法仅用于测试。

使用window.alert()

使用警告框来显示数据：

<!DOCTYPE html>
<html>
	<body>
		<h1>一张网页</h1>
		<p>一个段落</p>
		<script>
			window.alert(1+1);
		</script>
	</body>
</html>

👇运行结果👇
在这里插入图片描述

使用console.log()

在浏览器中，我们可以使用console.log()方法来显示数据。
通过F12来激活浏览器控制台，并在菜单中选择“Console”。

<!DOCTYPE html>
<html>
	<body>
		<h1>一张网页</h1>
		<p>一个段落</p>
		<script>
			console.log(1+1);
		</script>
	</body>
</html>

👇运行结果👇
在这里插入图片描述

JavaScript语句

在HTML中，JavaScript语句是由web浏览器“执行”的“指令”。
在HTML中，JavaScript程序由web浏览器执行。

JavaScript语句以下构成

值
运算符
表达式
关键词
注释

分号；

分号分隔JavaScript语句，请在每条可执行语句之后添加分号。
如果有分号，运行在同一行写多条语句。

	a = 1;
	b = 1;
	c = a + b;

	d = 2; e = 2; f = d + e;

以分号结束语句不是必需的，但是我们仍然要有这个好习惯。

JavaScript空白字符

JavaScript会忽略多个空格。您可以向脚本添加空格，以增加可读性。
在运算符旁边（= + - * /）添加空格是个好习惯。

JavaScript行长度和折行

为了达到最佳的可读性，程序原常常喜欢把代码行控制在80个字符以内。
如果语句太长，对齐进行折行的最佳位置是某个运算符：

document.getElementById("demo").innerHTML = 
"Hello Word!!";

JavaScript代码块

JavaScript语句可以用花括号（{……}）组合在代码块中。
代码块的作用是定义一同执行的语句。

function myFunction(){
	document.getElementById("demo1").innerHTML = "加油武汉！";
	document.getElementById("demo2").innerHTML = "加油中国！";
}

JavaScript关键词（部分）

JavaScript语句常常通过某个关键字来标识需要执行的JavaScript动作。

关键词	描述
`debugger`	停止执行JavaScript，并调用调试函数（如果可用）。
`var`	声明变量
`function`	声明函数
`for`	标记需被执行的语句块，只要条件为真。
`if…else`	标记需被执行的语句块，根据某个条件。
`for`	标记需被执行的语句块，只要条件为正。
`switch`	标记需被执行的语句块，根据不同的情况。
`continue`	跳出循环并在顶端开始。
`break`	终止`switch`或循环。
`try…catch`	对语句块实现错误处理。
`return`	退出函数

JavaScript关键词指的是保留的单词，保留词无法用作变量名。

JavaScript语法

JavaScript语法是一套规则，它定义了JavaScript的语言结构。

	var x，y;		//如何声明变量
	x = 1;y = 2;	//如何赋值
	z = x + y;		//如何计算值

JavaScript值

JavaScript语句定义两种类型的值：混合值和变量值。
混合值被称为字面量（literal）。变量值被称为变量。

字面量

书写字面值最重要的规则是：
- 写数值有无小数点均可。
- 字符串是文本，由双引号或单引号包围。

变量

在编程语言中，变量用于存储数据值。
JavaScript使用var关键词来声明变量。
=号用于为变量赋值。
- 一条语句，多个变量，中间用逗号分隔（可跨多行）。
- Value = undefined。在计算机程序中，被声明的变量如果不带有值，它的值将是undefined。
- 如果两次声明某个JavaScript变量，它的值不会丢失。

JavaScript运算符

算术运算符（+ - * / ++ -- % += -+ == != > < >= <= ?: **）
逻辑运算符（&& || !）
类型运算符
- typeof：返回变量类型
- instanceof：返回true，如果对象是对象类型的实例。
赋值运算符（=）
位运算
- 位运算符处理32位数。
- 该运算中的任何数都会被转换为32位的数。结果会被转换黑JavaScript数。

运算符	描述	例子	等同于	结果	十进制
`&`	与	`5 & 1`	`0101 & 0001`	0001	1
`\|`	或	`5 \| 1`	`0101 \| 0001`	0101	5
`~`	非	`~ 5`	`~0101`	1010	10
`^`	异或	`5 ^ 1`	`0101 ^ 0001`	0100	4
`<<`	零填充左位移	`5 << 1`	`0101 << 1`	1010	10
`>>`	有符号右位移	`5 >> 1`	`0101 >> 1`	0010	2
`>>>`	零填充右位移	`5 >>> 1`	`0101 >>> 1`	0010	2