JavaScript学习笔记——基础（1）

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
第一章 JavaScript小白基础（1）

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

一、JavaScript小白基础（1）

---

前言

提示：这里可以添加本文要记录的大概内容：

JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都可以使用 JavaScript。
JavaScript 非常容易学。
本学习笔记将教你学习从初级到高级 JavaScript 知识。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、JavaScript基础

1、JavaScript 显示数据

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

使用 window.alert() 弹出警告框。
你可以弹出警告框来显示数据：

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

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

<script>
document.write(data());
</script>

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

<p id='demo'>要修改的地方</p>
<script>
document.getElementById("demo").innerHTML="段落已修改";
</script>

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

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

2、JavaScript 语法

·JavaScript 字面量

在编程语言中，一般固定值称为字面量，如 3.14。

数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。

字符串（String）字面量 可以使用单引号或双引号
表达式字面量 用于计算:

5 * 10

数组（Array）字面量 定义一个数组：

[40, 100, 1, 5, 25, 10]

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

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

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

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

·JavaScript 变量

在编程语言中，变量用于存储数据值。 JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋

var x, length

x = 5

length = 6

·JavaScript 操作符

JavaScript使用 算术运算符 来计算值

(5 + 6) * 10

JavaScript使用赋值运算符给变量赋值：

x = 5
y = 6
z = (x + y) * 10

·JavaScript 关键字

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

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

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

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

3、JavaScript 语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
分号用于分隔 JavaScript 语句。

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

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

JavaScript 代码
JavaScript 代码是 JavaScript 语句的序列。

浏览器按照编写顺序依次执行每条语句。

JavaScript 代码块
JavaScript 可以分批地组合起来。

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

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

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

function myFunction()
{
    document.getElementById("demo").innerHTML="你好Dolly";
    document.getElementById("myDIV").innerHTML="你最近怎么样?";
}

JavaScript 注释
单行注释以 // 开头。

\\我是注释

多行注释以 /* 开始，以 */ 结尾。

/*
我是一个
多行注释
*/

声明和赋值 JavaScript 变量
我们使用 var 关键词来声明变量：

var carname;

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

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

carname="Volvo";

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

var carname="Volvo";

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

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

声明也可横跨多行
一条语句中声明的多个变量不可以同时赋同一个值:

var x,y,z=1;

4、JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

变量的数据类型可以使用 typeof 操作符来查看：

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

JavaScript 数字类型
极大或极小的数字可以通过科学（指数）计数法来书写：

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。
JavaScript 数组
下面的代码创建名为 cars 的数组：

var cars = new Array();
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";

或者

var cars = new Array("Saab","Volvo","BMW");

或者
var cars = [“Saab”,“Volvo”,“BMW”];

5、JavaScript 对象

JavaScript 对象是拥有属性和方法的数据。

对象定义👇

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person = {firstname:"tom",lastname:"jerry",age:19};

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 age。
空格和折行无关紧要。声明可横跨多行：

var person = {
firstname:"tom",
lastname:"jerry",
age:19
};

对象属性

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性。

访问对象属性
对象方法

对象属性有两种寻址方式：

name = person.lastname;
name = person["lastname"];

访问对象方法

可以使用以下语法创建对象方法：

methodName ： function(){
	//代码
}

6、JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname(){
	//执行代码
}

当调用该函数时，会执行函数内的代码。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

调用带参数的函数
在调用函数时，你可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
你可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

当声明函数时，请把参数作为变量来声明：

function myFunction(var1,var2)
{
\\代码
}

例子👇

<!DOCTYPE html>
<html>	
<head> 
<meta charset="utf-8"> 
<title>调用带参数的函数</title> 
</head>
<body>

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
	alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

带有返回值的函数
有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。

语法

function myFunction()
{
    var x=5;
    return x;
}

例子

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>带有返回值的函数</title> 
</head>
<body>

<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
	return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

</body>
</html>

7、JavaScript 作用域

作用域是可访问变量的集合。
在 JavaScript 中, 对象和函数同样也是变量。

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

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

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

实例👇

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

JavaScript 全局变量

变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

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

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
以下实例中 carName 在函数内，但是为全局变量。

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

HTML 中的全局变量
在 HTML 中, 全局变量是 window 对象，所以window 对象可以调用函数内对局部变量。

注意：所有数据变量都属于 window 对象。

//此处可使用 window.carName
 
function myFunction() {
    carName = "Volvo";
}

8、JavaScript 事件

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

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

---

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

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

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
以下实例中，按钮元素中添加了 onclick 属性

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

在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

常见的HTML事件

• onchange
• onclick
• onmouseover
• onmouseout
• onkeydown
• onload

9、JavaScript 字符串

JavaScript 字符串用于存储和处理文本。
字符串可以存储一系列字符
可以使用索引位置来访问字符串中的每个字符：

var character = carname[7];

字符串的索引从 0 开始，这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。

你可以在字符串中使用引号，但字符串中的引号不要与字符串的引号相同：

var answer = "It's alright";

也可以在字符串添加转义字符来使用引号：

var x = 'It\'s alright';

字符串长度
可以使用内置属性 length 来计算字符串的长度：

var txt = "Hello World!";
document.write("<p>" + txt.length + "</p>");

字符串可以是对象

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

=== 为绝对相等，即数据类型与值都必须相等。

var x = "John";             
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象

字符串属性和方法

10、JavaScript 运算符

运算符 = 用于赋值。
运算符 + 用于加值。

JavaScript 算术运算符
/——除法
%——取余数
JavaScript 赋值运算符

x+=y——x=x+y
x-=y——x=x-y

用于字符串的 + 运算符
运算符用于把文本值或字符串变量加起来（连接起来）。

如需把两个或多个字符串变量连接起来，请使用 + 运算符。

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

JavaScript 比较 和 逻辑运算符
比较和逻辑运算符用于测试 true 或者 false。

• 比较运算符
  略
• 逻辑运算符
  && ||
  !——not

x = 5;
y = 6;
!(x==y) //为 true

总结

提示：这里对文章进行总结：

例如：以上就是JavaScript小白基础的一部分内容，本文仅仅简单介绍了JavaScript的简单语法和一些使用，之后还会不断完善学习笔记。