HTML决定了网页中的内容
CSS决定网页内容的显示效果
JavaScript决定了网页中标签的功能及动态效果
- JS是一种嵌入在网页中的脚本语言，网页是通过测览器加戟并显示的，因此S的执行是在测览器中完成的：
- 对于浏览器而言，它能够执行JS代码，在浏览器中内置了JavaScript解释器(JavaScript引擎)
一、JavaScript介绍
1.1 JavaScript简介
JavaScript是一种
基于对象的、事件驱动型的、解释型的脚本语言
- 基于对象：（区别于面向对象），JavaScript和Java语言一样可以通过对象调用方法obj.fn()
- 事件驱动：网页文档中的HTML标签事件触发JavaScript代码执行
- 解释型：边解释边执行（不会先对网页进行编译生成中间文件)
- 脚本语言：JavaScript不会独立运行，依赖于网页文件(HTML文档)存在（通俗的可以理解为is要写在网页
中)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function test(){
alert("Hello World!")
}
</script>
</head>
<body>
<input type="button" value="测试按钮" onclick="test()"></input>
</body>
</html>
效果
1.2 JavaScript作用
JS设计的目的是实现网页的交互能力
1.2.1 JS可以干什么
- 可以动态改变网页中HTML标签的属性
- 可以动态改变网页中HTML标签的样式
- 可以对用户输入的数据进行合法性校验（格式检查）
- 可以动态操作（新增HTML标签、删除HTML标签、修改HTML标签）网页中的HTML标签
- 可以实现顶面数据的异步通信
1.2.2 JS不可以干什么
- JS虽然是在用户的浏览器中执行，但是JS不能访问用户的本地文件；
- 不能操作来自于不同服务的网页文档
二、第一个JS程序
2.1 JavaScript写在哪里？
- JS代码写在HTML文档的script标签中，script可以写在HTML文档的任何位置，通常写在body标签后，或者body标签中的最后面，并且一个HTML文档中支持多个script标签
- JS代码也可以单独写在一个后缀名为.js的文件中，在HTML文档中通过script标签引用此JS文件
2.2 JavaScript函数（方法）定义
我们将实现某个功能的JavaScript代码定义在一个函数中
函数的定义语法：function fnName([参数]) {
//Javascript代码
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function test(){
alert("Hello World!")
}
</script>
</head>
<body>
<input type="button" value="测试按钮" onclick="test()"></input>
</body>
</html>
2.3 JavaScript函数如何运行
通过HTML文档中的事件触发
三、JavaScript基础语法
3.1 变量数据类型
- Java是强类型语言：存储不同类型的值的变是声明时，需要声明为不同的类型
- JavaScript是弱类型语言：
- 变量无论存储什么类型的值，我们一律使用
var进行变量类型声明- 在JS代码如果要使用一个变量，需要先声明
- 声明一个变是需要指定其类型，所有变量都可以使用
var- 如果一个变量只完成声明而没有初始化（赋初始值），则会输出
undefined- 变量声明使用统一类型，但是变量中存储的值是有类型的
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="test1()">测试按钮</button>
<script type="text/javascript">
function test1(){
var i = 3;
var s = "abc"
var arr = [1,2,3]
console.log(i)
console.log(s)
console.log(arr)
}
</script>
</body>
</html>
效果
不同变量的初始化
- 字符串
var s = "hello";
var s = 'hello';
var s = "My name is 'keai'";
var s = 'My name is "keai"';
- 数字
var i = 12; //整数
var j = 3.14; //小数
var k = 10e5; //科学计教法
- 数组
var arr1=new Array(); //JS中创建数组是不需要指定长度的
arr1[0] = "aaa";
arr1[1] = "bbb";
var arr2 = new Array("aaa","bbb");
var arr3 = ["aaa","bbb","ccc"];
- 对象
JS中{ }就表示对象类型，JS对象的属性名可以直接定义，并且对象的属性支持扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="test()">测试按钮</button>
<script type="text/javascript">
function test(){
var stu = {stuNum:"1001",stuName:"小可爱"}
stu.stuGender = "女"
console.log(stu)
}
</script>
</body>
</html>
5. undefined
如果一个变量只声明，没有初始化，输出undefined(undefined表示变量没有值)
var = i; //如果直接输出，输出为undefined
i = "aaa";
i = nul1; //将i的值设置null,来清空i变量
3.2 运算符
表达式就是由变量和运算符组合而成的代码
3.2.1 算数运算符
加减乘除等
3.2.2 赋值运算符
例如等于
3.2.3 关系运算符
用于比较两个值的大小关系 ：例如大于、=、===（绝对等于）
3.2.4 逻辑运算符
与或非，用于连接两个逻辑条件
&&与 ||或 !非
3.2.5 三目运算符
//当条件成立时，将v1的值赋值给变量i，如果条件不成立，则将v2赋值给变量i
var i = 条件？v1:v2:
3.3 流程控制
//单分支
if(条件){
}
//双分支
if(条件){
}else{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="test1()">测试按钮1</button>
<button onclick="test2()">测试按钮2</button>
<script type="text/javascript">
function test1(){
for(var i =0 ;i<10;i++){
console.log("❤")
}
}
//遍历JS对象和数组
function test2(){
var stu = {stuNum:"1001",stuName:"小可爱", stuGender:"女"}
//1.遍历对象的属性名
for(v in stu){
//根据对象属性名，从对象中获取属性值
console.log(v +"：" +stu[v])
}
//2.遍历数组的索引
var arr = ["aaa","bbb","ccc"];
for(i in arr){
//根据索引从数组中获取值
console.log(arr[i])
}
}
</script>
</body>
</html>
四、JavaScript对象
基于对象一一通过对象完成属性、方法的调用
4.1 JavaScript对象创建
在JS中对象如何创建？
- 直接通过{ }创建对象
- 通过构造器创建对象
4.1.1 直接创建JS
//创建对象：通过(}创建对象，可以直接在(}中指定对象家的属性
var stu = {stuNum:"1001",stuName:"小可爱", stuGender:"女"}
//通过 对象.属性名 可以调用对象属性
conson.log(stu.stuName)
4.1.2 使用构造函数
4.2 JavaScript扩展属性
扩展属性一一对象本没有某个属性，但是我们可以对其进行新增
4.2.1 对象扩展属性
当对象创建好之后，我们可以通过
对象.新属性=属性值；给当前对象新增属性，这个新增的属性只有当前对象才可以调用，即使通过同一个构造器创建的其他对象也没有这个属性。
4.2.2 构造函数扩展属性
五、JavaScript内置对象
5.1 JS内置对象介绍
5.1 什么是Js内置对象？
- JS中我们可以自定义构造器，通过自定义构造器创建JS对象.
- JavaScript引擎预定义了一些构造器，并且在构造器中定义了能够完成特定功能的函数，通过这些构造器我们可以直接创建对象，创建的对象就可以可以调用函数完成功能。
- JS内置对象：就是通过JavaScript预定义构造器创建的对象。
5.2 JavaScript中提供了哪些构造器？
5.2 String对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内置对象</title>
</head>
<body>
<button onclick="testString()">测试string</button>
<script type="text/javascript">
function testString(){
//1.创建string对象
var str1 = "www.baidu.com"; //方式一
var str2 = new String( "www.taobao.com"); //方式二
//2.属性
//length属性获取当前字符串的长度
var len = str1.length
//3.常用函数
//charAt:获取str1中索引为3的字符（索从3开始）
var a = str1.charAt(3);
//indexof:获取str1中第一次出现"com"的索引
var b = str1.indexOf("com")
//split:分隔字符串，将str1用"."分隔成多个字符串存放到arr中
var arr = str1.split(".")
//substring:从str1字符串索引为4的位置开始截取，直到str1结束
var c = str1.substring(4);
//从str1字符串索引为4的位置开始载取（包含），直到索引为9的位置（不包含）
var s2 = str1.substring(4,9);
//substr:从str1字符串索引为4的位置开始截取（包含），一共载取5个字符
var s3 = str1.substr(4,5);
//toUpperCase:将str2所有字母都转大写
var s4 = str2.toUpperCase();
//toLowerCase:将str2所有字母都转小写
var s5 = str2.toLowerCase();
//match：判断标tr3字符串的格式是否匹reg的规则，如果不匹配则返回值为nuLL，匹配则返回值
var str3="13503030330"; //假设tr3是用户在页面输入的手机号
var reg="^1[3,5,7,8]\\d{9}$";//手机号码的规则（正则表达式
var b = str3.match(reg);
console.log(b);
console.log(arr)
}
</script>
</body>
</html>
5.3 RegExp对象
专门用于对字符串的格式进行规则的检查（规则：通过正则表达式体现）
- ^开头，$结尾 “^ $”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内置对象</title>
</head>
<body>
<button onclick="testRegExp()">测试string</button>
<script type="text/javascript">
function testRegExp(){
//match：加果校验匹配返回字符串，不匹配返回nuLL
var str1="13503030330";
var reg="^1[3,5,7,8]\\d{9}$";//手机号码的规则（正则表达式）
var str2 = str3.match(reg);
//RegExp对象test函数进行正则校验。test函数：如果匹配返回tue,不匹配返回false
var str = "13030303300"
//一个RegExp.对象就是一个正则规则
var reg = new RegExp("^1[3,5,7,8]\\d{9}$");
var b = reg.test(str);
console.log(b);
}
</script>
</body>
</html>
正则表达式：
5.4 Math对象
Math中提供的函数（静态函数），可以通过Math.直接调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内置对象</title>
</head>
<body>
<button onclick="testMath()">测试string</button>
<script type="text/javascript">
function testMath(){
//11.常量属性
var e = Math.E
var pi = Math.PI
console.log(e); //2.718281828459045
console.log(pi); //3.141592653589793
//2.“静数字函数
//random:随机产生一个[0,1)小数
var num = Math.random()*10; //6.565184652223297
//round:对参数进行四舍五入得到一个整数
var a = Math.round(num); //7
//floor,只舍不入.获取比参数小的最大整数
var b = Math.floor(num); //6
//ceil:只入不舍，获取大于等于参数的最小整数
var c = Math.ceil(num); //7
//abs:获取参数的绝对值
var m = Math.abs(-5);
//sqrt:获取参数的平方根
var n = Math.sqrt(9);
}
</script>
</body>
</html>
5.5 Array对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内置对象</title>
</head>
<body>
<button onclick="testArray()">测试string</button>
<script type="text/javascript">
function testArray(){
//1.创建数组
//ā.通过构造器创建组
var arr1 = new Array();
var arr2 = new Array("aaa","bbb","ccc");
//b.静态初始化数组
var arr3 = ["a","b","c","d",1,2,3];
console.log(arr3); //['hello', 'world', 'qfedu']
//2.数组的操作
//a.添加元素（索引可以不连续，数组长度=最大索引+1）
arr1[0] = "wanglaoji";
arr1[1] = "jiaduobao";
arr1[5] = "kangshifu";
//b.通过索引获取数组中的元素
var v1 = arr1[0];
var v2 = arr1[1];
varv3 = arr1[9]; //数组索越界（返回undefined)
//c.遍历
//for循环遍历
for(var i =0; i<arr1.length;i++){
var v = arr1[i];
console.log(i + ":" +v)
}
//for in 遍历获取的数组元素的索引
for(var i in arr1){
var v = arr1[i];
console.log(i + ":" +v)
}
//3.Array中定义的函数
//join:将数组中所有的元素使用”-“拼接成一个字符串
var s1 = arr3.join("-");
//slice:从当前数组中截取元素，生成一个新数组
var arr = arr3.slice(2,4);
//reverse:将当前数组中的元素反转
将当前数组中的元素反转
arr3.reverse();
}
</script>
</body>
</html>
5.6 Date对象
5.7 Functions对象
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
