一、JS01 JavaScript 基础
一、JavaScript 基础
1.1 JavaScript 概述
1.1.1 JavaScript 基本介绍
- JavaScript （简称 JS） 是一种具有函数优先级的轻量级、解释型、即时编译型的编程语言
- JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格
- JavaScript的标准是 ECMAScript
- ECMAScript 是一套脚本规范，用于定制行为准则，JavaScript 则是这套行为准则的具体实现
1.1.2 JavaScript 的用途
-
嵌入动态文本于 html 页面
-
读写 html 元素
-
与 css 进行交互
-
对浏览器事件做出响应
-
在数据被提交到服务器之前验证数据
-
检测访客的浏览器信息
-
创建、修改、删除 cookie 和缓存
-
基于 node.js 技术进行服务器端编程
1.2 JavaScript 的组成及基本结构
1.2.1 JavaScript 的组成
- 一个完整的 JavaScript 由三部分组成：ECMAScript、DOM、BOM
- ECMAScript
- 一种脚本程序设计语言
- 主要描述了 JavaScript 的语法、变量、数据类型、运算符、逻辑控制语句、关键字、对象等
- DOM (Document Object Model, 文档对象模型)
- HTML 稳定对象模型定义的一套标准方法
- 用来访问和操作 HTML 稳定
- 例如电商网站页面弹出的提示框
- BOM (Browser Object Model，浏览器对象模型)
- 用于描述对象与对象之间层次关系的模型
- 浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
- 例如、网页弹出新浏览器窗口的能力，移动、关闭和更改浏览器窗口大小的能力
1.2.2 JavaScript 的基本结构
- **使用 JavaScript 时，可以将代码写入 ==为止
- 语法如下
<script type="text/javascript">
//JavaScript 语句;
script>
- type 属性用于指定文本使用的语言类别
- 使用 JavaScript 在网页中输出 “你好，JavaScript” 示例如下
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 的基本结构title>
head>
<body>
<script>
document.write("你好,JavaScript");
script>
body>
html>
- 效果如下图所示
- document.write() 表示用来向页面输出可以包含 HTML 标签的内容
- 标签可以包含在文档中的任何地方，需要保证这些代码在被使用前已读取并加载到内存
1.2.3 在网页中引入 JavaScript 代码
将 JavaScript 代码引入网页中有三种方式
1、内部 JavaScript 文件
2、外部 JavaScrip 文件
3、直接写在 HTML 标签中
1、内部 JavaScript 文件
- 直接使用
2、外部 JavaScript 文件
-
将 JavaScript 代码写入一个外部文件，以 .JS 为扩展名保存
-
然后将改文件指定给
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部 JavaScript 文件title>
head>
<body>
<script type="text/javascript" sec="js文件路径">script>
body>
html>
- 外部 JavaScript 文件常用于代码量较大，并且若干页面中具有相同的 JavaScript 效果的情况
- 可以很好地达到代码复用的效果
3、直接写入 HTML 标签中
- 直接将 JavaScript 代码写在 HTML 标签中适用于简短的 JavaScript 代码
- 直接写入 HTML 标签中 语法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>直接写入 HTML 标签中title>
head>
<body>
<input type="button" value="单击弹出对话框"
onclick="javascript:alert('你好，JavaScript');">
body>
html>
1.3 JavaScript 的核心语法
JavaScript 的核心语法包含变量的声明和赋值、数据类型、运算符、逻辑控制语句等基本语法
1.3.1 变量的声明和赋值
1、变量的声明
- JavaScript 变量都由关键字 var 声明
- var 声明变量的语法如下
var 变量名;
- 变量名可以由数字、字母、下划线及 “$” 符合组成
- 变量名首字母不能为数字，也不能使用关键字命名
- 声明变量时，可以一次性声明多个变量
- 语法格式如下
var 变量名1,变量名2,...;
2、变量的赋值
- 声明变量同时使用 = 对变量进行初始化赋值
- 语法格式如下
var 变量名=值;
var 变量1,变量2,变量3=值1,值2,值3
1.3.2 JavaScript 的数据类型
**JavaScript 是弱脚本语言，声明变量时无需指定变量的数据类型，因为 JavaScript 变量的数据类型是解释时动态决定的 **
1、基本数据类型
基本数据类型包含 数值类型（number）、字符串类型（string）、布尔类型（boolean）
-
数值类型
- JavaScript 的数值类型包括所有的整型变量、还包括所有的浮点型变量
- JavaScript 支持八进制和十六进制。
- 八进制以 0 开头表示，十六进制以 0x 或 0X 开头表示
- 当数值类型超出了表述范围，将会出现两个特殊值：Infinity（正无穷大）和 -Infintiy（负无穷大）
- JavaScript 中有一个特殊值—— NaN。表示非数值，它是数值类型
-
字符串类型
- JavaScript 的字符串必须用引号括起来，可以是单引号，也可以是双引号
- 例如
var str1="123abc"; var str2='123abc';- string 类包含的一些方法
方法名 作用 charAt() 返回指定位置的字符串 toUpperCase() 把字符串转换成大写 toLowerCase() 把字符串转换成小写 indexOf() 返回某个指定的字符串在字符串中首次出现的位置 subString() 用于提取字符串中介于两个指定下标之间的字符 split() 用于把一个字符串分割成字符串数组 replace() 用于在字符串中用一些字符替换另一些字符 -
布尔类型
- 布尔类型的值只有两个 true 和 false
- 布尔类型的值通常是逻辑运算的结果，或用于标志对象的某种状态
2、特殊数据类型
- 特殊数据类型包含 **空类型（null）**和 未定义类型（undefined）
- null 表示变量的值为空，可以用来检测某个变量是否被赋值
- undefined 类型的值只有一个 fndefined，用于表示某个变量不存在，或者没有为其分配值，也用于表示对象的属性不存在
- null 表示变量是有值的，只是其值为 null
3、判断数据类型
- typeof 运算符用来判断某个值或变量的数据类型
- 语法格式如下
typeof(值或变量);
- typeof 的返回值
| 返回值 | 说明 |
|---|---|
| number | 如果变量是数值类型，则返回 number |
| string | 如果变量是字符串类型，则返回 string |
| boolean | 如果变量是布尔类型，则返回 boolean |
| object | 如果变量是空类型，或者是一种引用类型，如对象、函数、数值、则返回object |
| undefined | 如果变量是未定义类型，没有赋予值，则返回 undefined |
1.4 系统对话框
浏览器可以通过 alert()、confirm()、prompt() 方法调用系统对话框向用户显示消息
1.4.1 alert()
- alert() 方法用于向用户显示一个警告对话框
- 包含指定的文本和一个 “确定” 按钮
- 示例
alert("确认登录吗")
- 效果图
1.4.2 confrim()
- confirm() 方法用于向用户显示一个消息对话框
- 该对话框包含一个指定文本已经 “确认” 按钮 和 “取消” 按钮
- 点击确定 返回 true，点击取消返回 false
- 示例
confirm("确认登录吗")
- 效果图
1.4.3 prompt()
- prompt() 方法会弹出一个提示对话框，等待用户输入一些数据
- 当用户点击确认时，返回值是用户所输入的数据，类型为 string
- 语法格式如下
prompt("提示信息","输入框的默认信息");
- 示例
prompt("今天是几月几号","4月9号");
- 效果图
1.5 初识函数
在 JavaScript 中，函数类似于 Java 中的函数
JavaScript 中的函数不要定义属于某个类，因此调用时不需要使用对象吗调用
1.5.1 系统函数
JavaScript 中常用的系统函数有三种
ParseInt() 、parseFloat() 、isNaN()
1、parseInt()
- parseInt() 函数可以将字符串类型的数据转为整数类型
- parseInt() 会先判断是否是数字，如果是数字，则进行转换，否则，返回 NaN
- 示例
var num1=parseInt("56.64"); //返回56
var num2=parseInt("123abc") //返回123
var num3=parseInt("hello") //返回 NaN
2、parseFloat()
- parseFloat() 函数可以将字符串类型的数据转为浮点类型
- parseFloat() 与 parseInt() 的处理方式相似
- 第一个出现的小数点是有效字符串，如果有第二个小数点，那么第二个小数点无效
- 示例
var num1=parseFloat("3.1415926"); //返回 3.1415926
var num2=parseFloat("123abc"); //返回123
var num3=parseFloat("hello"); //返回 NaN
var num4=parseFloat("52.18.97"); //返回 52.18
3、inNaN()
- 用于检查其参数是否是非数字
- 如果 是特殊的非数字，则返回 true，否则返回 false
- 示例
var num1=isNaN("20.5"); //返回值为 false
var num2=isNaN("123abc"); //返回 true
var num3=isNaN("48.98"); //返回 false
1.5.2 自定义函数
与 Java 语言一样，JavaScript 需要先定义函数，然后才能调用函数
定义函数的方法有两种：1、函数声明 2、函数表达式
1、函数声明
- 函数声明由关键字 function、函数名、一组参数及大括号组成
- 函数声明 语法
function 函数名([参数1,参数2,参数3,...]){
//JavaScript 语句;
返回值
}
- 声明完一个函数后，可以执行这个函数
- 执行一个函数，必须先调用这个函数
- 调用函数时，必须指定函数名及其后面的参数(有参的情况下),函数的调用一般和元素的事件结合使用
- 调用函数 语法
事件名="函数名([参数])";
2、函数表达式
- 将一个函数赋给一个变量，此时形成了函数表达式
- 函数表达式 语法
var 变量=function(参数1,参数2,参数3,...){
//JavaScript 语句
}
-
函数声明和函数表达式的基本使用方法是一样
-
函数声明和函数表达式的不同之处
-
具体代码示例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
//函数声明
function f1(){
document.write("兰巧儿真可爱!
")
}
f1();
function f1(){
document.write("兰巧儿真可爱！哈哈哈~~~
")
}
f1();
//函数表达式
var f2=function (){
document.write("巧克力
")
}
f2();
var f2=function (){
document.write("哇哦，是巧克力
")
}
f2();
script>
body>
html>
- 运行结果
- 由此可以看出，使用函数声明的方法定义的两个函数名相同的函数，后面的函数会覆盖前面的函数
- 使用函数表达式的方式定义的函数，会从上到下逐行执行代码输出结果
1.5.3 函数自调用
- 在自定义函数中，如果函数有名字，如 **function study(){} **则会被称为 命名函数
- 如果函数没有名字，如 function() 则被称为匿名函数
- 匿名函数的调用
(function(){
//函数体
})();
- 将 function(){} 匿名函数放在一对 () 中，就实现了调用，称之为函数自调用
- 函数自调用的特点就是函数没有名字，在声明时直接调用
- 好处在于，自调用不会像函数声明那样，覆盖前面的函数
1.6 事件
1.6.1 事件的概念及作用
当与浏览器交互时，浏览器就会触发各种事件来完成网页中的各种特效
- 常用的事件如下
| 事件名 | 作用 |
|---|---|
| onload | 一个页面或一幅图像完成加载 |
| onclick | 鼠标单机某个对象 |
| onmouseover | 鼠标指针移到某元素上 |
| onmouseout | 鼠标指针离开某元素 |
| onkeydown | 某个键盘按键被按下 |
| onchange | 域的内容被改变 |
- 示例，当按钮被单机时，触发函数
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
function fn(){
alert("兰巧儿真可爱!");
}
script>
<input type="button" value="按钮" onclick="fn()">
body>
html>
| onload | 一个页面或一幅图像完成加载 |
| onclick | 鼠标单机某个对象 |
| onmouseover | 鼠标指针移到某元素上 |
| onmouseout | 鼠标指针离开某元素 |
| onkeydown | 某个键盘按键被按下 |
| onchange | 域的内容被改变 |
- 示例，当按钮被单机时，触发函数
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
function fn(){
alert("兰巧儿真可爱!");
}
script>
<input type="button" value="按钮" onclick="fn()">
body>
html>