JavaScript
目标:
1、掌握 JavaScript 的基础语法
2、掌握 JavaScript 的常用对象(Array、String)
3、能根据需求灵活运用定时器及通过 js 代码进行页面跳转
4、能通过DOM 对象对标签进行常规操作
5、掌握常用的事件
6、能独立完成表单校验案例
JavaScript简介
JavaScript 是一门跨平台、面向对象的脚本语言,而Java语言也是跨平台的、面向对象的语言,只不过Java是编译语言,是需要编译成字节码文件才能运行的;JavaScript是脚本语言,不需要编译,由浏览器直接解析并执行。
JavaScript 和 Java 是完全不同的语言,不论是概念还是设计,只是名字比较像而已。但是基础语法类似,所以我们有java的学习经验,再学习JavaScript 语言就相对比较容易些。
JavaScript(简称:JS) 在 1995 年由 Brendan Eich 发明,并于 1997 年成为一部 ECMA 标准。ECMA 规定了一套标准 就叫ECMAScript ,所有的客户端校验语言必须遵守这个标准,当然 JavaScript 也遵守了这个标准。ECMAScript 6 (简称ES6) 是最新的 JavaScript 版本(发布于 2015 年),我们的课程就是基于最新的 ES6 进行讲解。
JavaScript引入方式
JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种:
内部脚本:将 JS代码定义在HTML页面中
外部脚本:将 JS代码定义在外部 JS文件中,然后引入到 HTML页面中
内部脚本
外部脚本
JavaScript基础语法
书写语法
区分大小写:与 Java 一样,变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
如果一行上写多个语句时,必须加分号用来区分多个语句。
注释
单行注释:// 注释内容
多行注释:/* 注释内容 */
注意:JavaScript 没有文档注释
大括号表示代码块
下面语句大家肯定能看懂,和 java 一样 大括号表示代码块。
输出语句
js 可以通过以下方式进行内容的输出,只不过不同的语句输出到的位置不同
变量
JavaScript 中用 var 关键字(variable 的缩写)来声明变量。格式 var 变量名 = 数据值; 。而在JavaScript 是一门弱类型语言,变量可以存放不同类型的值;如下在定义变量时赋值为数字数据,还可以将变量的值改为字符串类型的数
js 中的变量名命名也有如下规则,和java语言基本都相同
1、组成字符可以是任何字母、数字、下划线(_)或美元符号($)
2、数字不能开头
3、建议使用驼峰命名
针对如上的问题,ECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于 var ,但是所声明的变量,只在 let 关7键字所在的代码块内有效,且不允许重复声明。
例如:
数据类型
JavaScript 中提供了两类数据类型:原始类型 和 引用类型。
原始数据类型:
运算符
JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的,不同的是 JS 关系运算符中的== 和===一会我们只演示这两个的区别,其他运算符将不做演示
一元运算符:++,–
算术运算符:+,-,*,/,%
赋值运算符:=,+=,-=…
关系运算符:>,<,>=,<=,!=,==, ===…
逻辑运算符:&&,||,!
三元运算符:条件表达式 ? true_value : false_value
==和===的区别
类型转换
上述讲解 == 运算符时,发现会进行类型转换,所以接下来我们来详细的讲解一下 JavaScript 中的类型转换。
其他类型转为number
string 转换为 number 类型:按照字符串的字面值,转为数字。如果字面值不是数字,则转为NaN
将 string 转换为 number 有两种方式:
使用 + 正号运算符:
使用 parseInt() 函数(方法):
其他类型转为boolean
使用场景:
流程控制语句
if 语句
switch语句
for循环
while循环语句
dowhile循环语句
函数
函数(就是Java中的方法)是被设计为执行特定任务的代码块;JavaScript 函数通过 function 关键词进行定义。
函数调用
JavaScript常用对象
Array对象
JavaScript Array对象用于定义数组
元素访问
特点
方法
Array 对象同样也提供了很多方法,如下图是官方文档截取的
String对象
自定义对象
BOM
BOM:Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。
我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。比如:我现在想将浏览器地址栏的地址改为
https://www.itheima.com 就可以通过使用 BOM 中定义的 Location 对象的 href 属性,代码: location.href = “https://itheima.com”;
BOM 中包含了如下对象:
Window:浏览器窗口对象
Navigator:浏览器对象
Screen:屏幕对象
History:历史记录对象
Location:地址栏对象
下图是 BOM 中的各个对象和浏览器的各个组成部分的对应关系
Window对象
window 对象是 JavaScript 对浏览器的窗口进行封装的对象。
获取window对象
window对象属性
window对象函数
案例
History对象
Location对象
获取Location对象
Location对象属性
案例
DOM
概述
获取 Element对象
HTML Element对象使用
事件监听
事件绑定
常见事件
RegExp对象
正则对象使用
创建对象
函数
正则表达式