JavaScript
作用:
动态交互
书写位置:
-
内联方式:书写在HTML标签中
-
内部方式:在HTML任意位置书写<script></script>标签,在该标签中书写JavaScript代码
-
外部方式:将JavaScript代码书写在外部文件中,外部文件的后缀名必须是.js作为扩展名,在HTML中引用对应的外部js脚本,通过<script type="text/javascript" src="外部文件名"></script>,调用外部js脚本文件.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>入门案例</title> <!-- script标签：引入外部的js脚本文件。 - type: 表示外部文件的类型 - src: 表示外部文件的路径，本机的，外部互联网的某台服务器的 --> <script type="text/javascript" src="./js/out.js"></script> </head> <body> <!-- 1.内联方式：--> <!-- onclick：是一个事件的属性，表示点击事件，如果点击了该按钮则触发对应的代码 alert: 表示弹出框 --> <button type="button" οnclick="alert('Hello JavaScript')">点我</button> <script> alert("2.内部方式：声明JS代码！"); </script> </body> </html>
JavaScript方法
-
无参无返回值
-
无参有返回值
-
有参无返回值
-
有参有返回值
JavaScript是弱类型的计算机语言,不区分数据类型
JavaScript方法的定义
传统定义方法
1.function 方法名（参数列表）{
方法体
}
var声明一个变量
2.var 变量名 = function 方法名(参数列表){
方法体
}
使用构造器来定义一个方法 3.var 变量名 = new 构造器（参数列表）
方法的使用步骤
1.通过function关键字来定义一个方法
2.通过方法的名称来访问方法 / 通过变量名来访问方法
JavaScript基础语法
基本数据类型
JavaScript是弱类型的数据语言，不区分数据类型
在定义一个变量的时候，无论是什么类型，都采取var的形式定义
该变量可以被赋予任意值（var i = 12，var a = "abc"）
var的时候，声明是一个统一的数据类型，变量指向该数据
JavaScript扩展了几种数据类型：
| 数据类型 | 描述 |
|---|---|
| number | 表示数值，存储数字：小数，整数，负数... |
| string | 表示字符串，可以使用双引号或单引号 |
| boolean | 表示布尔类型 |
| object | 表示对象类型 |
| undefined | 表示未被定义的类型 |
变量
变量可以直接使用var来进行声明：
声明变量并赋值：
var 变量名称 = 初始值；
声明变量
var 变量名称；
运算符
| 运算符 | 运算 | 范例 | 结果 |
|---|---|---|---|
| + | 正号 | +3 | 3 |
| - | 负号 | b=4；-b； | -4 |
| + | 加 | 3+3 | 6 |
| - | 减 | 6-4 | 2 |
| * | 乘 | 5+5 | 10 |
| / | 除 | 5/5 | 1 |
| % | 取模（既是取余） | 7%5 | 2 |
| ++ | 加加在前：先递增后运算 | a=2;b=++a; | a=3;b=3; |
| -- | 减减在前：先递减后运算 | a=2;b=a--; | a=3;b=2; |
| ++ | 加加在后：先运算后递增 | a=2;b=--a; | a=1;b=1; |
| -- | 减减在后：先运算后递减 | a=2;b=a--; | a=1;b=2; |
在JavaScript中除法运算会根据结果自动转化整数和小数。
<script type="text/javascript"> var x = 5; var y = 2; console.log(x/y); // 输出结果：2.5 </script>
赋值运算符
赋值运算符的作用是将常量，变量或表达式的值赋值给某一个变量。
| 运算符 | 运算 | 范例 | 结果 |
|---|---|---|---|
| = | 赋值 | a=3;b=2; | a=3;b=2; |
| += | 加等于 | a=3;b=2;a+=b; | a=5;b=2; |
| -= | 减等于 | a=3;b=2;a-=b; | a=1;b=2; |
| *= | 成等于 | a=3;b=2;a*=b; | a=6;b=2; |
| /= | 除等于 | a=3;b=2;a/=b; | a=1;b=2; |
| %= | 模等于 | a=3;b=2;a%=b; | a=1;b=2; |
字符串拼接
如果 + 的两端都是数值， + 就表示算术运算符。
如果 + 有一端是字符串类型值， + 就表示字符串拼接。
关系运算符
比较运算符用于对两个数值或变量进行比较,比较运算结果是一个布尔值.即true或false.
| 运算符 | 运算 | 范例 | 结果 |
|---|---|---|---|
| == | 相等于 | 4==3 | false |
| != | 不等于 | 4!=3 | true |
| < | 小于 | 4<3 | false |
| > | 大于 | 4>3 | true |
| <= | 小于等于 | 4<=3 | false |
| >= | 大于等于 | 4>=3 | true |
| === | 绝对等于(类型和值都相同) | "3"===4 | false |
需要注意的是,在比较运算中,不能将比较运算符"=="误写成赋值运算符"=".
逻辑运算符
逻辑运算符用于对布尔型的数据进行操作,其结果仍是一个布尔值.
| 运算符 | 运算 | 范例 | 结果 |
|---|---|---|---|
| && | 与 | true&&true | true |
| || | 或 | true||false | true |
| ! | 非 | !true | false |
注意:在关系运算符的两边必须是一个boolean条件的结果
条件语句
分类
1.if语句
if(条件表达式){
当条件表达式为真时，执行此处代码
}
2.if...else语句
if(条件表达式){
当条件表达式为真时，执行此处代码
}else{
当条件表达式为假时，执行此处代码
}
3.if...else if...else语句
if(条件表达式1){
当条件表达式为真时1，执行此处代码
}else if(条件表达式2){
当条件表达式2为真时，执行此处代码
}else if(条件表达式3){
当条件表达式3为真时，执行此处代码
}else if(条件表达式4){
当条件表达式4为真时，执行此处代码
}else{
当以上条件都为假时，执行此处代码
}
4.switch语句:
循环语句
在某些条件满足的条件下，重复执行指定的代码块。
分为三大类：
1.while
while(){
}
2.do...while
do{
}while(){
}
3.for
for(条件表达式1,条件表达式2,条件表达式3){
方法体4
}
4.for..in
for(索引下标 in 被循环集合){
循环体结构
}
注意索引下标从0开始取值
循环语句扩展
循环的嵌套
do...while while for循环结构可以任意嵌套。
breack
breack表示终止，在循环结构上使用break表示的是结束该循环体。
continue
continue表示结束本次循环进入到下次循环，而循环结果没有终止。
JavaScript创建对象
在真实⽣活中，汽⻋是⼀个对象。汽⻋有诸如⻋重和颜⾊等属性，也有诸如启动和停⽌的⽅法。 所有汽⻋都拥有同样的属性，但属性值因⻋⽽异。所有汽⻋都拥有相同的⽅法，但是⽅法会在不同时间被执⾏。 在JavaScript中对象该如何创建呢？JavaScript中对象的创建⽅式有两种：
1.使用{}创建对象
2.使用构造器创建对象
使用{}创建对象
创建变量：
var username = "Tom"；
创建方法：
function 方法名(参数列表){}
语法结构：
//定义JS对象
{
//定义变量
//定义方法
}
语法解析：
1.变量直接采用 Key：value 来声明
2.方法定义采用方法名称： function(参数列表){}的形式来声明
对象的访问;
1.方法访问：对象名称.方法名称
2.变量访问：对象名称.变量名称
this关键字：在JS中this关键字，表示当前对象。
通过构造函数创建对象
通过JS的构造器来创建JS对象。
什么是JS构造器/构造函数？通过自定义函数，然后再通过"new"关键字来创建一个对象，称之为构造函数创建对象的过程。
function Student(){
//...
this.属性名 = 属性值;
this.方法名 = 方法的定义;
this.方法名 = 方法的名称;
}
var stu = new Student();
语法分析：
1.function关键字来自定义了一个对象，建议名称的首字母大写
2.在对象的内容，通过this来为该对象的变量或者方法做初始化的
3.对象的方法：使用new关键字先创建对象，然后再通过对象来访问内容的成员
注意：如果在外部定义访问，在对象中方法的访问直接 通过方法名称来访问。
扩展属性
直接通过对象
可以访问 对象.新属性 = 值，将这个属性作为新的属性添加 到该对象中。只能在该对象中访问到此属性，通过new关键 字创建的其他对象是无法访问该对象的。
构造器方法添加对象属性
通过构造器的prototype属性来为该对象添加全局的属性，通过new关键字所创建的对象，都包含有该属性的信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性扩展</title>
</head>
<body>
<script>
// 定义一个构造器（定义一个构造函数[类]）
function Student(id, username) {
this.id = id;
this.username = username;
}
/*
var stu1 = new Student("1001", "张三");
stu1.gender = "男"; // 当前对象扩展了一个新的属性
console.log(stu1.id + "." + stu1.username + "." + stu1.gender);
var stu2 = new Student("1001", "张三");
console.log(stu2.id + "." + stu2.username + "." + stu2.gender);
*/
function createObj() {
// prototype：表示对构造器添加属性，全局的属性，所有通过new关键字创建的对象，都包含该属性
Student.prototype.gender = "女";
var stu1 = new Student("1002", "小明");
console.log(stu1.gender);
var stu2 = new Student("1003", "小东");
console.log(stu2.gender);
}
createObj();
</script>
</body>
</html>
JavaScript内置对象
| 构造器 | 说明 |
|---|---|
| Array | JavaScript中的数组(集合)，在此构造器中定义了可以对数据进行操作的函数。 |
| String | 字符串，其中定义了对字符串进行截取，分隔，正则效验等操作的函数。 |
| Date | 日期，包含对日期进行操作的函数 |
| Math | 数学，其中定义了数学运算绝对值，三角函数，四舍五入等操作的函数。 |
| Number | 数值，包含对数值进行操作的函数。 |
| RegExp | 正则表达式，用于对字符串进行正则效验。 |
| Boolean | 布尔。 |
| Object | 通用对象。 |
| Error | 用于异常处理的错误对象。 |
| Function | 顶层对象，Function属性是全局属性，Function函数是全局函数。 |
| Events | 事件对象，例如按钮发生了点击事件。 |
内置对象的使用
1.String：
字符串。字符串不区分单双引号。
2.RegExp：
正则表达式。正则表达式的语法规则。
什么是正则表达式？
正则表达式是一种字符串匹配机制，可以通过正则的一个表达式来匹配其他的字符串，如果匹配上，则指定对应的操作。
特殊符号：
| 符号 | 作用 |
|---|---|
| \d | 任意数字，相当于[0-9] |
| \s | 空白字符 |
| \b | 单词便捷 |
| \uxxxx | 匹配unicode字符 |
区间：
| 表达式 | 说明 |
|---|---|
| [0-9] | 从0到9的任意数字[0123456789] |
| [13579] | 表示1，3，5，7，9中的任意一个数字 |
| [a-z] | 从a到z的任意一个小写字母 |
| [A-Z] | 匆匆A到Z的任意一个大写字母 |
| [a-zA-Z] | 任意一个字母 |
| [0-9a-zA-Z] | 任意字母和数字 |
量词：
| 量词 | 作用 |
|---|---|
| a+ | 至少一个a |
| a* | 0~n个n |
| a? | 0~1个n |
| a{m} | m个n |
| a{m,n} | m~n个 |
3.Math对象：
提供一个静态的对象，在访问的时候是通过 对象名.静态方法 语法来获取。是不需要手动的进行new创建。
4Array对象：
表示一个数组对象。在相同类型的数据进行存储的时候可以使用的数组的结构。
-
for循环进行遍历
-
for...in循环进行遍历
5Date对象:
表示JS中的日期对象,封装了获取日期的年月日时分秒等相关的函数.
var date = new Date();
6Function对象：
全局对象是一个预定义的对象，作为JavaScript中全局函数的占位符。通过全局对象，可以访问所有JS中的全局函数，全局属性。
-
全局函数();
-
obj.method();
注意：我们将全局函数归纳到Function对象，但是在JavaScript中window对象作为顶层容器，在语法上通过Windows对象调用全局函数。例如：Window.eval().
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Function对象</title>
</head>
<body>
<button οnclick="testFunctions()">测试全局函数</button>
<script type="text/javascript">
function testFunctions() {
// 全局函数：通过全局对象Function调⽤全局函数，Function没有名称，因此全局函数可以直接调⽤
// parseInt：将字符串转换成整数数值
var s1 = "123";
var m = parseInt(s1);
6 BOM浏览器对象模型
6.1 BOM介绍
Browser Object Model，简称BOM，浏览器对象模型。
// parseFloat：将字符串转换成⼩数数值
var s2 = "3.14";
var n = parseFloat(s2);
var url = "http://www.edu.com?username=张三";
// encodeURI：对⽹址的参数部分进⾏编码(特殊符号和中⽂)
var newUrl = encodeURI(url);
// decodeURI：对编码后的⽹址进⾏解码
var url2 = decodeURI(newUrl);
// escape：对字符串中的特殊和中⽂进⾏编码
var str1 = "My name is 张三";
var s = escape(str1);
// unescape：对编码后的字符串进⾏解码
var str2 = unescape(s);
// 当⼀个字符串满⾜JS中对象的格式(JSON格式)，我们可以通过eval转换成对象格式
var jsonStr = "{is: '1001', username: '张三'}";
// eval：将满⾜JSON格式的字符串转换成JS对象
var stu = eval("(" + jsonStr + ")");
console.log(stu);
console.log(stu.username);
}
</script>
</body>
</html>
BOM浏览器对象模型
BOM介绍
Browser Object Model，简称BOM，浏览器对象模型。
JavaScript编写在⽹⻚⽂档(document)中，⽹⻚⽂档运⾏在浏览器窗⼝(window)中，像document、window这样 的对象也称为JavaScript的宿主对象。
window对象
window对象是BOM模型中的顶层容器，表示打开的浏览器窗⼝。
获取window对象
window对象是所有浏览器都⽀持的、是浏览器内置的对象，在JavaScript代码中可以直接使⽤。
window对象属性
BOM对象属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>BOM对象属性</title> </head> <body> <script> // 获取BOM对象属性 var v = window.navigator; var s = window.screen; var l = window.location; var h = window.history; var d = window.document; </script> </body> </html>
浏览器窗口属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浏览器窗⼝属性</title> </head> <body> <script> // 设置当前浏览器窗⼝的名字 window.name = "my-window"; var name = window.name; console.log(name); // 设置当前浏览器窗⼝的状态栏 3.窗⼝对象属性： window.status = "off"; // 获取当前窗⼝是否关闭 var close = window.closed; console.log(close); // innerWidth：获取浏览器的内部宽度(IE8及以下版本不⽀持当前属性) // innerHeight：获取浏览器的内部⾼度(IE8及以下版本不⽀持当前属性) var width = window.innerWidth; var height = window.innerHeight; console.log(width + ":" + height); // outerWidth：获取浏览器的外部宽度(IE8及以下版本不⽀持当前属性) // outerHeight：获取浏览器的外部⾼度(IE8及以下版本不⽀持当前属性) var ow = window.outerWidth; var oh = window.outerHeight; console.log(ow + ":" + oh); </script> </body> </html>
窗口对象属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>窗⼝对象属性</title> </head> <body> <script> /** * A窗⼝ * B窗⼝ * C窗⼝(iframe) * D窗⼝ * window.self --> D * window.parent --> C * window.top --> A */ // self：就是当前窗⼝本身，等价于window对象 var w = window.self; // parent：如果当前⽹⻚是在另⼀个⽹⻚的iframe中，parent属性就表示获取当前窗⼝的上⼀级窗⼝ var p = window.parent; // top：获取当前窗⼝的顶层窗⼝ var t = window.top; </script> </body> </html>
window对象函数
弹窗函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹窗函数</title>
</head>
<body>
<script>
// alert：警告提示框，当⽤户在⽹⻚中进⾏错误操作时⽤于提示
window.alert("您没有权限查看该数据！");
/**
* confirm：消息确认框，当⽤户进⾏不可逆、且影响数据的操作，进⾏⽤户确认。
* 此弹窗有返回值，当⽤户点击“确定”时，返回true
*/
var v = window.confirm("请问你确定删除这个信息吗？");
/**
* prompt：⽤户交互输⼊框。
* 参数1：弹框问题提示信息
* 参数2：输⼊框默认值
* 此弹窗有返回值，如果点击确定返回值为输⼊框中的值，点击取消返回值为null
*/
//
//
var v = window.prompt("请输⼊你的出⽣年份:", "1990");
</script>
</body>
</html>
打开/关闭窗口：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>打开和关闭窗⼝</title> </head> <body> <script> /** * open(url, name, features, replace)：打开⼀个新窗⼝ * 参数1：新打开的窗⼝显示的⽹址 * 参数2：新打开窗⼝的名字 3.窗⼝操作函数：对浏览器窗⼝进⾏尺⼨设置、位置设置、滚动条操作设置等函数。 * 参数3：新打开的窗⼝的属性 * 参数4：是否替换当前窗⼝，默认值为false，设置为true表示打开的新窗⼝会替代当前窗⼝ * 返回值：打开的窗⼝对象 */ var url = "https://www.baidu.com"; var name = "百度"; var features = ""; var replace = true; // var w = window.open(url); // var w = window.open(url, name); // var w = window.open(url, name, features); // var w = window.open(url, name, true); var w = window.open(url, name, features, replace); // close：关闭当前窗⼝对象(IE有确认提示，⾕歌就直接关了) window.close(); </script> </body> </html>
窗口操作函数：
对浏览器窗口进行尺寸设置位置设置，滚动条操作设置等函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>窗⼝操作函数</title>
</head>
<body>
<button οnclick="testWindow()">测试window</button>
<div style="height: 1500px; width: 2500px; background: lemonchiffon;">
1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
3<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
4<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
5<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<script type="text/javascript">
function testWindow() {
// 打开新窗⼝，返回值w就表示新打开的浏览器窗⼝，w本身就是⼀个window对象
var w = window.open("http://www.baidu.com", "百度", "width=400, height=300");
// 1.修改窗⼝尺⼨
// resizeTo：设置窗⼝的尺⼨
w.resizeTo(800, 600);
// resizeBy：在窗⼝之前的尺⼨宽度和⾼度各增加多少
w.resizeBy(800, 600)
// 2.改变窗⼝位置
4.延迟/循环任务：
(1) 延迟任务：延迟指定的时间之后再去调⽤对应的函数。
/**
* moveTo：将窗⼝移动到指定的位置
* 参数1:窗⼝与屏幕左边的距离
* 参数2:窗⼝与屏幕顶端的距离
*/
w.moveTo(200, 100);
// moveBy：基于窗⼝当前的位置，横向偏移和纵向偏移
w.moveBy(200, 100);
// 3.滚动滚动条(针对当前窗⼝的滚动条操作)
// scrollTo：将当前窗⼝的横向和纵向滚动条滚动指定的偏移量(x, y)
window.scrollTo(100, 300);
// scrollBy：将当前窗⼝的横向和纵向滚动条滚动指定相对偏移量
window.scrollBy(-100, -200);
}
</script>
</body>
</html>
延迟/循环任务：
1延迟任务：延迟指定的时间之后再去调用对应的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>延迟任务</title>
</head>
<body>
<button οnclick="test1()">打开延迟任务</button>
<button οnclick="test2()">关闭延迟任务</button>
<script type="text/javascript">
var task;
function test1() {
console.log("test1()函数执⾏");
/**
* setTimeout：延迟调⽤指定⽅法
* 参数1：调⽤的⽅法
* 参数2：延迟的时间(单位：ms)
*/
task = window.setTimeout("showDate()", 3000);
}
function showDate() {
var date = new Date();
date.setFullYear(2029);
(2) 循环任务：间隔指定的时间循环调⽤函数。
date.setMonth(11);
date.setDate(28);
date.setHours(14);
var year = date.getYear() + 1900; // 获取年份，相对于1900年的偏移年份
var month = date.getMonth() + 1; // 获取⽉份0-11
var day = date.getDate(); // 获取⽇期
var hour = date.getHours(); // 获取⼩时
var min = date.getMinutes(); // 获取分钟
var sec = date.getSeconds(); // 获取秒
var str = year + "-" + month + "-" + day + " " + hour + ":" + min + ":" +
sec;
console.log(str);
}
function test2() {
console.log("test2()函数执⾏");
// 关闭未执⾏的延迟任务
window.clearTimeout(task);
}
</script>
</body>
</html>
2.循环任务：间隔指定时间循环调用函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环任务</title>
</head>
<body>
<button οnclick="test1()">打开循环任务</button>
<button οnclick="test2()">关闭循环任务</button>
<script type="text/javascript">
var task;
function test1() {
console.log("test1()函数执⾏");
/**
* setInterval：启动循环任务
* 参数1：调⽤的⽅法
* 参数2：间隔的时间(单位：ms)
*/
task = window.setInterval( "showDate()", 1000);
}
6.3 screen对象
screen对象，表示⽹⻚显示的硬件设备的屏幕。
screen是⼀个只读对象，它收集硬件屏幕的相关参数，我们可以通过此对像获取当前终端屏幕的相关参数。
function showDate() {
var date = new Date();
date.setFullYear(2029);
date.setMonth(11);
date.setDate(28);
date.setHours(14);
var year = date.getYear() + 1900; // 获取年份，相对于1900年的偏移年份
var month = date.getMonth() + 1; // 获取⽉份0-11
var day = date.getDate(); // 获取⽇期
var hour = date.getHours(); // 获取⼩时
var min = date.getMinutes(); // 获取分钟
var sec = date.getSeconds(); // 获取秒
var str = year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec;
console.log(str);
}
function test2() {
console.log("test2()函数执⾏");
// clearInterval：关闭正在进⾏的循环任务
window.clearInterval(task);
}
</script>
</body>
</html>
screen对象
screen对象，表示网页显示的硬件设备的屏幕。
screen是一个只读对象，他收集硬件屏幕的相关参数，我们可以通过此对象获取当前屏幕的相关参数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>screen对象</title>
</head>
<body>
<button οnclick="testScreen()">测试Screen</button>
<script type="text/javascript">
function testScreen(){
// 1.获取屏幕的宽度和⾼度(分辨率)
var w = screen.width;
var h = screen.height;
console.log(w + ":" + h);
6.4 navigator对象
navigator对象包含了浏览器相关的信息。
// 2.获取屏幕可⽤的宽度和⾼度(除掉状态栏)
var aw = screen.availWidth;
var ah = screen.availHeight;
console.log(aw + ":" + ah);
// 3.screen.colorDepth：属性返回⽤于显示⼀种颜⾊的⽐特数
var cd = screen.colorDepth;
console.log(cd);
// 4.screen.pixelDepth：属性返回屏幕的像素深度
var pd = screen.pixelDepth;
console.log(pd);
// 练习：通过获屏幕的宽度和⾼度，打开⼀个新窗⼝，使其位于屏幕的正中间
}
</script>
</body>
</html>
navigator对象
navigator对象包含了浏览器相关信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>navigator对象</title>
</head>
<body>
<button οnclick="testNavigator()">测试navigator</button>
<script type="text/javascript">
function testNavigator() {
// 返回浏览器的名称(在⽼版本的IE中可以测试)
var name = navigator.appName;
console.log(name);
// 返回浏览器的代码名
var code = navigator.appCodeName;
console.log(code);
// 返回浏览的平台及版本信息
var version = navigator.appVersion;
console.log(version);
// 返回浏览器的语⾔环境
var language = navigator.language;
6.5 location对象
表示当前浏览器窗⼝的地址信息，通过此对象可以获取地址栏信息、设置地址栏信息。
console.log(language);
// 检查当前浏览器是否启⽤cookie
var b = navigator.cookieEnabled;
console.log(b);
// product属性返回浏览器引擎的产品名称
var product = navigator.product;
console.log(product);
// userAgent属性返回由浏览器发送到服务器的⽤户代理报头(user-agent、header)
var userAgent = navigator.userAgent;
console.log(userAgent);
}
</script>
</body>
</html>
location对象
表示当前浏览器窗口的地址信息，通过此对象可以获取地址栏信息，设置地址栏信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location对象</title>
</head>
<body>
<button οnclick="testLocation()">测试Location</button>
<script type="text/javascript">
function testLocation() {
// 获取地址栏完整的⽹址：http://127.0.0.1:8848/javascript-code/page20-BOM•location.html?key=value
var s1 = location.href;
// 获取地址栏⽹址的协议
var s2 = location.protocol;
// 获取地址栏⽹址的端⼝
var s3 = location.port;
// 获取地址栏⽹址的主机和端⼝
var s4 = location.host;
// 获取地址栏⽹址的主机
var s5 = location.hostname;
// 获取地址栏⽹址的资源路径
var s6 = location.pathname;
// 修改地址栏完整的⽹址(实现⽹⻚跳转)
6.6 history对象
history对象包含了⽤户在当前浏览器窗⼝中访问过的URL。
history对象的使⽤演示案例⻅下：
location.href = "http://www.baike.com";
/**
* location对象的函数：
* 1.reload：重新载⼊当前⽹⻚(刷新⽹⻚)
* 2.replace：使⽤参数指定的⽹址替换当前地址栏的⽹址(实现⽹⻚跳转)
*/
location.reload();
location.replace("http://www.baidu.com");
}
</script>
</body>
</html>
history对象
history对象包含了用户在当前浏览器窗口中访问过的URL。
history对象的使用演示案例见下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>history对象</title>
</head>
<body>
<p>C⻚⾯</p>
<hr />
<p><a href="d.html">跳转到D⻚⾯</a></p>
<hr />
<button οnclick="test1()">《</button>
<button οnclick="test2()">》</button>
<button οnclick="test3()">历史记录的数量</button>
<script type="text/javascript">
function test1() {
history.go(-1);
// back()：返回上⼀个⻚⾯
// history.back();
}
function test2() {
history.go(1);
//forward()：切换到下⼀个⻚⾯
//history.forward();
}
function test3() {
// length属性：获取历史记录中⽹址的个数
var len = history.length;
console.log(len);
}
</script>
</body>
</html>
HTML
前后端的交互
方式1:
网络交互
方式2:
jsp
架构
B/S:浏览器/服务器 C/S:客户端/服务器
第一个网页
步骤:
1,创建一个文本文档
2,将该文件的名称改为helloworld.html或helloworld.htm
3,在该文件中编写以下代码
<html>
<head></head>
<body>
Hello World
</body>
</html>
4,保存该文件使用浏览器打开
HTML
编写第一个网页
<html> <head></head> <body></body> </html>head中的标签
meta titlebody中的标签
文本标签 h1~h6,p,font,span,b,i,big,small,sub,sup,del 图片标签 img 属性:src,alt 表单标签 input 属性: type:text,password,button,radio,checkbox,file name value placeholder form 属性: action,method,enctype select 子项: option textarea 媒体标签 audio video 容器标签 div 排版标签 br hr 列表标签 ul ol 表格标签 table tr td th 超链接标签 a 属性: href标签的分类
<标签名></标签名>:可以容纳别的标签 <标签名 />:不能容纳别的标签所有的标签都有的属性
id class style onclick
HTML常用标签
文本标签
作用:展示文本
标题标签:
h1
h2
h3
h4
h5
h6
段落标签
p
普通的文本标签
font
span
加粗标签
b
斜体标签
i
文本加大
big
文本变小
small
特殊的标签
sub:下标
sup:上标
del:删除线
标签嵌套:在标签中编写标签
图片标签
作用:展示图片
图片标签:
img
属性:
src:展示的图片的地址
相对路径:相对与当前html文件的位置
alt:当图片加载失败时显示的内容
注意:支持gif图(动图)
表单标签
作用:展示表单
input
属性:
type:类型
text:文本输入,默认的类型
password:密码输入
button:按钮
radio:单选按钮
checkbox:多选按钮
file:文件选择
name:名称
value:值
placeholder:提示字
注意:
type的属性值由系统提供,其他的属性值自定义
form
属性:
action:提交到的位置
method:提交方式
get:会将上传的数据拼接到网址的尾部,不能上传大量数据
post:不会将上传的数据拼接到网址的尾部,可以上传大量的数据
enctype:上传的数据类型
application/x-www-form-urlencoded:上传文本
multipart/form-data:上传的数据中有文件
select:选择器
option:子标签
textarea:文本域
排版标签
br:换行 hr:水平分割线
容器标签
div:块标签
作用:容纳别的标签
媒体标签
audio:音频播放
属性:
src:播放的文件的地址
controls:控制器
autoplay:自动播放
loop:循环播放
video:视频播放
属性:
src:播放的文件的地址
controls:控制器
autoplay:自动播放
loop:循环播放
其他
ul:无序列表 ol:有序列表
表格标签
table:表格
属性:
border:边框
width:宽度
cellspacing:单元格距离表格的距离
cellpadding:内容距离单元格的距离
tr:行
td:单元格
colspan:合并列
rowspan:合并行
th:特殊的单元格
超链接标签
a
属性:
href
作用:
1,跳转到其他网站的指定网址
直接在href属性值填写网址
2,跳转到当前项目的其他网页
在href属性值填写其他网页的相对路径
3,跳转到当前网页的指定位置
步骤:
1,确定锚点
2,在href中填写#锚点标签的id的属性值
所有标签都有的属性
id
作用:当前标签在当前网页中的唯一名称,一个网页不允许重复class
作用:当前标签在当前网页中的分类名称,一个标签可以有多个class的值,一个网页中多个标签的class属性值可以重复style
作用:编写css代码onclick
作用:标签被点击后执行的事件
CSS
简介
英文全称:Cascading Style Sheets 中文名称:层叠样式表 作用:美化HTML标签,包括但不限于对标签的文本,背景,大小,位置等的美化
书写位置
位置1：
在标签的style属性中书写,该书写方式称为内联样式 缺点: 1,降低代码可读性 2,降低代码复用率 不建议使用位置2：
在head标签中书写style标签,在style标签中书写css代码位置3：
在css文件中书写,通过link标签引入到所需使用的html文件中
选择器
作用
在CSS代码中寻找指定的HTML标签分类
基本选择器 统配选择器 作用:给当前网页中的所有标签都设置样式 语法: *{ 样式 } 标签选择器 作用:给当前网页中指定标签名的标签设置样式 语法: 标签名{ 样式 } class选择器 作用:给当前网页中class属性值为xxx的设置样式 语法: .class的属性值{ 样式 } id选择器 作用:给当前网页中id属性值为xxx的设置样式 语法: #id的属性值{ 样式 } 高级选择器 伪类选择器 hover focus first-of-type last-of-type nth-of-type(n) before after 属性选择器 基本选择器[属性名]{} 基本选择器[属性名=属性值]{} 子代选择器 父选择器 子选择器{ 样式 } 或 父选择器>子选择器{ 样式 }选择器优先级
当选择器优先级相同时,谁在下,听谁的 当选择器不相同时,谁优先级高听谁的 选择器优先级: 统配选择器 < 标签选择器 < class选择器 < id选择器 < 内联样式
文本样式
字体大小:font-size 字体颜色:color 字体样式:font-style 字体粗细:font-weight 字体:font-family 装饰线:text-decoration 行高:line-height 文本位置:text-align
背景样式
背景颜色:background-color 背景图片:background-image 背景大小:background-size 背景是否平铺:background-repeat 背景位置:background-position
元素类型
行内元素:
特点:设置宽高无效,不独占一行,标签的大小是按照其中的内容撑开的
如:span,a,b,big,i,font...
行内块元素
特点:设置宽高有效,但不独占一行
如:input,img...
块元素
特点:设置宽高有效,但独占一行
如:div,p,h1,h2,h3,h4,h5,h6,...
如何修改标签的元素类型:
通过display属性进行修改
值:
block:块元素
inline-block:行内块元素
inline:行内元素
none:隐藏
盒子模型
相关属性
宽:width 高:height 内边距:padding 边框:border 边框角度:border-radius 外边距:margin 特殊情况:margin:0 auto;让当前标签位于父容器水平中心,要求该标签必须是块元素盒子模型
标准盒子 IE盒子
定位
作用
移动标签到指定位置属性名
position常用的定位
浏览器窗口定位 相对与浏览器可视化窗口的区域的位置 属性值:fixed 配合的属性: left:标签距离浏览器可视化窗口左边的距离 right:标签距离浏览器可视化窗口右边的距离 top:标签距离浏览器可视化窗口顶部的距离 bottom:标签距离浏览器可视化窗口底部的距离 z-index:层级,取值范围-99~99 特点:不会保留标签的原位置 相对定位 相对与标签的原位置 属性值:relative 配合的属性: left:标签距离原位置左边的距离,正值向右,负值向左 right:标签距离原位置右边的距离,正值向左,负值向右 top:标签距离原位置顶部的距离,正值向下,负值向上 bottom:标签距离原位置底部的距离,正值向上,负值向下 z-index:层级 特点:会保留标签的原位置 绝对定位 相对于最近的上层做过定位的父容器的位置 属性值:absolute 配合的属性: left:距离上层最近做过定位的父容器左边的距离 right:距离上层最近做过定位的父容器右边的距离 top:距离上层最近做过定位的父容器顶部的距离 bottom:距离上层最近做过定位的父容器底部的距离 z-index:层级 特点:不会保留标签原位置
浮动
float
值:
left
right
注意:会导致空间塌陷,需要给其父容器class属性追加clear值,css处编写以下代码
.clear:after{
content: ".";
display: block;
clear: both;
width: 0;
height: 0;
visibility: hidden;
}
2809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
