Array对象：
数组的创建：创建方式1.1：相当于动态初始化；
var arr = new Array(3) ;
创建方式1.2：
var arr = new Array() ; //表示0个长度，之后给数组赋值；
创建方法1.3：直接指定数组中具体元素；
var arr = new Array("hello",100,true,'a') ;
创建方式2.1：直接指定数组的元素,不需要new Array() ;
var arr = [10,"hello","world",true] ;
常用方法：
join()：将数组中的所有元素以一个符号进行拼接，返回一个新的字符串；
reverse()：将数组中的元素进行反转；
注意：
1> 在js中，数组可以存储任意类型的元素；
2> 在js中，不存在数组角标越界一说，数组中的元素数量是可以不断的增加.，不会出现异常；
举例：
<script type="text/javascript">
var arr = ["java","php","python","hadoop"] ;
//将数组以"-"符号进行拼接
arr = arr.join("-") ;
document.write("arr:"+arr);
document.write("<hr/>") ;
document.write("反转前:") ;
for(var i = 0 ; i<arr.length ; i++){
document.write(arr[i]+" ") ;
}
document.write("<hr/>") ;
//反转
arr = arr.reverse() ;
document.write("反转后:") ;
for(var i = 0 ; i<arr.length ; i++){
document.write(arr[i]+" ") ;
}
</script>javascript中自定义对象：
方式1：有参构造的形式；//有参构造
function Person(name,age){ //this:代表当前对象
//定义属性
this.name = name ;
this.age = age ;
//定义方法
this.speak = function (){
alert("这是说话的功能...")
}
}
//创建对象
var p = new Person("张三",28);
//要么使用for-in语句将对象的属性遍历出来,或者直接输出
document.write(p.name+"<br/>") ;
document.write(p.age+"<br/>") ;
//调用方法
p.play();
//无参构造
function Person(){
}
//创建对象
var p = new Person() ;
//追加属性
p.name = "李四" ;
p.age = 38 ;
//追加方法
p.speak = function(){
alert("这是李四说话的功能...")
}
//要么使用for-in语句将对象的属性遍历出来,或者直接输出
document.write(p.name+"<br/>") ;
document.write(p.age+"<br/>") ;
//调用方法
p.play();//定义对象
function Person(){
}
//创建对象
var p = new Object() ;
//追加属性
p.name = "厄齐尔" ;
p.age = 29 ;
//追加方法
p.play = function (){
alert("全场隐形...") ;
}
//要么使用for-in语句将对象的属性遍历出来,或者直接输出
document.write(p.name+"<br/>") ;
document.write(p.age+"<br/>") ;
//调用方法
p.play();var p = {
//就是json格式的写法
//追加属性
"name":"王五",
"age":28,
"play":function(){
alert("王五会踢球...")
}
};
//要么使用for-in语句将对象的属性遍历出来,或者直接输出
document.write(p.name+"<br/>") ;
document.write(p.age+"<br/>") ;
//调用方法
p.play();原型(prototype)：
作用：就是给js中的内置对象追加方法使用的；1> 每一个js内置对象都有一个原型属性(prototype)；
2> 如果往原型对象中追加一个方法,那么这个方法会自动追加到内置对象中；
3> 原型属性是可以直接被内置对象调用然后追加方法；
举例：
<script type="text/javascript">
//使用内置对象的原型改进
//给Array对象追加search
Array.prototype.search = function(target){
//遍历Array对象中的数组
for(var i = 0 ; i< this.length ; i++){
//判断
if(this[i] == target){
return i ;
}
}
//找不到,返回-1
return -1 ;
}
//内置对象的原型属性追加max()
Array.prototype.max = function(){
//定义参照物
var max = this[0] ;
//遍历其他元素
for(var i = 1 ; i < this.length; i++){
//判断
if(this[i] > max){
max = this[i] ;
}
}
return max ;
}
////创建一个数组,静态初始化
var arr = [43,65,13,87,3,19] ; //var arr = new Array(43,65,13//) ;
var index = arr.search(3) ;
document.write("你要查找的元素的位置是:"+index+"<br/>") ;
var max = arr.max() ;
document.write("该数组中的最大值是:"+max) ;
</script>window对象：
作用：它表示浏览器的一个窗口；
和弹框相关的方法：
window.alert("提示框")：//window可以省略；
window.confirm("消息对话框")：有确认框，取消框；
prompt：提示对话框，其中带有一条消息和一个输入框；
setInterval("任务",时间毫秒值)：每经过多少毫秒后重复执行这个任务；
clearInterval()：取消和setInterval相关的任务；
window.clearInterval(iIntervalID)：这个要插入一个Id；
setTimeout("任务",时间毫秒值)：经过多少毫秒后只执行一次；
clearTimeout()：取消和setTimeout相关的超时事件；
举例：
<body>
<input type="button" value="open()" onclick="testOpen()" />
<input type="button" value="setInterval()" onclick="testSetInterval()" />
<input type="button" value="clearInterval()" onclick="testClearInterval()" />
<input type="button" value="setTimeout()" onclick="testSetTimeout()" />
<input type="button" value="clearTimeout()" onclick="testClearTimeout()" />
<input type="button" value="alert()" onclick="testAlert()" />
<input type="button" value="confirm()" onclick="testConfirm()" />
<input type="button" value="prompt()" onclick="testPrompt()" />
</body>
<script type="text/javascript">
//触发open单击事件
function testOpen(){
//调用open 方法
window.open("06.广告页面.html","_blank") ;
}
//和定时器相关的函数
//定义一个任务id
var taskId ;
function testSetInterval(){
//每经过2秒重复执行testOpen
taskId = window.setInterval("testOpen()",2000) ;
}
//清除和setInterval相关的定时器
function testClearInterval(){
//调用功能
window.clearInterval(taskId) ;
}
//定位任务id
var timeoutId ;
//setTimeOut定时器
function testSetTimeout(){
//经过3秒后执行testOpen函数
timeoutId = window.setTimeout("testOpen()",3000) ;
}
function testClearTimeout(){
window.clearTimeout(timeoutId)
}
//alert的方法
function testAlert(){
//window.alert("今天天气不错....");
alert("今天天气不错....");
}
function testConfirm(){
//调用
var flag = window.confirm("确认删除吗?一旦删除,数据不可恢复!!") ;
if(flag){
alert("数据已删除")
}else{
alert("您取消了删除") ;
}
}
//和确认提示框,有一条消息
function testPrompt(){
var flag = window.prompt("请您输入u顿密码!") ;
if(flag){
alert("输入正确");
}else{
alert("请重新输入");
}
}
</script>loaction对象：
作用：包含关于当前URL的信息；主要学习一个属性一个方法：
href属性：可以修改页面的href属性来实现页面跳转；
reload()：定时刷新；
举例：
<body>
<a href="06.广告页面.html">超链接</a>
<input type="button" value="跳转" onclick="testHref()"/>
<input type="button" value="定时刷新" onclick="testRefresh()" />
</body>
<script type="text/javascript">
//loaction:地址栏对象
function testHref(){
//alert(window.location.href) ;
//修改location的href属性
window.location.href="06.广告页面.html" ; //location的 href属性
}
function testRelod(){
//调用reload定时刷新
window.location.reload() ;
}
//定时器
//注意:如果setTimeout()方法和reload()一起使用,
//并且setTimeout()不借助任何函数,那么就会相当于setInterval()
window.setTimeout("testRelod()" ,1000) ;
</script>history对象：
作用：包含了用户已浏览的URL的信息；方法：
forward()：装入历史列表中下一个url；
back()：装入历史列表中前一个url；
go(正整数或者负整数)：从历史列表中转入url；
举例：
<body>
<a href="09.history对象.html">超链接</a><br />
<input type="button" value="前进" onclick="testForward()" />
</body>
<script type="text/javascript">
function testForward(){
//调用功能
//window.history.forward() ;
window.history.go(1) ;
}
</script>
screen对象（屏幕对象）：
作用：包含关于客户屏幕和渲染能力的信息；
常用属性：
availHeight：获取系统屏幕的工作区域高度，排除 Microsoft® Windows® 任务栏；
availWidth：同上；
举例：
<script type="text/javascript">
document.write(screen.availHeight+"<br/>") ; //不包括任务栏
document.write(screen.height+"<br/>") ; //包含有任务栏
document.write(screen.availWidth+"<br/>") ; //宽度没有任务栏
document.write(screen.width+"<br/>") ;
</script>事件编程的分类：
1> 和点击相关的事件：单击点击事件：onclick
双击点击事件：ondbclick
2> 和焦点相关的事件：
获取焦点事件：onfocus
失去焦点事件：onblur
举例：点击和焦点相关的事件；
<body>
<input type="button" value="点我试试" onclick="testClick()" /><br />
<input type="button" value="再点" ondblclick="testDbClick()" /><br />
<input type="text" id="username" value="请输入6到12位的数字或者字母" size="25" onfocus="testFocus()" onblur="testBlur()" /><span id="nameTip"></span>
</body>
<script type="text/javascript">
//和单击点击相关的函数
function testClick(){
alert("点了...") ;
}
//双击
function testDbClick(){
alert("你得双击...") ;
}
//获取焦点(在js中,一般情况如果要获取标签对象,最好的使用方式就是给它给一个id,id是唯一的)
function testFocus(){
//通过id属性
var usrename = document.getElementById("username") ; //获取标签对象
username.value ="" ;
}
//失去焦点(鼠标光标从文本输入框中移出来)
function testBlur(){
//获取用户在文本输入框中的内容
var username = document.getElementById("username").value ;
//获取span标签对象
var nameTip = document.getElementById("nameTip") ;
//如果输入的值不是"eric",就是提示用户名不符合规则
if(username =="eric"){
//给nameTip设置innerHTML属性
nameTip.innerHTML = "校验成功,符合规则".fontcolor("#00ff00") ;
}else {
nameTip.innerHTML ="用户名不符合规则".fontcolor("#ff0000");
}
}
</script>
4> 和鼠标相关的事件：
鼠标经过的事件：onmouseover
鼠标移出的事件：onmouseout
5> 和页面加载相关的事件：onload
注意：一般用在body，当body中的内容加载完毕之后就会触发这个事件；
举例：
<html>
<head>
<meta charset="UTF-8">
<title>事件分类</title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
border: 1px solid #00F;
}
</style>
<script type="text/javascript">
//触发onchange事件相关的函数
function testChange() {
//alert("选项卡已经发生变化了") ;
//通过id属性值获取当前id="jiguan"所在内容
var jiguan = document.getElementById("jiguan").value;
//alert(jiguan) ;
//获取id="city"所在的select标签对象
var city = document.getElementById("city");
//每次选择之前,要情况city的innerHTML属性
city.innerHTML = "";
//判断
if(jiguan == "广东") {
//给每一个省会添加三个城市
//广州 珠海 深圳
//创建数组
var arr = ["广州", "珠海", "深圳"];
//遍历数组
for(var i = 0; i < arr.length; i++) {
//arr[i]都有了
city.innerHTML += "<option value='" + arr[i] + "'>" + arr[i] + "</option>";
}
}
//判断
if(jiguan == "陕西") {
//给每一个省会添加三个城市
//广州 珠海 深圳
//创建数组
var arr = ["西安", "咸阳", "宝鸡"];
//遍历数组
for(var i = 0; i < arr.length; i++) {
//arr[i]都有了
city.innerHTML += "<option value='" + arr[i] + "'>" + arr[i] + "</option>";
}
}
//判断
if(jiguan == "山西") {
//给每一个省会添加三个城市
//广州 珠海 深圳
//创建数组
var arr = ["太原", "运城", "大同"];
//遍历数组
for(var i = 0; i < arr.length; i++) {
//arr[i]都有了
city.innerHTML += "<option value='" + arr[i] + "'>" + arr[i] + "</option>";
}
}
}
//鼠标经过的事件
function testMouseOver() {
alert("鼠标经过了...");
}
//鼠标移出的事件
function testMouseOut() {
alert("鼠标移出了...");
}
//和页面加载相关的事件
function testLoad() {
alert("页面中的body部分已经加载完毕了...");
}
</script>
</head>
<body onload="testLoad()">
请选择籍贯:
<select onchange="testChange()" id="jiguan">
<option value="请选择">请选择</option>
<option value="广东">广东</option>
<option value="陕西">陕西</option>
<option value="山西">山西</option>
</select>
城市:
<select id="city">
<!--通过 id="city"的select标签对象的innerHTML属性拼接"<option value=''>值</option>"-->
</select>
<hr/>
<div id="div1" onmouseover="testMouseOver()" onmouseout="testMouseOut()"></div>
</body>
</html>