JS基础、语法、事件及函数

一、JavaScript基础

JavaScript 是 web 开发者必学的三种语言之一：

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

1.JavaScript的简介

JavaScript由布兰登·艾奇在1995年利用10天完成设计的，网景公司最初命名为LiveScript，后来与Sun合作后改名为JavaScript。

JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（脚本语言：不需要编译，在运行过程中由js解释器逐行进行解释和执行）

JS引擎：也成为JS解释器。用来读取网页中的JS代码对其处理后运行，例chrome浏览器的V8。

2.JavaScript的功能

JavaScrip可以与通过允许你执行计算、检查表单、编写交互式游戏、添加特殊效果、自定义图形选择、创建安全密码等来增强页面的动态性和交互动能。

1.JavaScript 能够改变 HTML 内容
JavaScript 同时接受双引号和单引号
例：

<p id="demo">JavaScript 能够改变 HTML 内容。</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>改变</button>

点击前：

点击后：

2.JavaScript 能够改变 HTML 属性
例：

<p>JavaScript 能够改变 HTML 属性值。</p>
<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>

点击开灯：

点击关灯：

3.JavaScript 能够改变 HTML 样式 (CSS)

<p id="demo">JavaScript 能够改变 HTML 元素的样式。</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
改变</button>

点击前：

点击后：

4.JavaScript 能够隐藏 HTML 元素
可以通过改变 display 样式来隐藏 HTML 元素
例：

<p id="demo">JavaScript 能够隐藏 HTML 元素。</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">
隐藏</button>

点击前：

点击后：

5.JavaScript 能够显示 HTML 元素
可通过改变 display 样式来显示隐藏的 HTML 元素
例：

<p>JavaScript 能够显示隐藏的 HTML 元素</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">
显示</button>

点击前：

点击后：

3.JavaScript的组成

1. JavaScript语法（ECMAScript）

   ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

2. 页面文档对象模型（DOM）

   文档对象模型是W3C组织推荐的处理可扩展标记语言的标准编程接口，可以对页面上的各种元素进行操作（大小、位置、颜色等)。

3. 浏览器对象模型（BOM）

   BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，可以操纵浏览器窗口。

4.JavaScript的写法

1. 行内式

<input type="button" value="点击" onclick="alert('Hello!')"/>

2. 内嵌式（常用）

<script>
   alert('Hello!');
</script>

3. 外部式

<script src="my.js"></script>

5.JavaScript的输入输出语句

方法	说明
alert(msg)	浏览器弹出警示框
console.log(msg）	浏览器控制台打印输出信息
prompt(info)	浏览器弹出输入框，用户可以输入

二、JavaScript语法

JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构。

var x, y; // 声明变量
x = 7; y = 8; // 赋值
z = x + y; // 计算值

1.JavaScript 值

JavaScript 语句定义两种类型的值：混合值和变量值。
混合值被称为字面量（literal）。变量值被称为变量。

2.JavaScript 字面量

• 写数值有无小数点均可
• 字符串是文本，由双引号或单引号包围

3.JavaScript 变量

JavaScript 变量是存储数据值的容器。

JavaScript 使用 var 关键词来声明变量。

= 号用于为变量赋值。

4.JavaScript 运算符

• JavaScript 使用算数运算符（+ - * /）来计算值

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模
++	递加
–	递减

• JavaScript 使用赋值运算符（=）向变量赋值

运算符	描述
=	x=y ，将y的值赋给x
+=	x+=y等价于x=x+y
-=	x-=y等价于x=x-y
*=	x*=y等价于x=x*y
/=	x/=y等价于x=x/y
%=	x%=等价于x=x%y

5.JavaScript 表达式

• 表达式是值、变量和运算符的组合，计算结果是值。
• 表达式也可包含变量值，值可以是多种类型，比如数值和字符串。

6.JavaScript 关键词

JavaScript 关键词用于标识被执行的动作。

7.JavaScript 注释

JavaScript 注释用于解释 JavaScript 代码，增强其可读性。

JavaScript 注释也可以用于在测试替代代码时阻止执行。

• 单行注释

  单行注释以 // 开头。
  任何位// 与行末之间的文本都会被 JavaScript 忽略。

• 多行注释

  多行注释以 /* 开头，以 */ 结尾。
  任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。

8.JavaScript 标识符

• JavaScript 变量必须以唯一的名称的标识，而标识符就是唯一的名称。
• 在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。
• 在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。
• 连串的字符可以是字母、数字、下划线或美元符号。
• 数值不可以作为首字符。

9.JavaScript 字符集

JavaScript 使用 Unicode 字符集。

10.JavaScript 大小写问题

• JavaScript 标识符对大小写敏感。
• 常见方法：下划线法和驼峰法

下划线：

first_name, last_name, master_card, inter_city.

驼峰式大小写（Camel Case）：

FirstName, LastName, MasterCard, InterCity.

三、JavaScript事件

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

当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。
HTML 事件
HTML 事件可以是浏览器或用户做的某些事情。
例如：

• HTML 网页完成加载
• HTML 输入字段被修改
• HTML 按钮被点击

1.事件的三要素

1. 事件源 事件被触发的对象
2. 事件类型 事件触发机制（鼠标点击onclick/鼠标经过onmouseover/键盘按下onkeydown）
3. 事件处理程序 通过一个函数赋值的方式完成

JavaScript 允许您在事件被侦测到时执行代码。

通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。

2.常见的 HTML 事件

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

3.执行事件步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值形式）

示例：

<button onclick="document.getElementById('demo').innerHTML=Date()">几点了？</button>
<p id="demo"></p>

点击前：

点击后：

四、Javascript函数

JavaScript 函数是被设计为执行特定任务的代码块。

JavaScript 函数是一种 JavaScript 代码块，JavaScript 函数会在某代码调用它时被执行。

函数是对象

JavaScript 中的 typeof 运算符会为函数返回 “function”。

JavaScript 函数都有属性和方法。

函数的使用分为两步：声明函数和调用函数

1.函数的声明

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

语法：

function 函数名() {
函数体
}

• function声明函数的关键字全部小写
• 函数名一般为动词
• 声明函数本身并不会执行代码

示例：

var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
  return a * b;
}

2.函数的调用

调用函数通常也可以说“启动函数”或“执行函数”。

• 函数不调用，自己不执行
• 调用的时候千万不要忘记加小括号

调用方法有三种：

1.以函数形式调用函数
示例：

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2); 
</script>

2.把函数定义为对象方法来调用函数
示例：

<script>
var myObject = {
  firstName:"Bill",
  lastName: "Gates",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
document.getElementById("demo").innerHTML = myObject.fullName(); 
</script>

3.通过函数构造器来调用函数
示例:

<script>
function myFunction(arg1, arg2) {
  this.firstName = arg1;
  this.lastName  = arg2;
}

var x = new myFunction("Bill","Gates")
document.getElementById("demo").innerHTML = x.firstName; 
</script>

函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。

this 关键词

在 JavaScript 中，被称为 this 的事物，指的是“拥有”当前代码的对象。

this 的值，在函数中使用时，是“拥有”该函数的对象。

this 并不是变量。它属于关键词。无法改变它的值。

3.函数的参数

函数参数（parameter）指的是在函数定义中列出的名称。

函数参数（argument）指的是传递到函数或由函数接收到的真实值。arguments 对象包含函数调用时使用的参数数组。

arguments.length 会返回函数被调用时收到的参数数目

规则：

1. JavaScript 函数定义不会为参数（parameter）规定数据类型。
2. JavaScript 函数不会对所传递的参数（argument）实行类型检查。
3. JavaScript 函数不会检查所接收参数（argument）的数量。

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数成为形参；而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

参数	说明
形参	形式上的参数 函数定义的时候 传递的参数 当前并不知道是什么
实参	实际上的参数 函数调用的时候传递的参数 实参是传递给形参的

语法：

function 函数名(形参1，形参2）；{
函数代码
}
函数名（实参1，实参2）；

**参数的作用：**在函数内部某些值不能固定，可以通过参数在调用函数时传递不同的值进去。

参数通过值传递

函数调用中的参数（parameter）是函数的参数（argument）。

JavaScript 参数通过值传递：函数只知道值，而不是参数的位置。

如果函数改变了参数的值，它不会改变参数的原始值。

参数的改变在函数之外是不可见的。

4.函数的返回值

 function 函数名() {
      return 需要返回的结果;
}
函数名();

• 函数只是实现某种功能，最终结果需要返回给函数的调用者函数名()通过return实现
• 只要函数遇到return就把后面的结果返回给函数的调用者函数名()=return后面的结果。

return函数

• return后面的不会被执行
• return只返回一个值
• 函数没有return则返回undefined

5.函数方法apply和call

JavaScript call() 方法

call() 方法是预定义的 JavaScript 方法。

使用 call() 方法，可以编写能够在不同对象上使用的方法。

它可以用来调用所有者对象作为参数的方法。

示例：调用 person 的 fullName 方法，在 person1 上使用它

<script>
var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
var person2 = {
  firstName:"Steve",
  lastName: "Jobs"
}
var x = person.fullName.call(person1, "Seatle", "USA"); 
document.getElementById("demo").innerHTML = x; 
</script>

效果：

JavaScript apply() 方法
apply() 方法，能够编写用于不同对象的方法。

示例：调用 person 的 fullName 方法，在 person1 上使用它

<script>
var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
var x = person.fullName.apply(person1, ["Seatle", "USA"]); 
document.getElementById("demo").innerHTML = x; 
</script>

效果：

call() 和 apply() 之间的区别

• call() 方法分别接受参数。
• apply() 方法接受数组形式的参数。
• 如果要使用数组则 apply() 方法方便。

6.局部变量和全局变量

根据作用域的不同，变量分为全局变量和局部变量

全局变量（在函数外部定义的变量）

• 在全局作用下的变量，在全局下都可以使用
• 在全局作用域下var声明的变量是全局变量
• 在函数内部，没有声明直接赋值的变量也属于全局变量。
• 在任何一个地方都能使用

局部变量（在函数内部定义的变量）

• 在 JavaScript 函数中声明的变量，会成为函数的局部变量。
• 函数的形参也可以看作是局部变量
• 在函数内部var声明的变量是局部变量
• 局部变量只能在函数内访问。

7.函数练习

用函数把华氏度转换为摄氏度：

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function toCelsius(f) {
    return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(86);
</script>
</body>
</html>

输出结果：