1 JS概述
2 在HTML中引入JS代码
- 2.1 内部引用
- 2.2 外部引用
- 2.3 功能演示：修改标签内容
- - 2.3.1 内部引用
  - 2.3.2 外部引用
3 JS变量
- 3.1 变量名的命名规则
- 3.2 变量的声明
- 3.3 变量的赋值
- 3.4 变量类型
- - 3.4.1 Number
  - 3.4.2 字符串
  - 3.4.3 布尔值
4 JS数组
5 流程控制
- 5.1 if 语句
- 5.2 else 语句
- 5.3 else if 语句
6 JS函数
7 JS对象
- 7.1 对象的创建及访问
- 7.2 浏览器内置基本对象
- - 7.2.1 window
  - 7.2.2 navigator
  - 7.2.3 location
  - 7.2.4 document
8 事件
参考文章

List item

1 JS概述

（1）JavaScript（官方名称为ECMAScript）是 web 开发者必学的三种语言之一：

HTML 定义网页的内容；
CSS 规定网页的布局；
JavaScript 对网页行为进行编程。

（2）作用：在浏览器上实现一些动态的效果.说明JS的运行环境是浏览器。
（3）标签：在 HTML 中，JavaScript 代码必须位于 <script> </script> 标签之间。

（4）JavaScript 函数和事件
JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。例如，当发生事件时调用函数，比如当用户点击按钮时。

（5）JS脚本位置
与HTML混编，且JS脚本可被放置与 HTML 页面的任何位置，如 <body> 、 <head> 部分中，或兼而有之。甚至可以放置在文本外部。

（6）JS语法
JS的语法和java语言类似，每个语句以[；]结束，语句块用{…}。但是Javascript并不强制要求在每个语句的结尾加分号[；]，浏览器中负责执行Javascript并代码的引擎会自动在每个语句的结尾补上[；]。

（7）JS输出语句：

alert()；弹窗
confirm();弹窗
prompt();弹窗
console.log；在控制台输出。

tips:
DOM:document object model，文档对象模型。

2 在HTML中引入JS代码

2.1 内部引用

在 HTML 中，JavaScript 代码必须位于 <script> </script> 标签之间。代码如下，其中JS代码可以位于HTML页面的任意位置，

<html><head><title>JS代码测试</title><meta charset="utf-8"><script>//正式进入JS代码alert("This is my first web");</script></head><body></body>
</html>
<script>alert("hello,word!")</script>

上述代码运行结果如下：

点确定后，又弹出下一条个框。

2.2 外部引用

（1）html代码文件名为test_out.html，具体代码如下：

<html><head><title>JS代码测试</title><meta charset="utf-8"><script src="./js/test.js"></script><!--js的引用采用相对路径--></head><body></body>
</html>

当采用绝对路径引用js脚本时

   <script src="http://172.16.1.1/JS/js/test.js"></script><!--js的引用采用绝对路径-->

（2）js代码文件名为test.js，具体代码如下。注意，当通过浏览器直接访问js代码文件时，只能返回纯文本内容，而不能执行该脚本。这是由于js脚本中没有定义<script></script>标签。

alert("This is from test.js");

2.3 功能演示：修改标签内容

2.3.1 内部引用

可以在网站https://www.w3school.com.cn/tiy/t.asp?f=eg_js_use_body中验证以下代码。
第5行定义了一个标签，id属性为demo。
第6行定义了一个按钮，当点击是触发函数myFunction。
第8~11行定义了一段JS脚本，是一个函数，当函数触发时，修改id为demo的标签内容。

<!DOCTYPE html>
<html>
<body>
<h2>Body 中的 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button><script>
function myFunction() {document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</body>
</html>

2.3.2 外部引用

可以在网站https://www.w3school.com.cn/tiy/t.asp?f=eg_js_use_external中验证以下代码。
在代码第8行，引入了外部文件，该文件中已经对myFunction进行定义，其余内容与上一例子类似。

在外部文件中放置脚本有如下优势：

分离了 HTML 和代码；
使 HTML 和 JavaScript 更易于阅读和维护；
已缓存的 JavaScript 文件可加速页面加载。

<!DOCTYPE html>
<html>
<body>
<h2>外部 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
<p>（myFunction 存储在名为 "myScript.js" 的外部文件中。）</p>
<script src="/demo/myScript.js"></script>
</body>
</html>

3 JS变量

变量的概念基本和初中代数的方程变量是一致的，只是在计算机程序中，变量不仅可以是数字，还可以是任意数据类型。

3.1 变量名的命名规则

构造变量名称（唯一标识符）的通用规则是：

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称，如if、while等

3.2 变量的声明

在 JavaScript 中创建变量被称为“声明”变量。您可以通过 var 关键词来声明 JavaScript 变量：var carName;声明之后，变量是没有值的。（技术上，它的值是 undefined。）如需赋值给变量，请使用等号：carName = "porsche";您也可以在声明变量时向它赋值：var carName = "porsche"。
在上面的例子中，我们创建了名为 carName 的变量，并向其赋值 “porsche”。然后，我们在 id=“demo” 的 HTML 段落中“输出”该值：

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

3.3 变量的赋值

在 JavaScript 中，使用等号（=）对变量进行赋值。可以把任意数据类型赋值给变量，同一个变量可以反复赋值，而且可以是不同类型的变量，但要注意只能使用var申明一次，例如：

var a=123;//a的值是整数123
a='ABC';//a变为字符串

这种变量本身类型不固定的语言称为动态语言，与之对应的是静态语言。静态语言在定义变量时必须指出变量类型，如果赋值的时候类型不匹配，就会报错。例如java是静态语言，赋值语句如下：

int a=123;//a是整数型变量，类型用int声明
a='ABC';//错误，不能把字符串赋值给整型变量

和静态语言相比，动态语言更灵活，就是这个原因。

下面的代码在代数中是不合理的：

x = x + 5

然而在 JavaScript 中，它非常合理：把 x + 5 的值赋给 x。（计算 x + 5 的值并把结果放入 x 中。x 的值递增 5。）注释：JavaScript 中的“等于”运算符是 ==。

3.4 变量类型

JavaScript 变量可存放数值，比如 100，以及文本值，比如 “Bill Gates”。在编程中，文本值被称为字符串。

JavaScript 可处理多种数据类型，但是现在，我们只关注数值和字符串值。

字符串被包围在双引号或单引号中。数值不用引号。如果把数值放在引号中，会被视作文本字符串。

实例

var pi = 3.14;
var person = "Bill Gates";
var answer = 'How are you!';

3.4.1 Number

JavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型：

123;//整数123
0.456;//浮点数0.456
1.2345e3;//科学计数法表示1.2345x1000
-99;//负数
NaN;//NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity;//Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

3.4.2 字符串

字符串是以单引号’或双引号"括起来的任意文本，比如’abc’，“xyz”。请注意，’ '或" "本身只是一种表示方式，不是字符串的一部分。

3.4.3 布尔值

布尔值和布尔代数的表示完全一致，一个布尔值只有true、false两种值，要么是true，要么是false，可以直接用true、false表示布尔值，也可以通过布尔运算计算出来：

var a=1>2;//a的值为false

tips:
null表示一个“空”值，它和0以及空字符串’ ‘不同，0是一个数值，’ '表示长度为0的字符串，而null表示“空”。

4 JS数组

数组是一种特殊的变量，它能够一次存放一个以上的值。数组的创建如下：

var cars = ["Saab", "Volvo", "BMW"];

假如要取"Volvo"，则取cars[1]，角标为偏移量。

5 流程控制

在您写代码时，经常会需要基于不同判断执行不同的动作。您可以在代码中使用条件语句来实现这一点。
在 JavaScript 中，我们可使用如下条件语句：

使用 if 来规定要执行的代码块，如果指定条件为 true
使用 else 来规定要执行的代码块，如果相同的条件为 false
使用 else if 来规定要测试的新条件，如果第一个条件为 false
使用 switch 来规定多个被执行的备选代码块

5.1 if 语句

请使用 if 语句来规定假如条件为 true 时被执行的 JavaScript 代码块。

语法
if (条件) {如果条件为 true 时执行的代码
}

注释：if 使用小写字母。大写字母（IF 或 If）会产生 JavaScript 错误。

实例
如果时间早于 18:00，则发出 “Good day” 的问候：

if (hour < 18) {greeting = "Good day";
}

如果时间早于 18 点，则 greeting 的结果将是：

Good day

5.2 else 语句

请使用 else 语句来规定假如条件为 false 时的代码块。

if (条件) {条件为 true 时执行的代码块
} else { 条件为 false 时执行的代码块
}

实例
如果 hour 小于 18，创建 “Good day” 问候，否则 “Good evening”：

if (hour < 18) {greeting = "Good day";} else {greeting = "Good evening";}

greeting 的结果：

Good day

5.3 else if 语句

请使用 else if 来规定当首个条件为 false 时的新条件。

if (条件 1) {条件 1 为 true 时执行的代码块
} else if (条件 2) {条件 1 为 false 而条件 2 为 true 时执行的代码块} else {条件 1 和条件 2 同时为 false 时执行的代码块
}

实例
如果时间早于 10:00，则创建 “Good morning” 问候，如果不是，但时间早于 18:00，则创建 “Good day” 问候，否则创建 “Good evening”：

if (time < 10) {greeting = "Good morning";} else if (time < 18) {greeting = "Good day";} else {greeting = "Good evening";}

greeting 的结果：

Good day

更多流程控制语句请详见《JavaScript 教程》。

6 JS函数

JavaScript 函数是通过 function 关键词定义的。您可以使用函数声明或函数表达式。
函数声明
通过如下语法声明函数：

function functionName(parameters) {要执行的代码
}

被声明的函数不会直接执行。它们被“保存供稍后使用”，当它们被调用时才会被执行。
实例

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

7 JS对象

在 JavaScript 中，对象是王。如果您理解了对象，就理解了 JavaScript。

在 JavaScript 中，几乎“所有事物”都是对象。

布尔是对象（如果用 new 关键词定义）
数字是对象（如果用 new 关键词定义）
字符串是对象（如果用 new 关键词定义）
日期永远都是对象
算术永远都是对象
正则表达式永远都是对象
数组永远都是对象
函数永远都是对象
对象永远都是对象
所有 JavaScript 值，除了原始值，都是对象。

7.1 对象的创建及访问

对象的创建如下，值按照名称 : 值对的形式编写（名称和值以冒号分隔）。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

要获取一个对象的属性，可以用以下两种方式：

console.log(person.age);//更常用
console.log(person["age"]);

7.2 浏览器内置基本对象

7.2.1 window

window对象代表浏览器，比如浏览器内置的对象、自己定义的变量、函数等都作为window的属性，就当于域名中的根，window常省略。

7.2.2 navigator

navigator对象表示浏览器的信息，最常用的属性包括：

navigator.appName:浏览器的名称
navigator.appVersion：浏览器的版本
navigator.language:浏览器设置的语言
navigator.platform:操作系统类型
navigator.userAgent:浏览器设置的userAgent字符串

7.2.3 location

location对象表示当前页面的URL信息，例如想要获得一个完整的URL，可以使用location.href

location.href:当前页面的URL信息
location.protocol:当前页面的协议
location.hash：当前页面的URL中#及后面的部分
location.host：当前页面的URL信息中的主机
location.port:当前页面使用的端口
location.search：当前页面的URL信息中的参数

7.2.4 document

在 DOM 中，document 节点是节点树中的顶层节点，代表的是整个 HTML 文档，它是操作文档其他内容的入口。一个 document 节点就是一个 document 对象。document 节点通过调用它的方法或属性来访问或处理文档。document 节点的常用属性和方法分别见表 1 和表 2。

实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>document节点的应用</title>
</head>
<body><p id='p1'>段落</p><div>DIV</div><script>var oP = document.getElementById('p1');var oDIV = document.getElementsByTagName('div')[0];console.log('document节点类型为：'+document.nodeType);console.log('当前文档的修改时间为：'+document.lastModified);console.log('当前文档的标题为：'+document.title);console.log('使用document节点获取的对象如下所示：');console.log(oP);console.log(oDIV);</script>
</body>
</html>

上述代码的运行结果如下：

注意，document.cookie很重要：

alert(document.cookie);弹出显示cookie信息的框。
document.cookie="cookie名称=cookie值"；当cookie名称为之前不存在时，新增cookie信息，当cookie名称为之前已存在时，则为修改cookie信息。

8 事件

当用户点击某个 HTML 元素时启动一段 JavaScript。

窗口事件属性（Window Event Attributes）:由窗口触发该事件 (适用于标签):
表单事件(Form Events):表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内)
键盘事件（Keyboard Events）
鼠标事件（Mouse Events）:通过鼠标触发事件, 类似用户的行为。
多媒体事件(Media Events):通过视频（videos），图像（images）或者音频（audio）触发该事件，多应用于 HTML 媒体元素比如 <audio>, <embed>, <img>, <object>, 和<video>:

下面是一些常见的 HTML 事件：

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

实例：

<input type="button" onclick="alert('xss')" value="bu1">
<input type="button" onmouseover="fm()" value="bu2">
<script>function fm(){alert("css");}
</script>

上述代码运行结果如下：

参考文章

[1]《JavaScript 教程》W3school对JS的文本教程。

【JS基础-1】JavaScript语言简单介绍（语法、变量、数组、流程控制语句、函数、对象和事件）相关推荐

JS基础：JavaScript 起源以及介绍
目录 1. 起源 2. 简史 3. 实现 4. JS 简介 5. JS的特点 6. JS的作用 7. HTML/CSS/JavaScript关系 7.1 HTML/CSS标记语言--描述类 7.2 J ...
【转】简单介绍几个CDS视图聚合函数
今天简单介绍几个CDS视图聚合函数. 1.SUM 代码举例如下: @AbapCatalog.sqlViewName: 'ZCDS_AGGR' @AbapCatalog.compiler.compare ...
Linux C基础02——进制转换和c语言简单介绍
一,进制转换其他进制转换到二进制: 10->2:除二取余逆取法!小数部分乘积(2)取整,顺写法! 16->2: 一位转四位 0x放在首位,表示16进制,0x2F: 8->2: 一 ...
salesforce lightning零基础学习(一) lightning简单介绍以及org开启lightning
lightning对于开发salesforce人员来说并不陌生,即使没有做过lightning开发,这个名字肯定也是耳熟能详.原来的博客基本都是基于classic基于配置以及开发,后期博客会以ligh ...
c语言驱动程序开发基础教程,C 语言入门介绍
C 语言入门介绍适用于初学者和专业人士的C语言教程采用编程方法,可帮助您轻松理解C语言教程.我们的C教程通过程序解释了每个主题. C语言是由Dennis Ritchie开发的,用于创建与硬件设备(例 ...
脚本与脚本语言简单介绍
本文简单介绍一下"脚本"与"脚本语言"的概念,主要参考自维基百科等资料. 脚本(Script) 使用脚本语言所写的程序.脚本语言是为了缩短传统电脑语言编译链接的 ...
php js 进度条,JavaScript实现简单动态进度条效果
这篇文章主要为大家详细介绍了JavaScript实现简单动态进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js实现动态进度条效果的具体代码,供大家参考,具体内容如下 ...
html js异步绑定,JavaScript异步机制介绍
异步就是代码执行的顺序,并不是按照从上到下的顺序一次性执行,而是在不同的时间段执行,一部分代码在"未来执行".本文就来为大家介绍一下JavaScript中的异步机制. 单线程异步执 ...
【CAPL】CAPL的简单介绍及变量
文章目录前言一.CAPL 1.程序结构 2.数据类型 3.常用关键字 4.全局变量与局部变量 5.复合类型 6.其他类型总结前言 CAPL(COMMUNICATION Access Progr ...

【JS基础-1】JavaScript语言简单介绍（语法、变量、数组、流程控制语句、函数、对象和事件）

目录