前端三剑客其三--JavaScript学后总结
JavaScript
-
- JavaScript语言历史
- JavaScript语言概述
- 基本语法
- 算术运算符
- 函数数据类型的变换
- 内置对象
-
- String字符串
- Array数组
- Date类
- Math类
- 事件触发
- Event对象
- Html DOM
- 浏览器内置对象
- Location对象
- 计时
JavaScript语言历史
● JavaScript是由Netscape公司（美国网景公司）开发的一种脚本语言， 结
构简单，使用方便，对用户自身知识水平的要求并不高，易学易懂。
● Netscape公司将这种脚本语言命名为LiveScript，与java一样,也是面向对
象的语言,而且无需编译，可由浏览器直接解释运行，而不象Java那样需要经
过编译。
● Netscape公司见LiveScript大有发展前途，而SUN公司( java)也觉得可以
利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改
为JavaScript，造就了这个强力的WEB开发工具。
JavaScript语言概述
JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能（javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
作用：
1.响应客户端鼠标和键盘事件
2.客户端页面表单数据验证
3.使用JavaScript动态的改变页面标签的样式
javaScript与java区别
相同点: 都是面向对象语言
不同点:
javaScript属于脚本语言 运行在网页浏览器中
java是高级语言 需要整体编译 而后执行
javaScript与HTML,Css之间的关系:
HTML主要用于构建网页主体,填写网页内容,拥有实实现超链接, 图片 ,表单,表格等功能
Css主要用于更好的修饰网页标签的属性,新增盒子模型,浮动,定位等功能
javaScript把静态的网页赋予动态的效果,增 强Web客户交互,弥补了HTML的缺陷
具体作用:
1.响应网页中产生事件
2.进行客户端表单验证
3.动态改变标签样式
javaScript脚本写在一组 script 标签中,此标签可以放在head中或body中，一般习惯放在 head中，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件
1.在内部填写
<html>
<head>
<script type="text/javascript">
alert(“hello javaScript”);
script>
head>
<body>
body>
html>
2.写在外部js文件中
<script src="js/test.js" type="text/javascript" charset="utf-8">script>
alert("来自外部的javascript文件");
基本语法
变量
声明变量用var关键字 例如 var name;
同时可以进行赋值 var name=“LiHua”;
JavaScript支持的数据类型
1. 数值型(number)： 其中包括整型数和浮点型数。
var a=4; alert(typeof(a)); /* 获取变量a的数据类型 */
2. 布尔型(boolean)：即逻辑值，true或flase,常用于逻辑值判断.
3. 字符串型： 由单个或多个文本字符组成。字符串是用单引号或双引号来说明的（使用单引号来输入包含引号的字符串。）
4. undefined类型: undefined类型针对声明未初始化变量
5. Object类型
算术运算符
+可以进行“加法”与“连接”运算，如果2个运算符中的一个是 字符串，javascript就将另一个转换成字符串，然后将2个运算数 连接起来。
定义函数
函数定义的基本语法：
function functionName([arguments]){
javascript statements
[return expression]
}
function: 表示函数定义的关键字;
functionName:表示函数名;
arguments:表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空;
statements: 表示实现函数功能的函数体;
return expression:表示函数将返回expression的值，同样是可选的的语句。
函数数据类型的变换
• parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串，
则字符串开头的数字部分被转换成整数，如果以字母开头，则返回
“NaN”。
• parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的
数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。
• typeof (arg)返回arg值的数据类型。
• eval(arg) 可运算某个字符串。
/* 利用eval函数把字符串当作脚本运行 */
var e="alert(11212)";
eval(e);
内置对象
String字符串
length 用法：返回该字符串的长度.
方法
charAt(n)：返回该字符串位于第n位的单个字符.
indexOf(char)：返回指定char首次出现的位置.
lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.
substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位置到end位置的前一位置的一段.
substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段.
split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。
例如：‘1&2&345&678’.split(’&’)返回数组：1,2,345,678。
var str="vsdvsdvds";
console.log(str.length);
console.log(str.substr(0,5));/* 开始位置,截取长度 */
console.log(str.substring(0,5));/* 开始位置,截取结束位置 */
Array数组
数组的定义方法：
var <数组名> = new Array();
这样就定义了一个空数组。以后要添加数组元素，就用： <数组名>[下标] = 值;
如果想在定义数组的时候直接初始化数据，请用： var <数组名> = new Array(<元素1>, <元素2>, <元素3>…);
还可以var <数组名> = [<元素1>, <元素2>, <元素3>…];
/* 创建Array数组对象 方法一*/
var array=new Array();
array[0]=1;
array[1]=2;
array[2]=3;
array[3]="4";
console.log(array);
/* 创建Array数组对象 方法二*/
var array1=new Array(1,2,"aas",true);
console.log(array1);
/* 创建Array数组对象 方法三*/
var array2=[1,2,“xasx”,true];
console.log(array2);
/* 用于连接多个数组 */
console.log(array.concat(array1));
/* 返回并删除最后一个元素 */
console.log(array.pop());
/* 新增数组元素并返回新长度 */
console.log(array.pop());
/* 向末尾增加新数组并返回新长度 */
console.log(array.push());
/* 用于把元素第一个元素删除并返回 */
console.log(array.shift());
/* 可从已有的数组中返回选定的元素 */
console.log(array1.slice(0,3));
/* 向/从数组中添加/删除项目，然后返回被删除的项目 */
console.log(array1.splice(1,2,0,0));/* (操作开始的位置,操作数量,添加元素) */
/* 返回一个字符串，该字符串把数组中的各个元素串起来 */
console.log(array1.join("!"));
console.log(array1.reverse());/* 逆序输出 */
Date类
获取日期
new Date() 返回当日的日期和时间
getFullYear() 返回四位数字年份
getDate() 返回一个月中的某一天 (1 ~ 31)
getMonth() 返回月份 (0 ~ 11)
getDay() 返回一周中的某一天 (0 ~ 6)
getHours() 返回 Date 对象的小时 (0 ~ 23)
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
getSeconds() 返回 Date 对象的秒数 (0 ~ 59))
设定日期
setDate() 设置 Date 对象中月的某一天 (1 ~ 31))
setMonth() 设置 Date 对象中月份 (0 ~ 11))
setYear() 设置 Date 对象中的年份（两位或四位数字）
/* object类型 */
var date=new Date();
date.getFullYear();
date.getDate();
date.getHours();
console.log(date);
Math类
Math 对象，提供对数据的数学计算。
PI 返回π（3.1415926535…)。
方法
Math.abs(x) 绝对值计算；
Math.pow(x,y) 数的幂；x的y次幂
Math.sqrt(x) 计算平方根；
Math.ceil(x) 对一个数进行上舍入
Math.floor(x) 对一个数进行下舍入。
Math.round(x) 把一个数四舍五入为最接近的整数
Math.random() 返回 0 ~ 1 之间的随机数
Math.max(x,y) 返回 x 和 y 中的最大值
Math.min(x,y) 返回 x 和 y 中的最小值
事件触发
onclick()鼠标点击时；
ondblclick鼠标双击时;
onblur()标签失去焦点;
onfocus()标签获得焦点;
onmouseover()鼠标被移到某标签之上;
onmouseout鼠标从某标签移开;
onload()是在网页加载完毕后触发相应的的事件处理程序;
onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。
Onkeydown键盘按下
Onkeyup 键盘抬起
Event对象
● Event 对象代表事件的状态，比如键盘按键的键位、鼠标的位置。
type 事件类型
Button 被点击的鼠标键位
altKey 按下altKey返回true
ctrlKey 按下ctrlKey返回true
shiftKey按下shiftKey返回true
keyCode 返回被按下的键位编码
offsetX 当前标签内的鼠标X轴
offsetY 当前标签内的鼠标Y轴
clientX 鼠标在浏览器内部X轴
clientY鼠标在浏览器内部Y轴
screenX 鼠标在显示器内的X轴
screenY鼠标在显示器内的Y轴
function test(a,e){
/* console.log(e.button); */
/* alert(a); */
console.log(e.offsetX+-----+e.offsetY);
}
<input type="button" value="按钮" onclick="test(1,event)"/>
function test(a,e){
//console.log(e.offsetX+"---"+e.offsetY);
//console.log(e.screenX+"---"+e.screenY);
console.log(e.keyCode);
console.log(e.ctrlKey);
console.log(e.altKey);
console.log(e.shiftKey);
}
<input type="button" value="测试" onmousedown="test(1,event)" />
Html DOM
DOM是Document Object Model文档对象（网页中的标签）模型的缩写. 通过html dom，可用javaScript操作html文档的所有标签.
通过JavaScript,操作 HTML 标签
要操作，先得到
有四种方法来做这件事：
1 .通过 id 找到 HTML 标签
document.getElementById(“id");
2 .通过标签名找到 HTML 标签
document.getElementsByTagName(“p”);
3 .通过类名找到 HTML 标签
document.getElementsByClassName(“p”);
4 .通过name找到 HTML 标签
document.getElementsByName(“name");
Html dom允许javaScript 改变html标签的内容。
改变 HTML 标签的属性
document.getElementById(“username").value=“new value";
document.getElementById("image").src=“new.jpg";
修改 HTML 内容的最简单的方法时使用 innerHTML 属性
document.getElementById(*“div”*).innerHTML=*new HTML*
html dom允许 javaScript改变html标签的样式。
语法：
document.getElementById("id").style.property=new style;
例：
document.getElementById("p2").style.backgroundImage="url(bg.jpg)";
浏览器内置对象
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 html dom 的 document 也是 window 对象的属性之一。
window.document.getElementById("header");
Window对象常用的属性：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.parent获得父级窗口对象(父子级之间调用)
Window对象常用的方法
window.open(‘url’, ‘name’,’features’) - 打开新窗口
features:一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。
width=100,height=100,top=100,left=100
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
父<div id="divobj">div>
<iframe src="内敛窗口练习二(子).html">iframe>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
function test(e){
var a=document.getElementById("child").innerHTML;
/* var b=window.parent.document.getElementById("divobj"); 从父级标签中获取值,通过方法传递到b中
b.innerHTML=a; */
window.open("内敛窗口练习一(父).html","name","width=300px,height=200px,left=200px,top=200px");
}
script>
head>
<body>
子<div id="child">1111div>
<input type="button" value="提交" onclick="test(event)">
<a href="https://www.baidu.com/?tn=56042972_18_hao_pg" target="name">百度a>
body>
html>
Location对象
location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。
属性：
href设置或返回完整的 URL
方法：
assign(url)加载一个新的文档
reload()重新加载当前文档
replace(url) 可用一个新文档取代当前文档。
function assigndemo(){
location.assign("child.html"); //加载新页面,保留原来的
}
function reloaddemo(){
location.reload();//刷新当前页面
}
function replacedemo(){
location.replace("child.html"); //加载新页面 替换当前页面
}
计时
通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执
行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
方法:
setTimeout(“函数”,”时间”)未来的某时执行代码
clearTimeout()取消setTimeout()
setInterval(“函数”,”时间”)每隔指定时间重复调用
clearInterval()取消setInterval()
//在指定的时间后,调用指定的函数,只调用一次
//指定的时间后,调用一次指定的函数
var t = setTimeout("test()",3000);
//每隔指定的时间,调用一次指定的函数
var t1 = setInterval("test()",3000);
function clearTime(){
//clearTimeout(t);//取消指定的定时器
clearInterval(t1);
}