一 JS的认识
F12
1.1 JS的前世今生
js全称JavaScript,它是一个脚本编程语言!由于当年Java比较火,它改成JavaScript(火了)。有一个叫做网景通的公司,做了一套语言:javascript! 花了8天时间把这门语言写了出来!
排错非常的难!!!
1.2 引入JS的三种方式
- js引入有三种方式(内嵌,外部,外连)
- script标签可以写在任意位置(一般写后面)
- script必需是双标签
- script有src的话,内部就不要再写代码了
1.2.1 直接在a标签中完成
<!--
第一种js写法:行内写法
a:超连接标签
href:跳转的路径
http:代表要跳转的一个协议
javascript(伪协议):代表我这里要执行javascript代码
alert:代表弹出的意思
-->
<!--<a href="http://www.baidu.com">点我啊!!!</a>-->
<a href="javascript:alert(0);">点我啊!</a>
1.2.2 在script标签中完成
<script>
alert(0);
</script>
1.2.3 外连式
- 创建一个js文件
alert(0)
- 引入相应的文件
<script src="js/index.js"></script>
1.3 JS的基本语法
1.3.1 变量的定义
- 定义变量都使用var
- JS的变量是有类型的(number,string,boolean)
- 其它的一些常量
- NaN : 出现非数字
- Infinity:除数为0
- null:空(需要赋值)
- undefined:未定义(什么都不写)
- 变量可能重复定义(不建议)
- 变量的类型可以随意修改
/**
* number:数字类型
*
*/
var a = 10.67;
//查询一个变量的类型
console.debug(typeof a);
var b= "haha";
console.debug(typeof b);
// console.debug("abc"*5); //NaN
// console.debug(10/0); //Infinity
var c;
console.debug(c);
1.3.2 和Java不一样的地方
- 注意两等与三个等(全等于)
- false,undefined,"" 都代表假(其它的都是真)
- || 判断后返回的是第一个为真的值
- 注意一个坑(判断不要写成=号了)
1.4 JS的函数
函数(面向过程,如C)就是方法(面向对象:如Java)
- js函数语法
- 只需要function修饰(其它的都不管)
- 要返回直接return(没有写它会自动返回一个undefined)
- 接收参数直接写名称
- 调用函数只和函数名有关
函数名()
function 方法名([a,b,c,..]){
//完成功能
}
- 匿名函数(没有名字的函数)
var say = function(){alert(0)};
1.5 全局变量与局部变量
和Java是完全一样的
- 全局变量的案例
var msg = "我是全局的";
function change(){
msg = "我被修了!";
}
change();
console.debug(msg); //我是全局的
- 局部变量的案例
var msg = "我是全局的";
function change(){
//定义了局部变量
var msg = "我被修了!";
}
change();
console.debug(msg);
1.6 小结
- 函数就是方法(面向对象)
- 函数的语法:
functoin 函数名([a,b,...]){方法体}
- 匿名函数
var fun01 = function(){}
- 全局与局部变量和Java一样
二 系统函数(global)
- isNaN() -> 判断是否不是数字
//1.isNaN -> 判断一个值是否不是数字
// 不是数字就返回true,是数字就返回false
console.debug(isNaN(7)); //false
console.debug(isNaN("小张")); //true
- parseInt() -> 解析一个值,并返回相应数字
- 只会返回整数
- 会解析字符串前面部分的数字
//2.parseInt:解析一个值,返回相应的数字格式
// 只转前面的数字问题部分
var name = "25.456";
console.debug(typeof name); //string
var num = parseInt(name);
console.debug(typeof num); //number
console.debug(num)
- eval() -> 计算字符串,把这个字符串当脚本执行
//3.eval:计算字符串
// 比如说这个代码是我从其它地方读取出来的,而读取的值只能是字符串,那我怎么来执行这个代码?
//var s = "alert(0);";
var a = 10;
var b = 20;
var fh = ""; //-,*,/
var result = eval(a + fh + b);
console.debug(result);
三 简单对象
3.1 js对象
3.1.1 创建对象
// 面向对象:创建一个类
// 首字母大写:代表一个类
// 它是一个类,是一个函数,也是一个构造器
function Person(){}
// 这个对象的属性与方法是可以随便添加的
var p = new Person();
3.1.2 添加属性与方法
// 面向对象:创建一个类
// 首字母大写:代表一个类
// 它是一个类,是一个函数,也是一个构造器
function Person(){}
// 这个对象的属性与方法是可以随便添加的
var p = new Person();
p.name = "高书记";
p.age = 45;
p.sex = true;
p.say = function(){
alert(0)
}
console.debug(p);
p.say();
3.1.3 this
/**
* 这个this是指向一个对象
* this:谁调用,this就指向谁
*/
function User(name,age){
this.name = name;
this.age = age;
this.say = function(){
alert(this.name);
}
}
var u1 = new User("李书记",22);
u1.say();
var u2 = new User("王八蛋",45);
u2.say();
3.1.4 值传递与引用传递
和Java中是一致的
- 普通的值就是值传递
//普通的值就是值传递
//1.定义一个全局变量
var num1 = 15;
//2.准备一个方法
function change(num2){
num2 = 20;
}
//3.调用方法
change(num1);
console.debug(num1); //15
- 对象就是引用传递
//对象是引用传递
//1.定义一个对象
function Person(name,age){
this.name = name;
this.age = age;
}
var p1 = new Person("吕皮皮",34);
//2.准备一个方法
function change(person){
person.name = "莫大师";
}
//3.调用方法
change(p1);
console.debug(p1); //{name:"莫大师",age:34}
3.2 本地对象
Object
- 一切皆对象,我们的所有对象都是Object
Array:数组
Boolean:用于做判断
var flag = new Boolean(true);
var flag = true;
-> 建议使用
Date:日期时间
//创建一个日期对象
var date = new Date();
console.debug(date);
console.debug(date.getFullYear()); //年 2019
console.debug(date.getMonth()); //月 4 (从 Date 对象返回月份 (0 ~ 11))
console.debug(date.getDate()); //日 15
console.debug(date.getDay()); //星期(0是星期天)
Math : 数据计算
- 提供了一大堆数学中用到的方法(正弦,对数,…)
- ceil():天花板(向上舍入)
- floor():地板(向下舍入)
- round():四舍五入
- random():随机数
//Math:数字对象
// ceil:天花板(向上舍入)
console.debug(Math.ceil(5.6)); //6
console.debug(Math.ceil(5.1)); //6
console.debug(Math.ceil(5.01)); //6
// ceil:地板(向下舍入)
console.debug(Math.floor(5.6)); //5
console.debug(Math.floor(5.1)); //5
console.debug(Math.floor(5.01)); //5
// round:四舍五入
console.debug(Math.round(5.6)); //6
console.debug(Math.round(5.1)); //5
console.debug(Math.round(5.01)); //5
//random() 返回 0 ~ 1 之间的随机数。
for(var i=0;i<10;i++){
//Math.random() :随机数
//Math.random() * 10) : 0到9.x的值
//console.debug(Math.random() * 10);
console.debug(parseInt(Math.random() * 10));
}
String:字符串
- length:长度
- substr(起始位置,截取长度):截取字符串
- substring(起始位置,结束位置):截取字符串
- split(分割符):把字符串根据分割串变成数组
var str = 'abcdefg';
console.debug(str);
//1.length:获取字符串的长度
console.debug(str.length);
//2.substr(第几个位置,截取的长度):
console.debug(str.substr(2,3)); //cde
//3.substring(第几个位置开始,到哪个位置结束)
console.debug(str.substring(2,4)); //cd
var names = "张三丰,李四民,王麻子";
console.debug(names);
console.debug(names.split(",")); //Array(3) [ "张三丰", "李四民", "王麻子" ]
Global:全局对象(已经学过)
isNaN(),parseInt(),eval()
四 数组
4.1 数组的声明
注意:同一个数组里面,可以装各种类型
- 直接new出来
new Array()
;
//方式一:定义数组
var arr = new Array();
arr[0] ="哈哈";
arr[1] = 123;
arr[2] = true;
arr[10] = "老子天下第一";
console.debug(arr);
- new出来后确定长度
new Array(5)
//方式二:定义数组(确定长度)
var arr = new Array(5);
arr[0] = "哈哈";
arr[10] = "有这么厉害嘛?";
console.debug(arr);
- 定义[] -> 建议使用
//方式三:定义数组
var arr = ["a","345"];
arr[5] = "xxxx";
console.debug(arr);
4.2 数组的方法调用
- length:数组的长度
- join:把数组变成一个字符串
arr.join(",")
- splice():对数组进行增删改
/**
* 第一个参数:起始位置
* 第二个参数:删除的个数
* 第三个参数(后面):添加的值
*/
arr.splice(1,1,"大哥");
4.3 遍历数组
- 一般还是普通的for循环
- for…in
- 遍历数组拿到的是下标
- 遍历对象拿到的是属性
//方式一:定义数组
var arr = ["a","c","b","e"];
//循环拿到咱们的值
// for(var i=0;i<arr.length;i++){
// console.debug(arr[i]);
// }
//循环数组的时候, key是下标
for(var key in arr){
console.debug(arr[key]);
}
var obj = {};
obj.name = "张三";
//obj["name"] = "李四";
obj.age = 45;
//console.debug(obj["name"]);
//怎么拿到这个对象的所有属性
//循环对象的时候, key是属性
for(var key in obj){
console.debug(key);
console.debug(obj[key]);
}
4.4 prototype
- 使您有能力向对象添加属性和方法
- 在类上加上这个属性或者方法后,这个类的所有对象都会有这个能力
Date.prototype.format = function(){
return this.getFullYear() +"-" + this.getMonth() +"-" + this.getDate();
}
五 BOM浏览器对象模型
5.1 什么是BOM
- BOM是browser object model的缩写,简称浏览器对象模型,这个BOM有如下内容:
- 使用面向对象的思想来抽象浏览器相关组件。
打开一个窗口就是一个window对象
窗口里面使用location表示地址栏
窗口的历史记录使用history来表示
浏览器的信息使用navigator来表示
窗口里面的内容使用document来表示
窗口中的框架使用framss来表示
5.2 Window对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//window是咱们的顶层对象
//console.debug(window);
//alert:弹出框(window可以不写的)
//window.alert("王小八");
//confirm:确认框 -> 返回一个boolean值(确定:true,取消:false)
//var result = window.confirm("你真的要删除我嘛?");
//var result = confirm("你真的要删除我嘛?");
//console.debug(result);
/**
* prompt:输入框
* 第一个参数:提示要输入什么
* 第二个参数:输入框中一个默认值
*/
//var msg = window.prompt("评价","你们真的做得很好哦!");
//var msg = prompt("评价","你们真的做得很好哦!");
//console.debug(msg);
</script>
</head>
<body>
<a href="http://www.baidu.com" onclick="javascript:return confirm('你真的要离开我嘛?');">百度来了</a>
</body>
</html>
window.open
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是中国人</title>
<script type="text/javascript">
function myopen(){
//open:打开一个新的窗口
window.open("http://www.itsource.cn","_blank","toolbar=no, location=no, directories=no, status=no,menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=400, height=400");
}
</script>
</head>
<body>
<button onclick="myopen()">点我啊</button>
</body>
</html>
5.3 history(历史对象-了解)
history.go(index)函数,在浏览器历史记录中跳转,正数为前跳,负数为后跳
history.back()函数,后跳;
history.forward()函数,前跳;
history.length属性,获得历史记录的长度;
5.4 location(位置对象)
window对象的location属性,保护了该窗口所装载文档的地址:location包含的常用属性:
1.hostname:文档所在地址的主机名
2.href:文档所在地址的URL地址
3.host:wend所在地址的主机地址
4.port:文档所在地址的服务端端口
5.pathname:文档所在地址的文件地址
6.protocol:装载该文档使用的协议
var loc = window.location;
for(var name in loc){
console.debug(name,loc[name]);
}
5.5 navigator(浏览器的信息对象-了解)
属性名称 说明
appCodeName 产品名称
appName 应用名称
appVersion 版本号
cookieEnabled 是否允许使用cookie
language 语言
oscpu 操作系统名称
platform 操作系统平台
product 产品代号或名称,比如Gecko
productSub 产品发布日期20100701
userAgent 客户端详细信息,比如:Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.11) Gecko/20100701 Firefox/3.5.1
5.6 document对象
document对象:能反映当前页面的各种属性。
document对象的常用属性
title:显示文章的标题。
body:获取body元素节点。
bgColor:显示页面的背景色。
fgColor:显示页面的前景色。
document对象的常用方法:
write():在页面中输出文本。
writeln():在页面中输出文本,并自动换行(多一个换行符,看不出来)。
DOM_获取页面中的元素.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li name="wawa">大力娃</li>
<li name="wawa" id="eyeWa">眼镜娃</li>
</ul>
<ul>
<li>备哥</li>
<li>关哥</li>
</ul>
<script type="text/javascript">
//1.通过id去获取页面中的某一个元素(id是唯一的,只能拿到一个元素)
var eyeWa = document.getElementById("eyeWa");
console.debug(eyeWa);
//2.通过name去获取元素(获取的是一个数组)
var wawa = document.getElementsByName("wawa");
console.debug(wawa);
//3.通过标签的名称获取元素
var lis = document.getElementsByTagName("li");
console.debug(lis);
</script>
</body>
</html>
DOM_获取dom的高度与宽度.html
<body>
<div style="height: 100px;width: 100px; background: red;"></div>
<script type="text/javascript">
console.debug(document.body);
//获取body的宽度(body中默认还有内边距)
console.debug(document.body.clientWidth);
//获取body的高度(body中的元素总共的高度)
console.debug(document.body.clientHeight);
//获到页面的宽度
console.debug(document.documentElement.clientWidth);
//获到页面的高度
console.debug(document.documentElement.clientHeight);
</script>
</body>
DOM_元素获取.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="gourd">
<li>大力娃</li>
<li>眼睛娃</li>
<li>金刚娃</li>
<li id="waterWa">水娃</li>
<li>火娃</li>
</ul>
<script type="text/javascript">
//获取父亲
var gourd = document.getElementById("gourd");
//判断这个父亲是否有儿子
//console.debug(gourd.hasChildNodes());
//拿到第一个儿子
console.debug(gourd.firstChild);
//拿到最后一个儿子
console.debug(gourd.lastChild)
//拿到所有儿子
console.debug(gourd.childNodes);
console.debug("----------------------------");
var waterWa = document.getElementById("waterWa");
console.debug(waterWa);
//获取到父节子
console.debug(waterWa.parentNode);
//获取到上一个兄弟(哥哥)
console.debug(waterWa.previousSibling);
//获取到下一个兄弟(弟弟)
console.debug(waterWa.nextSibling);
</script>
</body>
</html>
DOM_属性的获取.html
<body>
<img id="myImg" alt="没有图片" src="img/kt.jpg" haha="哈哈哈" />
<script type="text/javascript">
//attribute
//1.拿到img元素
var myImg = document.getElementById("myImg");
//2.拿到img元素的属性 -> 这种方式只能获取到html标签本身支持的属性
//console.debug(myImg.src);
//3.修改img元素的属性
//myImg.src = "img/2.jpg";
//下面的这种操作属性的方式支持所有属性(本身,自定义)
//获取到相应的属性节点(对象)
console.debug(myImg.getAttributeNode("haha"));
//获取到相应的属性值
console.debug(myImg.getAttribute("haha"));
//修改属性的值
myImg.setAttribute("haha","呵呵");
</script>
</body>
DOM_文本的获取.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="mydiv">
<h2>我是一个中国好男儿!!!</h2>
</div>
<script type="text/javascript">
var mydiv = document.getElementById("mydiv");
//console.debug(mydiv.firstChild);
//innerHTML是可以获取到所有信息(包含html标签)
console.debug(mydiv.innerHTML);
//innerText只获取文本
console.debug(mydiv.innerText);
//修改相应的值,里需加的html标签会起作用
mydiv.innerHTML = "<h2>天下最大就是你</h2>";
//修改相应的值,里面的html标签会原封不动展示出来
mydiv.innerText = "<h2>真的好好看啊!</h2>";
</script>
</body>
</html>
DOM_元素操作.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="addChild()">加一个儿子</button>
<button onclick="deleteChild()">干掉一个儿子</button>
<ul id="gourd">
<li>大力娃</li>
<li>眼睛娃</li>
<li>金刚娃</li>
<li id="waterWa">水娃</li>
<li>火娃</li>
</ul>
<script type="text/javascript">
function deleteChild(){
//1.获取到要删除的元素 (它没有把自己删除掉的功能)
var waterWa = document.getElementById("waterWa");
//2.拿到它的父亲,再让它的父亲干掉它
waterWa.parentNode.removeChild(waterWa);
}
function addChild(){
//通过js代表创建一个li节点(在内存中)
var li = document.createElement("li");
li.innerHTML = "隐身娃";
//找到你要放入的位置(拿到父元素)
var gourd = document.getElementById("gourd");
//把li元素放到父元素中去
// append:追加 Child:儿子
gourd.appendChild(li);
}
</script>
</body>
</html>
5.7事件
事件_认识.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
第一种添加事件的方式:直接在元素上写 on事件名
优势:简单 ,兼容各种浏览器的
缺点:事件不可消除,无法一个事件添加多个方法
-->
<button onclick="clickMe()">点我有惊喜</button>
<button id="mybtn">点我真的有惊喜</button>
<script type="text/javascript">
/**
* 第二种添加事件的方法:拿到元素,单独设置onclick属性
* 优势:简单 ,兼容各种浏览器的(耦合度低)
* 缺点:无法一个事件添加多个方法
*/
//拿到相应的元素
var mybtn = document.getElementById("mybtn");
//给元素添加事件
mybtn.onclick = function(){
alert("给你99块钱!!!!");
}
/*
function clickMe(){
alert("给你99块钱!!!!");
}
function clickMe2(){
alert("给你990块钱!!!!");
}
*/
</script>
</body>
</html>
添加事件的正确方案.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//window.onload:整个页面加载完成后要触发的事件
window.onload = function(){
var mybtn = document.getElementById("mybtn");
/**
* 为这个按钮添加一个事件监听器
* Event:事件 Listener:监听
* 第一个参数:监听的事件名称
* 第一个参数:事件的功能
* 优点:可以添加多个事件,可以移除事件
* 缺点:有点麻烦,不兼容所有浏览器(IE5,6,7)
*/
//addEventListener:不支持IE5,6,7
mybtn.addEventListener("click",function(){
alert("我又成功的回来了");
})
// mybtn.attachEvent("onclick",function(){
// alert("不是IE不欢迎!!!")
// })
}
</script>
</head>
<body>
<button id="mybtn">点我真的有惊喜</button>
</body>
</html>
5.8 定时器
- 定时器_执行一次.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/**
* setTimeout:js中内置的一个定时器(多长时间后执行某段代码)
* 参数1:执行的方法(函数)
* 参数2:过多长时间后执行(单位是毫秒)
*/
// function jump(){
// alert(0);
// }
// setTimeout(jump,2000);
setTimeout(function(){
window.location.href = "https://www.baidu.com";
},5000)
</script>
</head>
<body>
<h1>亲,5秒钟之后会跳转到主页面!!</h1>
</body>
</html>
- 定时器_周期.html
<script type="text/javascript">
var myspan = document.getElementById("myspan");
/**
* setInterval:周期性执行某个方法
* 参数1:执行的方法
* 参数2:间隔的时间
*/
var num = 5;
setInterval(function(){
myspan.innerHTML = --num;
if(num==0){
location.href = "https://www.baidu.com";
}
},1000)
</script>
</body>
定时器_炸弹.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
亲,<span id="myspan" style="font-size: 30px; color: red;">10</span>秒就完蛋
<script type="text/javascript">
var myspan = document.getElementById("myspan");
var num = 10;
//执行这个定时器方法,它会返回一个定时器对象回来
var timer = setInterval(function(){
myspan.innerHTML = --num;
if(num==0){
alert("炸弹爆炸了! bong,bong,bong....");
//clear:清除(清空)
clearInterval(timer);
}
},1000)
</script>
</body>
</html>