一 JavaScript
1.1 JavaScript概念
概念： 一门客户端脚本语言 * 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 * 脚本语言：不需要编译，直接就可以被浏览器解析执行了
功能：可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
JavaScript发展史：
1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEase
2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
3. 1996年，微软抄袭JavaScript开发出JScript语言
4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
* JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
1.2 ECMAScript
客户端脚本语言的标准
1.2.1 基本语法
1. 与html结合方式
1. 内部JS：
* 定义<script>，标签体内容就是js代码
2. 外部JS：
* 定义<script>，通过src属性引入外部的js文件
注意：
1、script可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
2、script可以定义多个。
1.2.2 注释
1. 单行注释：//注释内容
2. 多行注释：/*注释内容*/
1.2.3 数据类型
1. 原始数据类型(基本数据类型)：
1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
2. string：字符串。 字符串 "abc" "a" 'abc'
3. boolean: true和false
4. null：一个对象为空的占位符
5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
2. 引用数据类型：对象
1.2.4 变量
* 变量：一小块存储数据的内存空间
* Java语言是强类型语言，而JavaScript是弱类型语言。
* 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
* 语法：
* var 变量名 = 初始化值;
* typeof运算符：获取变量的类型。
* 注：null运算后得到的是object
1.2.5 运算符
1、 一元运算符：只有一个运算数的运算符
++，-- ， +(正号)
* ++ --: 自增(自减)
* ++(--) 在前，先自增(自减)，再运算
* ++(--) 在后，先运算，再自增(自减)
* +(-)：正负号
* 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
* 其他类型转number：
* string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
* boolean转number：true转为1，false转为0
2、算数运算符
+ - * / % ...
3、赋值运算符
= += -+....
4、比较运算符
> < >= <= == ===(全等于)
* 比较方式
1. 类型相同：直接比较
* 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
2. 类型不同：先进行类型转换，再比较
* ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
5、逻辑运算符
&& || !
* 其他类型转boolean：
1. number：0或NaN为假，其他为真
2. string：除了空字符串("")，其他都是true
3. null&undefined:都是false
4. 对象：所有对象都为true
6、 三元运算符
? : 表达式
var a = 3;
var b = 4;
var c = a > b ? 1:0;
语法：
* 表达式? 值1:值2;
* 判断表达式的值，如果是true则取值1，如果是false则取值2；
7、JS特殊语法：
1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
2. 变量的定义使用var关键字，也可以不使用
* 用： 定义的变量是局部变量
* 不用：定义的变量是全局变量(不建议)
8、 流程控制语句：
1. if...else...
2. switch:
* 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
* switch(变量):
case 值:
* 在JS中,switch语句可以接受任意的原始数据类型
3. while
4. do...while
5. for
1.3 练习：99乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>99乘法表</title>
<style>
td {
border: 1px solid;
}
</style>
<script>
document.write("<table align = 'center'>");
//1,完成基本的for循环嵌套，展示乘法
for (var i = 1; i <= 9; i++) {
document.write("<tr>");
for (var j = 1; j <=i ; j++) {
document.write("<td>");
//输出
document.write(i+"*"+j+"="+(i*j)+"  ");
document.write("</td>");
}
document.write();
//输出换行
document.write("<br>");
document.write("</tr>");
}
document.write("</table>");
</script>
</head>
<body>
</body>
</html>DOM简单学习：为了满足案例要求
* 功能：控制html文档的内容
* 获取页面标签(元素)对象：Element
* document.getElementById("id值"):通过元素的id获取元素对象
* 操作Element对象：
1. 修改属性值：
1. 明确获取的对象是哪一个？
2. 查看API文档，找其中有哪些属性可以设置
2. 修改标签体内容：
* 属性：innerHTML
1. 获取元素对象
2. 使用innerHTML属性修改标签体内容
事件简单学习
* 功能： 某些组件被执行了某些操作后，触发某些代码的执行。
* 造句： xxx被xxx,我就xxx
* 我方水晶被摧毁后，我就责备对友。
* 敌方水晶被摧毁后，我就夸奖自己。
* 如何绑定事件
1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
1. 事件：onclick--- 单击事件
2. 通过js获取元素对象，指定事件属性，设置一个函数
* 代码：
<body>
<img id="light" src="img/off.gif" onclick="fun();">
<img id="light2" src="img/off.gif">
<script>
function fun(){
alert('我被点了');
alert('我又被点了');
}
function fun2(){
alert('咋老点我？');
}
//1.获取light2对象
var light2 = document.getElementById("light2");
//2.绑定事件
light2.onclick = fun2;
</script>
</body>
* 案例1：电灯开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script>
/*
分析：
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
* 规则：
* 如果灯是开的 on,切换图片为 off
* 如果灯是关的 off,切换图片为 on
* 使用标记flag来完成
*/
//1.获取图片对象
var light = document.getElementById("light");
var flag = false;//代表灯是灭的。 off图片
//2.绑定单击事件
light.onclick = function(){
if(flag){//判断如果灯是开的，则灭掉
light.src = "img/off.gif";
flag = false;
}else{
//如果灯是灭的，则打开
light.src = "img/on.gif";
flag = true;
}
}
</script>
</body>
</html>
一 BOM
1.1 概念
BOM：Browser Object Model 浏览器对象模型。（将浏览器的各个组成部分封装成对象)。
1.2 BOM 组成
1、Window：窗口对象 主要学习
2、Navigator：浏览器对象
3、Screen：显示器屏幕对象，都是属性，一般不经常用
4、History：历史记录对象，主要学习
5、Location：地址栏对象，主要学习
1.2.1 Window：窗口对象
1、创建
alert("hello"); window.alert("hello a")
2、方法
1. 与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。确认某些情况，比较常用
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值：获取用户输入的值
2. 与打开关闭有关的方法：
close() 关闭浏览器窗口。
* 谁调用我 ，我关谁 当前
open() 打开一个新的浏览器窗口
* 返回新的Window对象
3. 与定时器有关的方式 （延时）
setTimeout() 在指定的毫秒数后调用函数或计算表达式（执行一次）。
* 参数：
1. js代码或者方法对象
2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式（循环定时器）。
clearInterval() 取消由 setInterval() 设置的 timeout。
图片翻转例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img id="img" src="image/banner_1.jpg" width="90%">
<script>
/*分析：
1.在页面上使用img便签显示图片。
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每隔3秒调用方法一次
*/
var number = 1;
function fun(){
number++;
if (number >3 ){//循环过一次
number = 1;//回到初始状态循环
}
var img = document.getElementById("img");
img.src = "image/banner_"+number+".jpg";
}
setInterval(fun,2000);
</script>
</body>
</html>
3、属性
- 获取其他BOM对象： history location Navigator Screen:
- 获取DOM对象 document
-
特点 * Window对象不需要创建可以直接使用 window使用。 window.方法名(); * window引用可以省略。 方法名();
-
Location：地址栏对象 1. 创建(获取)： 1. window.location 2. location
2. 方法： * reload() 重新加载当前文档。刷新 3. 属性 * href 设置或返回完整的 URL。
页面翻转案例练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒之后，自动跳转到首页...
</p>
<script>
/*
1.显示页面效果，<p>标签
2.倒计时读秒效果实现
2.1 定义一个方法，获取span标签，修改标签体内容 时间--
2.2 定一个定时器，1秒执行一次方法
3.方法中判断时间如果time小于等于0，则跳转到首页
*/
var second = 5;
var time = document.getElementById("time");
function showTime(){
second--;
time.innerHTML = second +"";
if (second <= 0){
location.href = "https://www.baidu.com/";
}
}
//设置倒计时
setInterval(showTime,1000);
</script>
</body>
</html>
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
