JavaScript学习笔记

JavaScript

字数统计: 2.1k阅读时长: 8 min

 2021/11/23 

JavaScript基础语法学习笔记

1.简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

能实现的事：

直接写入HTML流
    document.write("<h1>这是一个标题</h1>");
//即使用这个语句，可以直接写入HTML语句
对事件产生反应
    <button type="button" onclick="alert('欢迎!')">点我!</button>
//该语句会生成一个 按钮 点击后 弹窗 欢迎！
改变HTML内容
    x=document.getElementById("demo");  //查找元素
	x.innerHTML="Hello JavaScript";    //改变内容
//该语句会将 id为demo 的html内容 修改 为 Hello JavaScript
改变HTML图像
//即能动态地改变 HTML <image> 的来源（src）
改变HTML样式
验证输入
……

总之JavaScript脚本的功能很强大

2.JavaScript用法

1	在html文件中添加脚本时，添加的脚本段必须用<script>和</script>包裹，同时这部分脚本块可以根据你的需求，放置在<body>或<head>中

2.1在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

2.2 外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
    eg：
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
    //效果类似于c的头文件或者java的包
注：外部 javascript 文件不使用 <script> 标签，直接写 javascript 代码

拓展知识：[如何通过浏览器调试JavaScript](Chrome 浏览器中执行 JavaScript | 菜鸟教程 (runoob.com))

3.JavaScript 输出

首先JavaScript不想其他编程语言，他没有任何专门的打印或者输出的函数，但你可以通过其他方式来显示数据。

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

使用window.alert()
<!DOCTYPE html>
<html>
<body>

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

<script>
window.alert(5 + 6);//中间可以是字符串，也可以是公式
</script>

</body>
</html>

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

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

如果您的浏览器支持调试，你可以使用 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>
</html>

4.javaScript 语法

1
2
3

JavaScript 是一个脚本语言。

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

在编写脚本时，<script></script>中间的语法规则按照正常的编程语法
    包括每条语句用 ';'隔开
    批注为 '//'、'/**/'
    以及关键字有 "for"、"while"、"switch"……
您可以在文本字符串中使用反斜杠对代码行进行换行：
    document.write("你好 \
世界!");
不能这样：
    document.write \ 
("你好世界!");

4.1 字面量

字面量就是C或其他编程语言中的固定值，即常量

包括：
    数字字面量；
    //1，1.011,10e2
    字符串字面量；
    //'javascript'
    表达式字面量；
    //5 * 6
    数组字面量；
    //[1,2,3,4,5]
    对象字面量；
   // {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
    函数字面量；
    //function myFunction(a, b) { return a * b;}

4.2JavaScript 变量

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

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

<p id="demo"></p>
<script>
var length;
length = 6;
document.getElementById("demo").innerHTML = length;
</script>

4.3JavaScript 关键字

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

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

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

1 2	var x = 5 + 6; var y = x * 10;

JavaScript 同样保留了一些关键字，这些关键字在当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到。

以下是 JavaScript 中最重要的保留字（按字母顺序）：

abstract	else	instanceof	super

boolean	enum	int	switch

break	export	interface	synchronized

byte	extends	let	this

case	false	long	throw

catch	final	native	throws

char	finally	new	transient

class	float	null	true

const	for	package	try

continue	function	private	typeof

debugger	goto	protected	var

default	if	public	void

delete	implements	return	volatile

do	import	short	while

double	in	static	with

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 通过对象字面量赋值

注意JavaScript 使用 Unicode 字符集。Unicode 覆盖了所有的字符，包含标点等字符。

5.JavaScript 作用域

作用域是可访问变量的集合。

在 JavaScript 中, 对象和函数同样也是变量。

在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

JavaScript 函数作用域: 作用域在函数内修改。

5.1局部作用域

1 2	变量在函数内声明，变量为局部作用域。局部变量：只能在函数内部访问。

<p>局部变量在声明的函数外不可以访问。</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML = "carName 的类型是：" +  typeof carName;
function myFunction() 
{
    var carName = "Volvo";
}
</script>

5.2 全局作用域

变量在函数外定义，即为全局变量。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

有两种类型：

1.
    var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

2.
    // 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

5.3 JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。

6.JavaScript 事件

1
2
3

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

触发事件的可以是浏览器也就是浏览器行为，用户行为。

实例：
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

案例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

</body>
</html>