一、JavaScript,运行于JavaScript解释器中的,解释型脚本语言
1、JavaScript主要用途 :
JavaScript主要读写HTML元素、在网页中嵌入动态文本、动态修改CSS样式表;对浏览器事件做出响应、表单数据验证、检测访客的 浏览器信息等;
2、JavaScript的相关应用 :
验证数据;页面特效;数值计算;动态页面效果
3、JavaScript位置 :
我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分;放在<head>部分,最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分;放在<body>部分,JavaScript代码在网页读取到该语句的时候就会执行。
4、JavaScript引用方式 :
1、使用<script>标签在HTML文件中添加JavaScript代码;2、单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js,然后将JS代码直接写在JS文件中,在HTML中添加如下代码,就可将JS文件嵌入HTML文件中,<script src="script.js"></script> ;3、放置在HTML标签以on开头的属性即事件处理程序中;
5、JavaScript输出 :
1、 使用Windows.alert()弹出警告框;2、使用Document.write()方法将内容写到HTML文档中( document对象,代表整个HTML 文档,可用来访问页面中的所有元素 );3、使用innerHTML写入到HTML元素;4、使用console.log()写入到浏览器的控制台;
6、一个完整的JavaScript实现,应该由以下三个部分组成:
1、核心,ECMAScript;2、文档对象模型,DOM,document object model;3、浏览器对象模型,BOM,browser object model;
通过核心对象,DOM对象,BOM对象,作用于HTML元素
二、JavaScript核心
1、数据类型
JavaScript数据类型有以下几种:数值型:数字可以带小数点,也可以不带;字符串型:用引号包围的文本;布尔型:只有两个取值,true false,非0或非空为true;null类型:表示从未赋值的值,只有一种取值null,引用一个没有定义的变量,返回null;undefined类型:专门用来确定一个已经创建但是没有初值的变量;
数值型,在JavaScript中,所有的数字都是浮点型;
当一个数字直接出现在JavaScript程序中时,被称为数值直接量,JavaScript支持的数值直接量有整型数据、十六进制和八进制数据、浮点型数据,注意,负号,是一元求反运算符,不是数值直接量的一部分;
toFixed() 方法,可把number四舍五入为指定小数位数的数字,返回值为string类型,typeof,查看数据类型
字符串型,字符串string 是由Unicode字符、数字 、标点 符号等组成的序列,它是JavaScript用来表示文本的数据类型;
字符串型的数据包含在单引号和双引号中;由单引号定界的字符串中可以包含双引号,由双引号定界的字符串中也可以包含单引号;可以采取内双外单的形式让输出的字符串带双引号,如果外双的形式,让字符串带双引号,可以采取转义字符 \" ;字符串可以用+号进行连接运算;
布尔型,布尔数据类型只有两个值,这两个合法的值分别由直接量true和false表示,它表示某个事物是真或假;
JavaScript在必要的时候,将true转化为1,将false转化为0
null类型,null,它表示值为空,用于定义空的或者不存在的引用;如果引用 一个没有定义的变量,则返回一个null值,null不等同于空字符串和0;
未定义类型,未定义类型的变量是undefined,表示变量还没有赋值,或者赋予一个不存在的属性值,此外,JavaScript中还有一种特殊类型的数字常量NaN,即“非数字”,当程序由于某种原因计算错误后,将产生一个没有意义的数字,此时JavaScript返回的数值就是NaN
null undefined的区别是,null表示一个变量被赋予一个空值,而undefined则表示该变量尚未被赋值
转义字符型,以反杠开头的,不可显示的特殊字符通常称为控制字符,也被称为转义字符;在document.write( )语句中使用转义字符时,只有将其放在格式化文本标签<pre></pre>中才会起作用
Object类型,复合数据类型;值为基本数据类型的组合;
复合数据类型,json的遍历
JavaScript JSON,JSON 英文全称 JavaScript Object Notation,是独立的语言,用于存储和传输数据的格式,通常用于服务端向网页传递数据;
JSON 语法规则:数据为 键 / 值 对;数据由逗号分隔;大括号保存对象;方括号保存数组;
JSON 格式化后为 JavaScript 对象,JSON 格式在语法上与创建 JavaScript 对象代码是相同的,所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
document.writeln(typeof text + "<br/>");
var obj = JSON.parse(text);
document.writeln(typeof obj.sites + "<br/>");
/* obj = obj.sites;
for(var i=0; i<obj.length; ++i){
document.write(obj[i].name + " " + obj[i].url + "<br/>") ;
} */
for(var i=0; i<obj.sites.length; ++i)
document.write(obj.sites[i].name + " " + obj.sites[i].url + "<br/>") ;
</script>
</body>
</html>
数据类型的自动转换,当字符串与其它类型用+连接,其它类型会转为字符串,其它的运算符-,*,/,%都会转换成Number类型;数据类型的强制转换,parseInt(),parseFloat()函数;
typeof运算符, 把类型信息用字符串返回,返回值有6种,number, string, boolean, object, undefined, function
2、变量
变量的主要作用是存取数据,提供存放信息的容器;JavaScript 是弱类型语言,对变量的定义不需要声明变量类型;JavaScript的变量是动态类型,相同变量可用作不同的类型;变量可以用关键字var显式声明,隐式声明的变量为全局变量;使用var可以同时声明多个变量,变量可以赋值(可以是不同数据类型值),也可以不赋值,只声明未赋值的变量,默认值为undefined;
3、函数
函数的定义是使用function关键字实现的,格式如下:
function 函数名(形式参数列表){
函数体语句块;
}
函数与其他JavaScript一样,必须位于<script></script>标记之间;函数可以有返回值吗,也可以没有返回值,返回值是通过return关键字加表达式实现的;函数的调用:作为函数直接调用;作为对象的方法调用;作为构造函数; 通过call和apply方法间接调用;
JavaScript 能够在事件发生时执行,因此,HTML DOM 事件可以调用函数,比如onmouseover事件;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="bgcolor" onmouseover="myfunction()" style="background-color: red;color:#FFFFFF;">鼠标指上面改变背景色</p>
<script>
function myfunction(){
var element=document.getElementById("bgcolor");
if(element.style.backgroundColor.match("red")){
element.style.backgroundColor = "blue";
element.style.color = "#FFFFFF";
element.innerHTML = "鼠标再指上面改变背景色";
}
else{
element.style ="background-color: red;";
element.style.color = "#FFFFFF";
element.innerHTML = "鼠标指上面改变背景色";
}
}
</script>
</body>
</html>
变量的作用域
<script>
var a = "全局变量";
function myfun(){
document.write(a);
var a = "内部变量";
document.write(a);
}
myfun();
document.write(a);
</script>
图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片切换</title>
</head>
<style>
#image{
display: block;
width: 500px;
height: 180px;
margin: 10px auto;
}
#next{
margin-left: 350px;
}
</style>
<body>
<img src="./images/1.gif" id="image" />
<button id="next">next</button>
<button id="prev">prev</button>
<script>
var image = document.getElementById('image');
var next = document.getElementById("next");
var prev = document.getElementById('prev');
var nowIndex = 1;
var count = 6;
next.onclick = function(){
nowIndex = nowIndex+1>count?1:nowIndex+1;
image.src = "img/"+nowIndex+".jpg";
}
prev.onclick = function(){
nowIndex = nowIndex<=1?count:nowIndex-1;
image.src = "img/"+nowIndex+".jpg";
}
</script>
</body>
</html>
4、控制语句
控制语句,if,if else,switch,while,for,try catch
try catch
<script>
var txt="";
function message()
{
try {
adddlert("Welcome guest!"); //函数名错误
}
catch(exception)
{
txt="本页有一个错误。" + "<br/>";
txt+="错误描述:" + exception.message + "<br/>";
document.write(txt);
}
}
message();
</script>
猜数字
<script>
var num = Math.floor(Math.random() * 100 + 1); //产生1~100之间的随机整数
do {
var guess = parseInt(prompt("下面进行猜数游戏\n请输入1-100之间的整数:", ""));
if (guess == num) {
alert("^_^ ,恭喜你,猜对了,幸运数字是:" + num);
break;
} else {
if (guess > num) {
alert("^_^ ,你猜的数字大了");
go_on = confirm("是否继续游戏?");
} else {
alert("^_^ ,你猜的数字小了");
go_on = confirm("是否继续游戏?");
}
}
} while (go_on);
alert("谢谢参与游戏!");
</script>
九九乘法口诀表
<table border="0" cellpadding="6" style="border-collapse:collapse;background-color:#FFFFFF;">
<script>
for (var i = 1; i < 10; i++) {
document.write("<tr>");
for (j = 1; j < 10; j++)
if (j <= i)
document.write("<td style='border:2px solid #004B8A;color: #; background:#ff5500;'>" +
i + "*" + j + "=" + (i * j) + "</td>");
document.write("</tr>");
}
</script>
</table>
5、JavaScript 对象
JavaScript 对象
Array,Boolean,Date,Math,Number,String,RegExp,Functions(Global,顶层函数及其属性),Events(事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行);
Array对象,(数组,索引数组,关联数组,数组API函数)
Array对象prototype属性,使您有能力向对象添加属性和方法,很有意思,添加属性语法:object.prototype.name=value;
<script type="text/javascript">
function employee(name,job,born)// 构造函数
{
this.name=name;
this.job=job;
this.born=born;
}
// 创建bill对象
var bill = new employee("Bill Gates","Engineer",1985);
employee.prototype.salary=null; // 添加了salary属性
bill.salary=20000; // 属性赋值
document.write(bill.salary);
</script>
employee.prototype.show = function() {console.log("prototype添加show方法");}
Date对象,Date对象用1表示一个月中的第一天,但用0表示一年中的第一个月;JavaScript定时器方法之一,Date对象的:setTimeout()方法 (另外一个方法Window对象的:setInterval() 方法);
RegExp对象,正则表达式test方法,语法:RegExpObject.test(string)
<script type="text/javascript">
var str = "Visit phpStudy";
var patt1 = new RegExp("phpStudy");
var result = patt1.test(str);
document.write("Result: " + result);
</script>
三、DOM,HTML接口
什么是DOM,document object model,是W3C标准,文档对象模型,它允许程序和脚本动态地访问和更新文档的内容、结构和样式,对网页进行增删改查的操作。
HTML DOM 定义了访问和操作HTML文档的标准方法
HTML DOM 对象
Document,Anchor,Area,Base,Body,Button,Canvas,Event,Form,Frame,Frameset,IFrame,Image,Input Button,Input Checkbox,Input File,Input Hidden,Input Password,Input Radio,Input Reset,Input Submit,Input Text,Link,Meta,Object,Option,Select,Style,Table,TableCell,TableRow,Textarea;
四、BOM,专门操作浏览器窗口的API;
Browser 对象
Window,Navigator,Screen,History,Location;
Window的prompt()方法,返回值类型string;parent是window对象的属性,返回父窗口;
五、浏览器内核的作用 :
1、内容排版引擎解析,html和css;2、脚本解释引擎解析,js;
六、查找元素对象,方法
1、按id属性,精确查找一个元素对象
var elem = document.getElementById("id");
//只能用在document上,查找一个元素,不是所有的元素都有id
2、按标签查找
var elems = parent.getElementsByTagName("tag");
//查找指定parent结点下的所有标签为tag的子代结点
可用在任意父元素上,查所有子代结点,返回也给动态集合,只找到一个元素,用[0]取出
3、通过name属性查找
var elem = document.getElementsByName('name属性值');
//可以返回DOM树中具有指定name属性值的所有子元素集合
4、通过class查找
var elems = parent.getElementsByClassName("class");
//有兼容性问题ie9
var div = document.getElementById('news');
var list = div.getElementsByClassName('mainTitle');
5、通过CSS选择器查找
var elem = parent.querySelector("selector");
//只找一个元素,selector支持一切css中选择器,如果选择器匹配多个,只返回第一个
var elems = parent.querySelectorAll("selector");
//找多个,selector API返回的是非动态集合