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

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

时间：2021-11-10 00:54:38

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 Number3.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 window7.2.2 navigator7.2.3 location7.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></head><body></body></html>

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

<script src="http://172.16.1.1/JS/js/test.js"></script>

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

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

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

2.3.1 内部引用

可以在网站/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 外部引用

可以在网站/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的值是整数123a='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;//整数1230.456;//浮点数0.4561.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 事件：

实例：

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

上述代码运行结果如下：