JavaScript学习

一、JavaScript简介

JavaScript 是脚本语言,是一种轻量级的编程语言。可以插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

1.1 主要学习内容

JavaScript:直接写入 HTML 输出流

document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

对事件的反应

<button type="button" onclick="alert('欢迎!')">点我!</button>

改变 HTML 内容

x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

改变 HTML 图像
改变 HTML 样式

x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式

验证输入
JavaScript 常用于验证用户的输入。

二、JavaScript 用法

HTML 中的脚本必须位于 标签之间。
脚本可被放置在 HTML 页面的 和 部分中。

script标签:在 HTML 页面中插入 JavaScript,使用 会告诉 JavaScript 在何处开始和结束。
script> 和 /script> 之间的代码行包含了 JavaScript

body> 中的 JavaScript :JavaScript 会在页面加载时向 HTML 的 写文本:

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>

JavaScript 函数和事件
上面例子中的 JavaScript 语句,会在页面加载时执行。
如果需要在某个事件发生时执行代码,比如当用户点击按钮时。
把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。

在 head 或者 body 的JavaScript
HTML 文档中可以放入不限数量的脚本。
脚本可位于 HTML 的 或 部分中,或者同时存在于两个部分中。
通常把函数放入 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

<head 中的 JavaScript 函数
本例中,把一个 JavaScript 函数放置到 HTML 页面的 部分。该函数会在点击按钮时被调用:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

<body 中的 JavaScript 函数
本例中,把一个 JavaScript 函数放置到 HTML 页面的 部分。该函数会在点击按钮时被调用:

<!DOCTYPE html>
<html>
<body>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件,请在

2.1 JavaScript 输出

JavaScript 没有任何打印或者输出的函数。
JavaScript 显示数据:JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

2.2 JavaScript 语法

JavaScript 是一个脚本语言。它是一个轻量级,但功能强大的编程语言。

JavaScript 字面量
在编程语言中,一般固定值称为字面量,如 3.14。
数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。
字符串(String)字面量 可以使用单引号或双引号。
表达式字面量 用于计算。
数组(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 来定义变量, 使用等号来为变量赋值。
注:变量是一个名称。字面量是一个值。

JavaScript 语句
在 HTML 中,JavaScript 语句向浏览器发出的命令。语句是用分号分隔。

JavaScript 关键字
JavaScript 关键字用于标识要执行的操作。
和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用。
如var 关键字告诉浏览器创建一个新的变量。

JavaScript 数据类型
JavaScript 有多种数据类型:数字,字符串,数组,对象等等:

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 函数
JavaScript 语句可以写在函数内,函数可以重复引用:
引用一个函数 = 调用函数(执行函数内的语句)。

JavaScript 字母大小写
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

2.3 JavaScript 语句

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

分号
分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。

JavaScript 代码
JavaScript 代码是 JavaScript 语句的序列。
浏览器按照编写顺序依次执行每条语句。

JavaScript 代码块
JavaScript 可以分批地组合起来。
代码块以左花括号开始,以右花括号结束。
代码块的作用是一并地执行语句序列。

JavaScript 语句标识符
JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句。
语句标识符是保留关键字不能作为变量名使用。

语句描述
break用于跳出循环。
catch语句块,在 try 语句块执行出错时执行 catch 语句块。
continue跳过循环中的一个迭代。
do … while执行一个语句块,在条件语句为 true 时继续执行该语句块。
for在条件语句为 true 时,可以将代码块执行指定的次数。
for … in用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。
function定义一个函数
if … else用于基于不同的条件来执行不同的动作。
return退出函数
switch用于基于不同的条件来执行不同的动作。
throw抛出(生成)错误 。
try实现错误处理,与 catch 一同使用。
var声明一个变量。
while当条件语句为 true 时,执行语句块。

2.4 JavaScript 数据类型

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

引用数据类型:对象(Object)、数组(Array)、函数(Function)。

注:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型

JavaScript 字符串
字符串是存储字符(比如 “Bill Gates”)的变量。
字符串可以是引号中的任意文本。可以使用单引号或双引号。

JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带
极大或极小的数字可以通过科学(指数)计数法来书写。

JavaScript 数组
下面的代码创建名为 cars 的数组:
var cars=new Array();
cars[0]=“Saab”;
cars[1]=“Volvo”;
cars[2]=“BMW”;

或者 (condensed array):
var cars=new Array(“Saab”,“Volvo”,“BMW”);

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

声明变量类型
声明新变量时,可以使用关键词 “new” 来声明其类型:
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;

注:JavaScript 变量均为对象。声明一个变量,就创建了一个新的对象。

2.4.1 JavaScript 对象

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

对象定义
可以使用字符来定义和创建 JavaScript 对象:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

访问对象属性
可以通过两种方式访问对象属性:
person.lastName; person["lastName"];

2.5 JavaScript 函数

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

JavaScript 函数语法
函数就是包裹在花括号中的代码块,前面使用了关键词 function:
function functionName()
{
// 执行代码
}
当调用该函数时,会执行函数内的代码。
注:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

调用带参数的函数
在调用函数时,可以向其传递值,这些值被称为参数。这些参数可以在函数中使用。
可以发送任意多的参数,由逗号 (,) 分隔:
myFunction(argument1,argument2)
当声明函数时,要把参数作为变量来声明:
function myFunction(var1,var2)
{
代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。

2.5.1 JavaScript 函数定义

JavaScript 使用关键字 function 定义函数。
函数可以通过声明定义,也可以是一个表达式。

函数表达式
JavaScript 函数可以通过一个表达式定义。
函数表达式可以存储在变量中:
var x = function (a, b) {return a * b};

在函数表达式存储在变量后,变量也可作为一个函数使用:
var x = function (a, b) {return a * b};
var z = x(4, 3);

以上函数实际上是一个 匿名函数 (函数没有名称)。
函数存储在变量中,不需要函数名称,通常通过变量名来调用。

注:上述函数以分号结尾,因为它是一个执行语句。

Function() 构造函数
函数同样可以通过内置的 JavaScript 函数构造器(Function())定义。
在 JavaScript 中,很多时候,需要避免使用 new 关键字。

自调用函数
函数表达式可以 “自调用”。
自调用表达式会自动调用。
如果表达式后面紧跟 () ,则会自动调用。
不能自调用声明的函数。
通过添加括号,来说明它是一个函数表达式。

函数是对象
在 JavaScript 中使用 typeof 操作符判断函数类型将返回 “function” 。
但是JavaScript 函数描述为一个对象更加准确。
JavaScript 函数有 属性 和 方法。
arguments.length 属性返回函数调用过程接收到的参数个数。

函数定义作为对象的属性,称之为对象方法。
函数如果用于创建新的对象,称之为对象的构造函数。

2.5.2 JavaScript 函数参数

函数显式参数在函数定义时列出。
函数隐式参数在函数调用时传递给函数真正的值。

参数规则
JavaScript 函数定义显式参数时没有指定数据类型。
JavaScript 函数对隐式参数没有进行类型检测。
JavaScript 函数对隐式参数的个数没有进行检测。

默认参数
ES5 中如果函数在调用时未提供隐式参数,参数会默认设置为: undefined
有时这是可以接受的,但是建议最好为参数设置一个默认值。

通过值传递参数
在函数中调用的参数是函数的隐式参数。
JavaScript 隐式参数通过值来传递:函数仅仅只是获取值。
如果函数修改参数的值,不会修改显式参数的初始值(在函数外定义)。
隐式参数的改变在函数外是不可见的。

通过对象传递参数
在JavaScript中,可以引用对象的值。
因此我们在函数内部修改对象的属性就会修改其初始的值。
修改对象属性可作用于函数外部(全局变量)。
修改对象属性在函数外是可见的。

2.5.3 JavaScript 函数调用

JavaScript 函数有 4 种调用方式。
每种方式的不同在于 this 的初始化。

this 关键字
一般而言,在Javascript中,this指向函数执行时的当前对象。

作为一个函数调用

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) 返回 20

以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。
在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTML 页面。
在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。
注:这是调用 JavaScript 函数常用的方法, 但不是良好的编程习惯
全局变量,方法或函数容易造成命名冲突的bug。

全局对象
当函数没有被自身的对象调用时 this 的值就会变成全局对象。
在 web 浏览器中全局对象是浏览器窗口(window 对象)。
注: 函数作为全局对象调用,会使 this 的值成为全局对象。
使用 window 对象作为一个变量容易造成程序崩溃。

函数作为方法调用
函数作为对象方法调用,会使得 this 的值成为对象本身。

使用构造函数调用函数
如果函数调用前使用了 new 关键字, 则是调用了构造函数。
这看起来就像创建了新的函数,但实际上 JavaScript 函数是重新创建的对象。
构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。
构造函数中 this 关键字没有任何的值。this 的值在函数调用实例化对象(new object)时创建。

作为函数方法调用函数
在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。

2.6 JavaScript 作用域

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

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

JavaScript 局部作用域
变量在函数内声明,变量为局部作用域。
局部变量:只能在函数内部访问。
因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。

JavaScript 全局变量
变量在函数外定义,即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。

函数参数
函数参数只在函数内起作用,是局部变量。

HTML 中的全局变量
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

2.7 JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。

HTML 事件
HTML 事件可以是浏览器行为,也可以是用户行为。
以下是 HTML 事件的实例:

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击
    通常,当事件发生时,可以做些事情。在事件触发时 JavaScript 可以执行一些代码。
    HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。

常见的HTML事件

事件描述
onchangeHTML 元素改变
onclick用户点击 HTML 元素
onmouseover鼠标指针移动到指定的元素上时发生
onmouseout用户从一个 HTML 元素上移开鼠标时发生
onkeydown用户按下键盘按键
onload浏览器已完成页面的加载

三、JavaScript 类(class)

类是用于创建对象的模板。
通过使用 class 关键字来创建一个类,类体在一对大括号 {} 中,可以在大括号 {} 中定义类成员的位置,如方法或构造函数。
每个类中包含了一个特殊的方法 constructor(),它是类的构造函数,这种方法用于创建和初始化一个由 class 创建的对象。

创建一个类的语法格式如下:
class ClassName {
constructor() { … }
}

使用类
定义好类后,我们就可以使用 new 关键字来创建对象。
创建对象时会自动调用构造函数方法 constructor()。

类表达式
类表达式是定义类的另一种方法。类表达式可以命名或不命名。命名类表达式的名称是该类体的局部名称。

构造方法
构造方法是一种特殊的方法:

  • 构造方法名为 constructor()。
  • 构造方法在创建新对象时会自动执行。
  • 构造方法用于初始化对象属性。
  • 如果不定义构造方法,JavaScript 会自动添加一个空的构造方法。

类的方法
通过关键字 class 创建一个类,可以添加一个 constructor() 方法,然后添加任意数量的方法。

3.1 JavaScript 类继承

JavaScript 类继承使用 extends 关键字。
继承允许依据另一个类来定义一个类,super() 方法用于调用父类的构造函数。
当创建一个类时,不需要重新编写新的数据成员和成员函数,只需指定新建的类继承了一个已有的类的成员即可。这个已有的类称为基类(父类),新建的类称为派生类(子类)。
继承代表了 is a 关系。
super() 方法引用父类的构造方法。
通过在构造方法中调用 super() 方法,调用了父类的构造方法,这样就可以访问父类的属性和方法。

getter 和 setter
类中可以使用 getter 和 setter 来获取和设置值,getter 和 setter 都需要在严格模式下执行。
类中添加 getter 和 setter 使用的是 get 和 set 关键字。

3.2 JavaScript 静态方法

静态方法是使用 static 关键字修饰的方法,又叫类方法,属于类的,但不属于对象,在实例化对象之前可以通过 类名.方法名 调用静态方法。
静态方法不能在对象上调用,只能在类中调用。

四、JavaScript HTML DOM

HTML DOM 定义了访问和操作 HTML 文档的标准。
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。

HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

4.1 JavaScript HTML DOM - 改变CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

改变 HTML 样式
语法:
document.getElementById(id).style.property=新样式

4.2 HTML DOM - 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。
对事件作出反应
当事件发生时,可以执行 JavaScript,比如当用户点击一个 HTML 元素时。
如需在用户点击某个元素时执行代码,需把 JavaScript 代码添加到 HTML 事件属性中:
οnclick=JavaScript

HTML 事件的例子:

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图片已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当 HTML 表单被提交时
  • 当用户触发按键时
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值