岛屿尽

dyingjin

JavaScript简记

发表于 更新于 分类于

菜鸟教程

简介

JavaScript 是脚本语言

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

可直接写入HTML输入流

1
2
3
4
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>

简单逻辑判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<body>
	
<h1>我JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(x==""||isNaN(x))
	{
		alert("不是数字");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

在HTML中使用

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
内部使用如上例，外部调用如下：

1
<script src="myScript.js"></script>

语法

基本语法

JavaScript 字面量

自然有

  • 数字（Number）字面量

3.14
101
123e5（科学计数）

  • 字符串（String）字面量
    “John Doe”
    ‘John Doe’（单引号或双引号）
  • 表达式字面量
    5 + 6
    5 * 10（直接算出答案）
  • 数组（Array）字面量
    [40, 100, 1, 10]
  • 对象（Object）字面量
    {firstName:”John”, lastName:”Doe”, age:50, eyeColor:”blue”}
  • 函数（Function）字面量
    function myFunction(a, b) { return a * b;}

JavaScript 变量

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

1
2
3
var x, length
x = 5
length = 6

JavaScript 使用动态弱类型
实际数据类型是根据赋值确定，具有兼容性（可16+“0”输出160）

1
2
3
4
5
var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

注释

可以用//123456来
可多行注释以 /* 开始，以 */ 结尾。

对代码行进行折行

可用以下输出你好 世界!

1
2
document.write("你好 \
世界!");

不可（报错）

1
2
document.write \ 
("你好世界!");

输出

JavaScript 没有任何打印或者输出的函数，但可通过以下方法来输出数据：

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

1
2
3
<script>
window.alert(5 + 6);
</script>

显示11

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

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<body>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
<script>
document.write(Date());
</script>

</body>
</html>

显示：

1
2
3
我的第一个 Web 页面
段落已修改。
Thu Oct 14 2021 19:51:02 GMT+0800 (中国标准时间)

这种写入有覆盖的顺序，以上代码是在加载HTML时便写入，而以下是后来写入则会覆盖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    document.write(Date());
}
</script>

</body>
</html>

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

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

---------------THEEND---------------