JavaScript
目录javascript
JavaScript
JavaScript介绍
JavaScript是什么？
JavaScript是一种web前端的描述语言，也是一种基于对象（Object）和事件驱动（Event Driven）的、安全性好的脚本语言。它运行在客户端从而减轻服务器的负担。css
JavaScript的特色：html
- JavaScript主要用来向html页面中添加交互行为
- JavaScript是一种脚本语言，语法和C语言系列语法相似，属于弱语言类型
- JavaScript通常用来编写客户端脚本，如node.js例外
- JavaScript是一种解释性语言，边执行边解释无需另外编译
在此之间咱们就已经学过了HTML+CSS，那么咱们就须要从新了解下web前端：前端
- HTML：从语义的角度，描述页面结构
- CSS：从审美的角度，描述样式（美化页面）
- JavaScript：从交互的角度，描述行为（提高用户体验）
JavaScript历史背景介绍
布兰登 • 艾奇（Brendan Eich，1961年～），1995年在网景公司，发明的JavaScript。java
一开始JavaScript叫作LiveScript，可是因为当时Java语言特别火，因此为了傍上打牌，就更名为JavaScript。Java和JavaScript的关系，就如同北大和北大青鸟的关系。node
在同时期还有其余的网页语言，好比VBScript、JScript等等，后来都被JavaScript战胜了，因此如今的浏览器中，只运行一种脚本语言就是JavaScript。python
JavaScript的用途
JavaScript的用途是解决页面交互和数据交互，最终目的是峰峰客户端效果以及数据的有效传递。web
- 实现页面交互，提高用户体验实现页面特效。即js操做html的dom结构或操做样式
- 客户端表单验证，即在数据送达服务端以前进行用户提交信息及时有效地验证，减轻服务器压力。即数据交互
JavaScript和ECMAScript的关系
ECMAScript是一种由Ecma国际（前身为 欧洲计算机制造商协会）制定的一种标准。windows
JavaScript是由公司开发而成的，问题是不便于其余的公司拓展和使用。因此ECMA组织牵头执行了JavaScript的标准，取名为ECMAScript。数组
简单的说，ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script(Flash)。就是说当你的JavaScript学完了，那么Flash程序也就垂手可得了。
ECMAScript在2015年6月，发布了ECMAScript6版厄本那，语言能力更强（也包含了不少新特性）。可是，浏览器的厂商不能那么快追上这个标准。
更多信息请点击：
JavaScript入门易学性
- JavaScript对初学者比较友好
- JavaScript是有界面效果的
- JavaScript是弱语言，变量只须要var来声明。而Java中变量的声明，要根据变量的类型来定义
好比Java中须要定义如下变量：
int a; float a; double a; String a; boolean a;
可是在JavaScript中，只用定义一个变量：
var a;
- JavaScript不用关心其余的事情，更关心本身的业务
JavaScript的组成
JavaScript基础分为三个部分：
- ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等
- DOM：操做网页上的元素的API。好比让盒子移动、变色、轮播图等
- BOM：操做浏览器部分功能的额API。好比让浏览器自动滚动
PS：JavaScript重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS这种的margin、padding都是机械重复劳动。
第一个JavaScript实例
引入JavaScript的3种方式
- 外链式
- 行内式
- 内部式
外链式
也就是和咱们引入外部CSS文件同样，在head头部引入咱们自定义JavaScript脚本：
<script src="01%20index.js">
行内式
由于咱们的JavaScript是能够操做咱们的标签的，也就是说咱们能够把标签当成DOM（Document Object Module），因此咱们就可使用行内式来引入JavaScript：
<body>
<p id="p1" onclick="clickHandler()">你好，JavaScript!</p>
</body>
可是咱们发现给了p标签id和onclick属性后，依然是没有任何效果，因此，咱们须要讲一下咱们的内部式
内部式
在咱们写的HTML代码中，拿到浏览器那边，浏览器是从上到下开始解析的，那么咱们须要把JavaScript写在最后面，等所有加载成功后，再来加载JavaScript：
<script type="text/javascript">
</script>
咱们的内部式就是这样引入的，那么咱们如今能够去写咱们的第一个JavaScript实例了
Hello,JavaScript!
当咱们点击P标签的时候，弹框输出：Hello,JavaScript!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1" onclick="clickHandler()">你好，JavaScript!</p>
</body>
<script type="text/javascript">
function clickHandler(){
alert('Hello,JavaScript!')
}
</script>
</html>
alert语句
alert（英文翻译为“警报”）的用途：弹出警告框
alert('这是个人第一个JavaScript程序！')
当咱们保存后在浏览器刷新，那么就会出现这样的效果：
JavaScript的语法规则
学习程序，是有规律可循的，就是程序中有相同的部分，这些部分就是一种规定，不能更改，咱们称为：语法
- JavaScript对换行、缩进、空格不敏感
备注：每一条语句末尾都要加上分号，虽然分号不是必须添加的，可是为了程序从此要压缩，若是不加分号，那么压缩后的程序将不能运行
- 全部的符号，都是英语的。好比括号、引号、分号
- JavaScript的注释：
单行注释：
// 我是注释
多行注释：
/*
多行注释1
多行注释2
*/
JavaScript在网页中输出信息的写法
在JavaScript中，网页输出新的写法有三种：
- 使用window.alert()输出警告框
- 使用document.write()方法将内容写到html文档中
- 使用innerHTML写入到HTML元素
- 使用console.log()写入到浏览器的控制台
使用window.alert()输出警告框
windos.alert(""),弹框效果，window是BOM对象，指的是整个浏览器，能够省略不写。弹框比较忽然，对用户来讲体验不是太好，基本上就是测试代码使用的：
<script type="text/javascript">
window.alert('星儿今天很漂亮') # window是能够忽略的
alert('星儿今天很漂亮')
</script>
使用document.write()方法将内容写到HTML文档中
document.write("")会直接在页面上输出内容
<script type="text/javascript">
document.write('星儿今天很漂亮')
</script>
既然咱们说过，JavaScript是用来操做DOM的，那么咱们就能够来尝试一下：
<script type="text/javascript">
document.write("星儿今天很漂亮")
document.write("<h1>我是一级标题</h1>")
</script>
使用innerHTML写入到HTML元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 id="demo1">我是一级标题</h1>
<button type="button" onclick="changeContent()">更改内容</button>
</body>
<script type="text/javascript">
function changeContent(){
document.getElementById("demo1").innerHTML = "经过innerHTML方法向页面输出内容"
}
</script>
</html>
当咱们尚未点击的时候是这样的：
当咱们点击按钮后是这个样子的：
使用console.log()写入到浏览器的控制台
其实console是一个系列，不只仅以后console.log()方法，还有console.error(),console.warn()，固然这些都是输出在控制台上面的:
<script type="text/javascript">
//控制台日志
console.log("控制台.日志")
</script>
<script type="text/javascript">
//控制台警告
console.warn("控制台.警告")
</script>
<script type="text/javascript">
//控制台错误
console.error("控制台.错误")
</script>
prompt()方法
prompt()方法用于显示可提示用户进行输入的对话框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="hello_user()" value="点我点我"/>
</body>
<script type="text/javascript">
function hello_user(){
var name = prompt("请输入用户名：")
if(name != null && name != ''){
document.write("hello,"+name+"!")
}
}
</script>
</html>
点咱们没有点击的时候，此时就只有一个button按钮
当咱们点击按钮的时候，会弹框让咱们输如用户名
当点击肯定后，会在浏览器界面输出一句话
JavaScript中的变量
变量的含义
变量，便是在程序运行过程当中它的值是容许修改的量，与他相对应的就是常量：在程序运行过程当中它的值不容许修改的量
JavaScript和Python是同样的弱类型语言，Python中定义变量没有关键字:username = 'xiao'，可是在JavaScript中定义变量使用关键字: var name = 'xiao';
var name = "xiao";
变量的声明和定义
有两种方式：
- 先声明后定义
- 声明马上定义
先声明后定义
//1.先声明 var dog; console.log(dog) //undefined表明未定义
//2.后定义 dog = "校长"; console.log(dog)
声明马上定义(经常使用)
<script type="text/javascript">
var dog2 = "雪儿";
console.log(dog2)
</script>
变量名的命名规范
- 严格去分大小写
- 命名时能够出现字母、数字、下划线、$，可是不能数字开头，也不能是纯数字，不能包括JavaScript的关键字和保留字
- 推荐驼峰命名法
- 匈牙利命名法
JavaScript的保留关键字
https://www.runoob.com/js/js-reserved.html
JavaScript基本数据类型
JavaScript数据类型包括：基本数据类型和引用数据类型
基本数据类型指的是简单的数据段，引用数据类型指的是具备多个值构成的对象
当咱们把变量赋值给一个变量时，解析器首先要确认的是这个值是基本数据类型仍是引用数据类型
基本数据类型
基本数据类型分为如下五种：
- number
- string
- boolean
- null
- undefined
数字类型:number
<script type="text/javascript">
var num = 123;
console.log(num)
</script>
number类型在控制台输出是蓝色的
字符串类型:string
<script type="text/javascript">
var str = "泰然城";
console.log(str)
</script>
字符串类型在控制台输出是黑色的
布尔类型:boolean
<script type="text/javascript">
var b1 = true;
console.log(b1)
console.log(typeof b1)
</script>
空对象:null
<script type="text/javascript">
var n1 = null;
console.log(n1)
console.log(typeof n1)
</script>
null表明的是空对象
未定义:undefined
这个在刚刚咱们讲变量的声明和定义已经说过了，若是一个变量声明了可是没有定义，那么就是undefined
<script type="text/javascript">
var name1;
console.log(name1)
console.log(typeof name1)
</script>
其实还有一种数据类型,Infinity 属性用于存放表示正无穷大的数值：
<script type="text/javascript">
var dev = 5/0;
console.log(dev)
console.log(typeof dev)
</script>
引用数据类型
- Function
- Object
- Array
- String
- Date
后面会慢慢讲解
JavaScript的运算符
JavaScript运算符分为四种：
- 算术运算符
- 赋值运算符
- 比较运算符
- 逻辑运算符
算数运算符和赋值运算符请参考：http://www.w3school.com.cn/js/js_operators.asp
比较运算符和逻辑运算符请参考：http://www.w3school.com.cn/js/js_comparisons.asp
特殊状况
字符串拼接
咱们有这么一段文字须要拼接：
相比10年前的北京奥运，这一次，你们选择了少而精的策略，真正在舞台上的演员只有70余人。
那么此时咱们想把北京奥运和70拿出来再经过字符串进行拼接，作法是这样的：
<script type="text/javascript">
var n1 = "北京奥运";
var n2 = 70;
var str = "相比10年前的"+n1+"，这一次，你们选择了少而精的策略，真正在舞台上的演员只有"+n2+"余人。";
console.log(str)
</script>
字符串运算
字符串相加
<script type="text/javascript">
var str1 = "1";
var str2 = "2";
var newStr = str1+str2;
console.log(newStr)
console.log(typeof newStr)
</script>
虽然结果是12，可是仍是string类型
若是咱们想要将string类型转换成int类型，须要使用到parseInt()方法
<script type="text/javascript">
//将string类型转换成int类型
var newStr2 = parseInt(newStr);
console.log(typeof newStr2)
</script>
当咱们使用字符串相减的时候：
<script type="text/javascript">
var str1 = "1";
var str2 = "2";
var newStr3 = str1-str2;
console.log(newStr3)
</script>
一样，在咱们使用字符串相乘/相除都是能够执行成功不须要转换数据类型的，验证结果略过
咱们来尝试下两个都是字符串且不像数字的相乘：
<script type="text/javascript">
var n1 = 'one';
var n2 = 'two';
console.log(n1*n2)
</script>
输出为NaN,即Not a Num
JavaScript中的流程控制语句
- if
- switch
- while
- do while
- for
if语句
定义鸡为20，若是大于15则大吉大利今晚吃鸡
<script type="text/javascript">
var ji = 20;
if (ji >=20) {
console.log("大吉大利，今晚吃鸡！")
}
</script>
if...else
<script type="text/javascript">
var ji = 15;
if (ji >=20) {
console.log("大吉大利，今晚吃鸡！")
} else{
console.log("很遗憾，今晚不能吃鸡！")
}
</script>
if...else if
<script type="text/javascript">
var mathScore = 140;
var totalScore = 500;
if (mathScore >= 138 && totalScore >= 680) {
console.log("恭喜你被清华大学录取！")
} else if( totalScore >= 700 || mathScore >= 139){
console.log("恭喜你被复旦大学录取！")
}else {
console.log("很抱歉！")
}
</script>
switch
switch和case一块儿用，case表示的是一个条件，知足这个条件就会走进来，遇到break就会跳出
<script type="text/javascript">
var gameScore = "best";
switch (gameScore){
case "best":
console.log('大吉大利今晚吃鸡！')
break;
case "better":
console.log("你是最优秀的！")
break;
default:
break;
}
</script>
while
while循环有3个条件：
- 初始化循环变量
- 循环判断条件
- 更新循环变量
<script type="text/javascript">
var n = 1;
while (n<=100){
console.log(n)
n++;
}
</script>
练习：打印1-100之间3的倍数
<script type="text/javascript">
var n = 1;
while (n<=100){
if (n%3===0) {
console.log(n)
}
n++
}
</script>
do...while
do...while和while不同，do...while无论符不符合条件，至少会运行一次
<script type="text/javascript">
var n = 3;
do{
console.log(n)
n++
}while (n<10){
}
</script>
for循环
打印1-100之间9的倍数
<script type="text/javascript">
for (var n=1;n<=100;n++) {
if (n%9==0) {
console.log(n)
}
}
</script>
计算1-100的和
<script type="text/javascript">
var sum=0;
for (var n=1;n<=100;n++) {
sum+=n
}
console.log(sum)
</script>
数组的建立和使用
在Python中，能存放数据的有列表，用[]表示，可是在JavaScript中，[]被当作为数组，所谓的数组看以当作是一个容器，用来存放东西的容器。
数组建立的两种方式：
- 字面量方式建立
- 使用构造函数的方式建立
字面量方式建立
所谓字面量的方式，是咱们最常常用的，这种方法简单直观
//由于Array是一个对象，那么这个对象就有本身的方法和属性 var arr = ['red','yellow','black'] //建立一个空数组 var arr2 = []
使用构造方法建立数组
<script type="text/javascript">
var arr1 = new Array();//建立的是空数组
//万事万物皆对象，没有对象new一个，此时的Array能够当作是一个类
var colors = new Array('red','blue','yellow');
console.log(colors)
</script>
数组的基本操做
数组的赋值
<script type="text/javascript">
//1.建立一个空的数组
var colors = new Array();
//2.为数组赋值
colors[0] = "red";
colors[1] = "black";
colors[2] = "white";
//3.打印数据
console.log(colors)
</script>
经过下标获取元素的值
<script type="text/javascript">
//1.建立一个空的数组
var colors = new Array();
//2.为数组赋值
colors[0] = "red";
colors[1] = "black";
colors[2] = "white";
//3. 经过下标获取数组的值
console.log(colors[0])
console.log(colors[2])
</script>
获取数组的长度
<script type="text/javascript">
//1.建立一个空的数组
var colors = new Array();
//2.为数组赋值
colors[0] = "red";
colors[1] = "black";
colors[2] = "white";
//3.获取数组的长度
console.log(colors.length)
</script>
遍历数组
<script type="text/javascript">
//1.建立一个空的数组
var colors = new Array();
//2.为数组赋值
colors[0] = "red";
colors[1] = "black";
colors[2] = "white";
//3.遍历数组
for (var count=0;count<=colors.length;count++) {
console.log(colors[count])
}
</script>
这里在后面有个undefined，是由于咱们在设置循环条件的时候设置成了小于等于数据的长度，可是数组的第一个元素是从0开始的，因此才会有undefined
数组的经常使用方法
concat():数组的合并
<script type="text/javascript">
//1.首先建立两个数组
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信阳']
//2.concat():两个数组的合并
var newN = n1.concat(n2)
console.log(newN)
</script>
toString()：将数组转换成为字符串
<script type="text/javascript">
//1.首先建立两个数组
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信阳']
//2.concat():两个数组的合并
var newN = n1.concat(n2)
//console.log(newN)
//3.将数组转换成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
console.log(newNum)
</script>
join()：将数组里的字符串按照指定的字符链接起来
<script type="text/javascript">
//1.首先建立两个数组
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信阳']
//2.concat():两个数组的合并
var newN = n1.concat(n2)
//console.log(newN)
//3.将数组转换成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
console.log(newN.join('__'))
</script>
indexOf():经过内容查找下标，正向查找
<script type="text/javascript">
//1.首先建立两个数组
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信阳']
//2.concat():两个数组的合并
var newN = n1.concat(n2)
//console.log(newN)
//3.将数组转换成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.经过内容查找下标
console.log(newN.indexOf("固始"))
</script>
lastindexOf():反向查找
<script type="text/javascript">
//1.首先建立两个数组
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信阳']
//2.concat():两个数组的合并
var newN = n1.concat(n2)
//console.log(newN)
//3.将数组转换成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.经过内容查找下标
//console.log(newN.indexOf("固始"))
//6.lastIndexOf()
console.log(newN.lastIndexOf("固始"))
</script>
咱们能够看到这个值依然是3，由于无论你正向仍是反向，顺序是不会变的
sort():数组的排序
<script type="text/javascript">
//1.首先建立两个数组
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信阳']
//2.concat():两个数组的合并
var newN = n1.concat(n2)
//console.log(newN)
//3.将数组转换成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.经过内容查找下标
//console.log(newN.indexOf("固始"))
//6.lastIndexOf()
//console.log(newN.lastIndexOf("固始"))
//7.sort()：对数组排序
var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
console.log(names.sort())
</script>
这样是按照26个字母进行排序的，若是首字母相同，那么就比较第二个字母，以此类推
reverse()：反转数组
<script type="text/javascript">
//1.首先建立两个数组
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信阳']
//2.concat():两个数组的合并
var newN = n1.concat(n2)
//console.log(newN)
//3.将数组转换成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.经过内容查找下标
//console.log(newN.indexOf("固始"))
//6.lastIndexOf()
//console.log(newN.lastIndexOf("固始"))
//7.sort()：对数组排序
var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
//console.log(names.sort())
//8.reverse()反转数组
console.log(names.reverse())
</script>
仅仅是对数组的反转，并不会排序
shift():移除掉数组中的第一个元素，返回的是移除掉元素的值
<script type="text/javascript">
//1.首先建立两个数组
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信阳']
//2.concat():两个数组的合并
var newN = n1.concat(n2)
//console.log(newN)
//3.将数组转换成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.经过内容查找下标
//console.log(newN.indexOf("固始"))
//6.lastIndexOf()
//console.log(newN.lastIndexOf("固始"))
//7.sort()：对数组排序
var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
//console.log(names.sort())
//8.reverse()反转数组
console.log(names.reverse())
//9.移除元素和添加元素
var shiftNames = names.shift();
console.log(shiftNames)
</script>
unshift()：向数组的第一个元素插入一个或者多个值，并返回新的长度
<script type="text/javascript">
//1.首先建立两个数组
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信阳']
//2.concat():两个数组的合并
var newN = n1.concat(n2)
//console.log(newN)
//3.将数组转换成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.经过内容查找下标
//console.log(newN.indexOf("固始"))
//6.lastIndexOf()
//console.log(newN.lastIndexOf("固始"))
//7.sort()：对数组排序
var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
//console.log(names.sort())
//8.reverse()反转数组
console.log(names.reverse())
//9.移除元素和添加元素
//var shiftNames = names.shift();
//console.log(shiftNames)
var unShiftNames = names.unshift("liming","王鹏飞")
console.log(unShiftNames)
</script>
push():向数组的尾部添加一个或者多个值，并返回数组的长度
<script type="text/javascript">
//1.首先建立两个数组
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信阳']
//2.concat():两个数组的合并
var newN = n1.concat(n2)
//console.log(newN)
//3.将数组转换成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.经过内容查找下标
//console.log(newN.indexOf("固始"))
//6.lastIndexOf()
//console.log(newN.lastIndexOf("固始"))
//7.sort()：对数组排序
var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
//console.log(names.sort())
//8.reverse()反转数组
console.log(names.reverse())
//9.移除元素和添加元素
//var shiftNames = names.shift();
//console.log(shiftNames)
var unShiftNames = names.unshift("liming","王鹏飞")
//console.log(unShiftNames)
//10.push():在数组的尾部添加一个或多个值，返回的是数组的长度
var pushNames = names.push("lihaiming","languansheng")
console.log(pushNames)
</script>
pop()：删除数组尾部的一个元素，并返回这个元素的值
<script type="text/javascript">
//1.首先建立两个数组
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信阳']
//2.concat():两个数组的合并
var newN = n1.concat(n2)
//console.log(newN)
//3.将数组转换成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.经过内容查找下标
//console.log(newN.indexOf("固始"))
//6.lastIndexOf()
//console.log(newN.lastIndexOf("固始"))
//7.sort()：对数组排序
var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
//console.log(names.sort())
//8.reverse()反转数组
console.log(names.reverse())
//9.移除元素和添加元素
//var shiftNames = names.shift();
//console.log(shiftNames)
var unShiftNames = names.unshift("liming","王鹏飞")
//console.log(unShiftNames)
//10.push():在数组的尾部添加一个或多个值，返回的是数组的长度
var pushNames = names.push("lihaiming","languansheng")
//console.log(pushNames)
//11.pop():删除数组的最后一个元素,而且返回删除的元素值
var popNames = names.pop();
console.log(popNames)
</script>
对字符串进行反转
<script type="text/javascript">
var str = "hello Javascript!"
console.log(str.split("").reverse().join(""))
</script>
函数的使用
字面量方式建立
<script type="text/javascript">
//1.字面量方式的建立
function add(){
alert("add函数被调用了！")
}
add()
</script>
无论在什么语言中，定义了函数那么就须要有调用，在JavaScript是这样的：
定义函数时须要携带参数
<script type="text/javascript">
//1.字面量方式的建立
function add(){
alert("add函数被调用了！")
}
//add()
//第二种方式：定义函数时携带参数
function add2(a,b){
console.log(a*b)
}
add2(4,5)
</script>
定义函数值须要有返回值
<script type="text/javascript">
//1.字面量方式的建立
function add(){
alert("add函数被调用了！")
}
//add()
//第二种方式：定义函数时携带参数
function add2(a,b){
console.log(a*b)
}
//add2(4,5)
//第三种方式：定义函数须要有返回值
function add3(a,b){
return a*b
}
var a = add3(5,9)
console.log(a)
</script>
Object_构造函数
对象的建立有如下几种方式：
- 字面量方式建立
- 使用Object()建立对象
- 使用构造函数方式建立对象
字面量方式建立
在JavaScript中，对象的属性是用key:value的方式存储的
<script type="text/javascript">
var stu = {
name:"(*^_^*)亚飞",
age:22,
fav:"鸡汤",
}
console.log(stu)
</script>
推荐使用这种字面量方式建立，这种方式简单直观
若是想要设置name属性的值，那么咱们须要用点语法，也就是在python中的get方法和set方法
<script type="text/javascript">
var stu = {
name:"(*^_^*)亚飞",
age:22,
fav:"鸡汤",
}
console.log(stu)
stu.name = "li"
console.log(stu)
</script>
使用Object()建立对象
使用Object构造函数 特色： 首字母要大写 想要建立对象就须要本身new一个
<script type="text/javascript">
var Stu = new Object();
Stu.name = "小明";
console.log(Stu)
</script>
使用构造函数方式建立对象
<script type="text/javascript">
var Student = function(){
this.name = "海明";
this.age = 22;
this.fav = function(){
alert('旅游')
}
}
//建立对象
var stu1 = new Student();
console.log(stu1)
</script>
使用构造函数建立对象，有如下三点：
- 函数名首字母大写
- 构造函数不须要return
- 为对象添加成员变量：this.name = 'guansheng';
可是使用构造函数方式建立对象有一个弊端：每new一次对象，里面的成员变量和方法都是同样的，因此咱们在调用的时候不知道调用的是哪一个
固然，到最后咱们推荐的是构造函数方式
<script type="text/javascript">
function Animal(){
this.name = "jingjing";
this.age = 21;
}
Animal.prototype.shownames1 = function(){
alert('调用了shownames1方法！')
}
Animal.prototype.shownames2 = function(){
alert('调用了showname2方法！')
}
var a = new Animal();
a.shownames1()
</script>
String_Number
String字符串对象，那么这是一个对象就会有本身的方法
obj.length获取字符串的长度
<script type="text/javascript">
var str = "hello,world!"
console.log(str.length)
</script>
toUpperCase(obj)把小写变大写
<script type="text/javascript">
var str = "hello,world!"
console.log(str.toUpperCase())
</script>
toLowerCase()把大写变成小写
<script type="text/javascript">
var str = "hello,world!"
var bigStr = str.toUpperCase();
console.log(bigStr.toLowerCase())
</script>
obj.split("",n)以xx进行切割，并返回数组的最大长度为m
<script type="text/javascript">
var str = "hello,world!"
console.log(str.split(" "))
</script>
obj.sunstring(n,m)左开右闭的方式获取str的n到m元素的值
<script type="text/javascript">
var str = "hello,world!"
console.log(str.substring(2,5))
</script>
Number类型
obj.toString()将number装换成字符串类型
<script type="text/javascript">
var num = 123.4567
var num2String = num.toString();
console.log(num2String)
console.log(typeof num2String)
</script>
toFixed(n)四舍五入，最大长度为n
<script type="text/javascript">
var num = 123.4567
console.log(num.toFixed(2))
</script>
Date对象的使用
<script type="text/javascript">
var myDate = new Date();
//1.获取今天是第几号
console.log(myDate.getDate())
//2.获取当天的日期和时间
console.log(Date())
//3.获取今天是星期几 0表明周日 6表明周六
console.log(myDate.getDay())
//4.获取如今是几时
console.log(myDate.getHours())
//5.获取一年中的几个月 0表明1月 11表明12月
console.log(myDate.getMonth()+1)
</script>
Date对象的小练习
在桌面显示当前时间：
<script type="text/javascript">
function getCurrentTime(){
//1.建立一个时间对象
var date = new Date();
//2.获取当前时间
var timeInfo = date.getFullYear()+"年"+num(date.getMonth()+1)+"月"+num(date.getDate())+"日 "+ num(date.getHours())+":"+num(date.getMinutes())+":"+num(date.getSeconds());
//3.获取span1这个元素
var oSpan = document.getElementById('span1');
//4.将时间写到span标签中
oSpan.innerHTML = timeInfo.fontcolor('red');
}
getCurrentTime()
//5.设置定时器
setInterval("getCurrentTime()",1000)
//咱们发现：秒钟走到59后 就变成了0 而不是00
function num(n){
if (n<10) {
return "0"+n
} else{
return n
}
}
</script>
Math对象的使用
Math对象用于执行数学任务
<script type="text/javascript">
//1.ceil() 天花板函数 向上取整 大于等于1，而且最接近的整数
var reg1 = Math.ceil(1.12131)
console.log(reg1)
//2.floor() 地板函数 向下取整 小于等于1，而且最接近的整数
var reg2 = Math.floor(1.12131)
console.log(reg2)
//3.最大值与最小值
var reg3 = Math.max(4,5)
console.log(reg3)
var reg4 = Math.min(1,9)
console.log(reg4)
//4.取随机数 这个是0-1之间的随机数
var reg5 = Math.random()
console.log(reg5)
//获取100-200之间的随机数
var reg6 = 100+Math.random()*100
console.log(reg6)
</script>
JavaScript案例
模态框案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#box{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3);
}
#content{
width: 400px;
height: 200px;
line-height: 200px;
background-color: white;
position: relative;
top: 150px;
margin: auto;
text-align: center;
color: red;
}
#span1{
position: absolute;
top: 0px;
right: 0px;
background-color: red;
color: white;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
}
</style>
</head>
<button id="btn">点我</button>
<body>
</body>
<script type="text/javascript">
var myBtn = document.getElementById('btn');
var myDiv = document.createElement('div');
var myP = document.createElement('p');
var mySpan = document.createElement('span')
myDiv.id = 'box';
myP.id = 'content';
mySpan.id = "span1";
myP.innerHTML = "成功弹出模态框";
mySpan.innerHTML = "x";
myDiv.appendChild(myP);
myP.appendChild(mySpan);
myBtn.onclick = function(){
//console.log(myBtn.parentNode)
myBtn.parentNode.insertBefore(myDiv,myBtn)
}
mySpan.onclick = function(){
myDiv.parentNode.removeChild(myDiv)
}
</script>
</html>
点一点有惊喜
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
text-align: center;
line-height: 200px;
margin: 20px auto;
color: white;
font-size: 22px;
font-weight: blod;
}
</style>
</head>
<body>
<div class="box">
点击有惊喜
</div>
</body>
<script type="text/javascript">
//getElementsByClassName获取的是全部符合条件的元素,用数组保存的
var myBox = document.getElementsByClassName("box")[0];
var a = 0;
myBox.onclick = function(){
a++;
if (a%4===1) {
this.style.background = "green";
this.innerText = "逗你玩呢";
} else if(a%4===2){
this.style.background = "blue";
this.innerText = "再点一次";
} else if(a%4===3){
this.style.background = "transparent";
this.innerText = "";
} else{
this.style.background = 'red';
this.innerText = "点击有惊喜"
}
}
</script>
</html>
简易留言框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
</div>
<textarea id='msg'></textarea>
<input type="button" id="btn" value="提交" />
<button onclick="sum()">统计</button>
</body>
<script type="text/javascript">
var ul = document.createElement('ul')
var box = document.getElementById('box');
box.appendChild(ul)
var msg = document.getElementById('msg');
var btn = document.getElementById('btn');
var count=0;
btn.onclick = function(){
var li = document.createElement('li');
li.innerHTML = msg.value + "<span> X</span>";
var lis = document.getElementsByTagName('li');
if (lis.length==0) {
ul.appendChild(li);
count++;
} else{
ul.insertBefore(li,lis[0]);
count++;
}
msg.value = "";
var spans = document.getElementsByTagName('span');
for (var i=0;i<spans.length;i++) {
spans[i].onclick = function(){
ul.removeChild(this.parentNode)
count--;
}
}
}
function sum(){
alert("一共有"+count+"条留言")
}
</script>
</html>
选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#tab{
width: 480px;
margin: 20px auto;
border: 1px solid red;
}
ul li{
float: left;
width: 160px;
height: 60px;
text-align: center;
line-height: 60px;
background-color: #CCCCCC;
}
ul li a{
color: #000000;
}
li.active{
background-color: #FFFFFF;
}
p{
height: 200px;
display: none;
}
p.active{
display: block;
height: 200px;
text-align: center;
line-height: 200px;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active"><a href="">个人商城</a></li>
<li><a href="">个人收藏</a></li>
<li><a href="">个人订单</a></li>
</ul>
<p class="active">商城展现</p>
<p>收藏展现</p>
<p>订单展现</p>
</div>
</body>
<script type="text/javascript">
var tabli = document.getElementsByTagName('li')
var tabContent = document.getElementsByTagName('p')
for (var i=0;i<tabli.length;i++) {
tabli[i].index = i;
tabli[i].onclick = function(){
for (var j=0;j<tabli.length;j++) {
tabli[j].className = '';
tabContent[j].className = '';
}
this.className = 'active';
console.log(this.index)
tabContent[this.index].className = 'active';
}
}
</script>
</html>
仿淘宝搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿淘宝搜索框</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
input{
outline: none;
display: block;
width: 390px;
height: 40px;
margin-top: 20px;
font-size: 20px;
border: 2px solid red;
border-radius: 5px;
}
label{
position: absolute;
top: 32px;
left: 10px;
font-size: 20px;
color: gray;
}
</style>
</head>
<body>
<div id="search">
<input type="text" name="" id="text" value="" />
<label for="text" id="msg">泰然城</label>
</div>
</body>
<script type="text/javascript">
var txt = document.getElementById('text');
var msg = document.getElementById('msg');
txt.oninput = function(){
if (txt.value == '') {
msg.style.display = 'block'
} else{
msg.style.display = 'none'
}
}
</script>
</html>
匀速移动案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>匀速移动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 0px;
}
</style>
</head>
<body>
<button id="btn">点我</button>
<div id="box">
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var count = 0;
var timer = null;
//当点击按钮时
btn.onclick = function(){
setInterval(function(){
count++;
if (count >1000) {
clearInterval(timer)
box.style.display = 'none'
} else{
box.style.left = count +'px'
}
},1)
}
</script>
</html>
5秒自动关闭广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
img{
position: fixed;
}
#left{
left: 0px;
}
#right{
right: 0px;
}
ul li{
font-size: 26px;
}
</style>
</head>
<body>
<img src="../JS_dom/1.gif" id="left"/>
<img src="../JS_dom/1.gif" id="right"/>
<ul>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
<li>屠龙宝刀 点击就送</li>
</ul>
</body>
<script type="text/javascript">
var left = document.getElementById('left')
var right = document.getElementById('right')
var timer = null;
timer = setTimeout(function(){
left.style.display = 'none'
right.style.display = 'none'
},5000)
</script>
</html>
小米轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米滚动框</title>
<style type="text/css">
*{padding: 0;margin: 0;}
.wrap{
width: 512px;
height: 400px;
border: 3px solid #808080;
position: relative;
overflow: hidden;
margin: 100px auto;
}
.wrap span{
width: 100%;
height: 200px;
position: absolute;
}
.up{
top: 0;
}
.down{
bottom: 0;
}
img{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="box" class="wrap">
<img src="../JS_dom/mi.png" id="xiaomi"/>
<span id="picUp" class="up"></span>
<span id="picDown" class="down"></span>
</div>
</body>
<script type="text/javascript">
var up = document.getElementById('picUp');
var down = document.getElementById('picDown');
var img = document.getElementById('xiaomi');
var count = 0;
var timer = null;
//鼠标移入的时候吧
up.onmouseover = function(){
//无论怎样 上来先清定时器
clearInterval(timer);
timer = setInterval(function(){
count-=3;
count >= -1070 ? img.style.top = count + 'px': clearInterval(timer);
},30)
}
down.onmouseover = function(){
clearInterval(timer)
timer = setInterval(function(){
count += 1;
count < 0 ? img.style.top = count + 'px': clearInterval(timer);
})
}
</script>
</html>
轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝轮播</title>
<style type="text/css">
*{padding: 0;margin: 0;}
ul{list-style: none;}
.box{
width: 600px;
height: 200px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
ul li{
float: left;
}
.box ul{
width: 400%;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="../JS_dom/image/01.jpg"/></li>
<li><img src="../JS_dom/image/02.jpg"/></li>
<li><img src="../JS_dom/image/03.jpg"/></li>
<li><img src="../JS_dom/image/04.jpg"/></li>
</ul>
</div>
</body>
<script type="text/javascript">
var box = document.getElementsByClassName('box')[0];
console.log(box)
var ul = box.children[0];
var num = 0;
function autoPlay(){
num--;
num <= -600 ? num=0 : num ;
ul.style.left = num +'px';
}
//鼠标移动上去
box.onmouseover = function(){
clearInterval(timer)
}
//鼠标拿开的时候
box.onmouseout = function(){
timer = setInterval(autoPlay,30)
}
</script>
</html>
JavaScript的BOM知识点
浏览器对象模型（BOM）
IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM（浏览器对象模型），能够对浏览器窗口进行访问和操做。使用 BOM，开发者能够移动窗口、改变状态栏中的文本以及执行其余与页面内容不直接相关的操做。
BOM输出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//DOM输出系列
//1.alert() 弹框输出
//2.console.log() 用于浏览器调试
console.log('111')
//3.prompt() 获取用户输入
var pro = prompt('请输入你的名字：');
console.log(pro)
//prompt(value,defaultValue) 自动输入defaultValue
var pro1 = prompt('请输入你的学校：','城关中学');
console.log(pro1)
//4.confirm() 弹框 若是选择肯定则返回true，若是选择取消则返回false
var con = confirm('是否要关闭？')
console.log(con)
</script>
</html>
open_close方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="window.open('https://www.baidu.com')">打开百度首页</button>
<button>小米官网</button>
<button>关闭当前页面</button>
<button id="new">打开一个空白页</button>
</body>
<script type="text/javascript">
//open和close方法
//1.open() 打开方法
var btn = document.getElementsByTagName('button')[1];
console.log(close)
btn.onclick = function(){
open("https://www.mi.com")
}
var close1 = document.getElementsByTagName('button')[2];
close1.onclick = function(){
if (confirm('是否关闭? ')) {
console.log(111)
close();
}
}
//打开一个空白页
var openNew = document.getElementById('new');
openNew.onclick = function(){
open('about:blank','_self')
}
</script>
</html>
BOM的其余元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//1.获取浏览器的信息 返回浏览器的用户设备信息
console.log(window.navigator.userAgent)
//2.windows.location用于得到当前页面的地址 (URL)，并把浏览器重定向到新的页面。
// console.log(window.location)
//这个方法使用的比较多
//window.location.href = 'https://www.baidu.com';
//3.全局刷新 window.location.reload() 尽可能少用
//window.location.reload()
</script>
</html>
client系列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
width: 200px;
height: 200px;
border: 5px solid red;
padding: 10px;
/*margin: 10px auto;*/
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
<script type="text/javascript">
var box = document.getElementById('box')
/*
clientTop:指的是上面border的宽度
clientLeft:指的是左边border的宽度
clientWidth：指的是整个内容区域加上上下两个padding的宽度
clientHeight:指的是整个内容区域加上左右两个padding的宽度
* */
console.log(box.clientTop)
console.log(box.clientLeft)
console.log(box.clientHeight)
console.log(box.clientWidth)
</script>
</html>
屏幕的可视区域
所谓的屏幕克是区域，就是当你首次打开浏览器 能看见的区域。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//
window.onload = function(){
console.log(document.documentElement.clientWidth)
console.log(document.documentElement.clientHeight)
}
</script>
</html>
咱们也能够对屏幕的大小进行监听，当屏幕或宽度改变，那么咱们的值也跟着改变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//
window.onload = function(){
console.log(document.documentElement.clientWidth)
console.log(document.documentElement.clientHeight)
window.onresize = function(){
console.log(document.documentElement.clientWidth)
console.log(document.documentElement.clientHeight)
}
}
</script>
</html>
offset系列
没有设置盒子定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#wrap{
}
#box{
width: 200px;
height: 200px;
border: 1px solid red;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="box">
</div>
</div>
</body>
<script type="text/javascript">
var box = document.getElementById('box');
/*
若是没有设置定位，那么：
offsetTop是指上方盒子margin的宽度
offsetLeft指的是左边盒子margin的宽度
offsetHeight指的是盒子 border+padding+content的高度
offsetWidth指的是盒子border+padding+content的宽度
* */
console.log(box.offsetTop)
console.log(box.offsetLeft)
console.log(box.offsetWidth)
console.log(box.offsetHeight)
</script>
</html>
若是设置了父相子觉，那么
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#wrap{
position: relative;
width: 400px;
height: 400px;
border: 1px solid black;
}
#box{
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
border: 1px solid red;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="box">
</div>
</div>
</body>
<script type="text/javascript">
var box = document.getElementById('box');
/*
若是设置定位，那么：
offsetTop是指上方盒子外边框到父盒子顶部的距离
offsetLeft指的是左边盒子的外边框到父盒子左边的距离
offsetHeight指的是盒子 border+padding+content的高度
offsetWidth指的是盒子border+padding+content的宽度
* */
console.log(box.offsetTop)
console.log(box.offsetLeft)
console.log(box.offsetWidth)
console.log(box.offsetHeight)
</script>
</html>
相关文章
- 1. Javascript---Javascript简介
- 2. Javascript- Javascript学习
- 3. javascript --- javascript与DOM
- 4. [Javascript] Decorators in JavaScript
- 5. JavaScript（一）：JavaScript简介
- 6. javascript[1] — 初识 javascript
- 7. 【JavaScript】——浅谈js（JavaScript）
- 8. Web 开发技术- JavaScript- JavaScript - JavaScript -String
- 9. Javascript Objects - Javascript语法基础 - Javascript核心
- 10. JavaScript基础:javaScript基本语法,javaScript DOM,javaScript事件,javaScript综合案例
- 更多相关文章...
- • JavaScript 指南 - 网站建设指南
- • ASP 子程序 - ASP 教程
- • YAML 入门教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Javascript---Javascript简介
- 2. Javascript- Javascript学习
- 3. javascript --- javascript与DOM
- 4. [Javascript] Decorators in JavaScript
- 5. JavaScript（一）：JavaScript简介
- 6. javascript[1] — 初识 javascript
- 7. 【JavaScript】——浅谈js（JavaScript）
- 8. Web 开发技术- JavaScript- JavaScript - JavaScript -String
- 9. Javascript Objects - Javascript语法基础 - Javascript核心
- 10. JavaScript基础:javaScript基本语法,javaScript DOM,javaScript事件,javaScript综合案例