W2-JavaScript基础知识二[JavaWeb]

1. js的String对象

　　1.1 创建js对象 

var str="abc";

 　　1.2 方法

　　（1）与html相关的方法

　　　　-bold():加粗

　　　　-fontcolor():设置字体颜色

　　　　-fontsize():设置字体大小

　　　　-link():设置超链接

　　　　-sub():设置上标

　　　　-sup():设置下标

　　（2）与java相似的方法

　　　　-concat():连接字符串

var str1="abcde";
var str2="aa";
document.write(str1.concat(str2));

　　　　-charAt():返回指定位置的字符串

var str3="adfg";
document.write(str3.charAt(2));//字符位置不存在，返回空字符串

　　　　-indexOf()：返回字符串位置

var str4="adfeffdergg";
document.write(str4.indexOf("f"));//字符不存在，返回-1

　　　　-split():切分字符串成数组

var str5="ad/fe/f/f/de/rgg/";
var str1=str5.split("/")
document.write(str1.length);

　　　　-replace():替换字符串

var str6="addsff";
document.write(str6.replace("a","q"));

　　　　-substr()和subString()

var str7="adfdsfsdfddsff";
document.write(str7.substr(5,3));//第五位开始，向后截取3位
document.write(str7.substring(5,7));//从第五位开始到第七位结束，不包含7  [5,7)

2. js的Array对象

　　2.1 创建数组（三种）

　　见基础知识一

var arr=[];//创建一个空数组

　　2.2 属性

　　-length:查看数组长度

　　2.3 方法

　　（1）concat()方法：数组的连接

var arr11=[1,2,3];
var arr12=[4,5,6];
document.write(arr11.concat(arr12));

　　（2）join()方法：根据指定的字符分割数组

 var arr13=new Array(3);
  arr13[0]="a";
  arr13[1]="b";
  arr13[2]="c";
  document.write(arr13.join("-"));

　　（3）push()方法:向数组的末尾添加元素，返回数组新长度

var arr14=new Array(3);
arr14[0]="tom";
arr14[1]="lucy";
arr14[2]="jack";
document.write(arr14.push("tt"));
document.write(arr14);

 　　-如果添加的是一个数组，会将其当成一个整体进行添加

var arr15=["aaa","bbb","ccc"];
var arr16=["www","qqq","ttt"];
document.write(arr15.push(arr16));//aaa,bbb,ccc,www,qqq,ttt 
document.write(arr15);//4

　　（4）pop()方法：删除并返回最后一个元素

var arr17=["zhangsan","lisi","wangwu","zhaoliu"];
document.write(arr17.pop());

　　（5）reverse()方法：颠倒数组元素的顺序

var arr18=["aaa","bbb","ccc"];
document.write(arr18.reverse());

3. js的Date对象

　　3.1 java获取当前时间

Date date=new Date();
//格式化
//toLocaleString()

　　3.2 js中获取当前时间

var date=new Date();
document.write(date);

 //转换成习惯的格式
document.write("</br>");
document.write(date.toLocaleString());

　　3.3 获取当前年的方法getFullYear()

document.write(date.getFullYear());

　　3.4 获取当前的月getMonth()

document.write(date.getMonth()+1);

　　　　-返回的是0-11月，需要加1才能得到准确的值

　　3.5 获取当前的星期 getDay()

document.write(date.getDay());

　　　　-返回的是0-6，周天返回的是0，其他返回正常

　　3.6 得到当前的天 getDate()

document.write(date.getDate());//返回当月的第几天

　　3.7 得到当前的时分秒

//得到当前的小时
document.write(date.getHours());
//得到当前的分钟
document.write(date.getMinutes());
//得到当前的秒
document.write(date.getSeconds());

　　3.8 获取毫秒数getTime()

document.write(date.getTime());

　　-返回的是1970年1月1日以来的毫秒数

　　-应用场景：处理缓存的效果（不有缓存）

4. js的Math对象

　　4.1 都是静态方法，调用方法Math.方法()

　　4.2 方法

　　（1）取舍

document.write(Math.ceil(mm));//向上舍入,小数点后删掉加1
document.write(Math.floor(mm));//向下舍入，直接去除
document.write(Math.round(mm));//四舍五入

　　（2）随机数random()：伪随机数

document.write(Math.random());/

document.write(Math.floor(Math.random()*10));//得到0-9的随机数

5. js的全局函数

　　5.1 不属于任何一个对象，直接写名字使用

　　5.2 方法

　　（1）eval()：执行js代码

var str="alert('1234');";
eval(str);

　　（2）encodeURI()：字符进行编码

　　　　decodeURI() ：对字符进行解码

var str1="测试中文aaa 123";
var encode1=encodeURI(str1);
document.write(encode1);//%E6%B5%8B%E8%AF%95%E4%B8%AD%E6%96%87aaa%20123
var decode1=decodeURI(encode1);
document.write(decode1);//测试中文aaa 123 

　　　　encodeURIComponent()和decodeURIComponent()

　　（3）isNaN()：判断当前字符串是否是数字，返回true和false

var str2="123";
document.write(isNaN(str2));//false

　　　　-是数字返回false，不是数字返回true

　　（4)parseInt()：类型转换

var str3="123";
document.write(parseInt(str3)+1);//124

6. js的函数重载

　　6.1 重载的定义：方法名相同，参数列表不同

　　6.2 js中是否存在重载？

　　　　（1）js里面不存在重载

　　　　（2）但是可以通过其他方法模拟重载的效果(通过arguments数组来实现）

　　　　将传递的参数保存到arguments里面

 function add1(){
    //传递两个参数
    if(arguments.length==2){
     return arguments[0]+arguments[1];
    }else if(arguments.length==3){
    return arguments[0]+arguments[1]+arguments[2];
    }else if(arguments.length==4){
    return arguments[0]+arguments[1]+arguments[2]+arguments[3];
    }else{
    return 0;
    }
   }
   //调用
    alert(add1(2,1));
    alert(add1(2,1,2)); 
    alert(add1(2,1,2,2));
    alert(add1(2,1,2,2,2));

7. js的bom对象

　　7.1 bom-broswer object model 浏览器对象模型

　　7.2 对象

　　（1）navigator：获取客户机的信息（浏览器的信息）

document.write(navigator.appName);

　　（2）screen：获取屏幕信息

document.write(screen.width);
document.write(screen.height);

　　（3）location: 请求的URL地址

　　　　-href属性

　　　　--获取URL地址

document.write(location.href);

　　　　--设置URL地址

<input type="button" value="jump" onclick="href1();"/>//提供鼠标点击事件
  
    function href1(){
         location.href="js的重载.html";//设置url地址
    }

　　（4）history：请求的URL的历史记录

　　　-到访问的上一个页面

history.back();
history.go(-1);

　　-到访问的下一个页面

history.forward();
history.go(1);

 　　（5）window

　　-窗口对象

　　-顶层对象（所有的bom对象都在window里面操作

　　-方法

//页面弹出一个框，显示内容
window.alert();
//确认框
window.confirm("显示的内容")；
//输入的对话框
window.prompt("显示的内容"，"默认的内容“);
//表示打开一个新的窗口
window.open("打开的新窗口地址url,"","窗口特征，长度宽度",");
//关闭窗口，浏览器兼容性比较差
window.cloe();
//定时器,每毫秒数执行js代码
setInterval("js代码",毫秒数");
//表示在毫秒数之后执行，只执行一次
setTimeout("js代码",毫秒数");
//清除setInterval定时器
clearInterval("setInterval的返回id值");
//清除setTimeout定时器
clearTimeout("setTimeout的返回id值");

8. js的dom对象

　　8.1 dom：document object model:文档对象模型

　　8.2 文档对象模型

　　（1）文档：超文本文档（超文本标记文档） html、xml

　　（2）对象：提供了属性和方法

　　（3）模型：使用属性和方法操作超文本标记型文档

　　（4） 使用js里的dom中提供的对象，利用其属性和方法，对标记型文档进行操作

　　　　-对标记性文档里的所有内容封装成对象（j将HTML中的标签、属性、文本内容封装成对象

　　　　-解析标记型文档（树形结构，只有一个根节点）

　　　　　　--document对象:整个HTML文档

　　　　　　--element对象：标签对象

　　　　　　--属性对象

　　　　　　--文本对象

　　　　　　　　---Node节点对象：是以上对象的父对象，若在对象里面找不到想要的方法，就要到node对象中找

　　（5）DOM模型的发展历史

　　　　DOM level1：将html文档封装成对象

　　　　DOM level2：将level1的基础上添加新功能，例如对于事件和css样式的支持

　　　　DOM level3：支持xml1.0的新特性

　　（6）DHTML:很多技术的简称

　　　　-html：封装数据

　　　　-css：使用属性和属性值设置样式

　　　　-dom：操作html文档（标记型文档）

　　　　-javaScript：专门指的是js的语法语句（ECMAScript）

9. document对象-表示整个文档

　　9.1常用方法

　　（1）write()方法-向页面输出变量、html代码

　　（2）getElementById()方法

<input type="text" id="nameid"  value="aaaa"/>
var input1=document.getElementById("nameid");//得到input标签
alert(input1.value);//得到input1里的value值

　　（3）getElementsByName()方法-带有指定名称的对象集合-通过标签name的属性值得到标签，返回值是一个集合

<input type="text" name="name1 value="aaaa"/></br>
<input type="text" name="name1 value="bbbb"/></br>
<input type="text" name="name1 value="cccc"/></br>
<input type="text" name="name1 value="dddd"/></br>
var input1=document.getElementsByName("name1");//4
//遍历数组
for(var i=0;i<input1.length;i++){
  var input11=input1[i];//每次循环得到input1对象，赋值到input11里面
  alert(input11.value);//得到每个input11标签里面的value值
}

 　　（4）getElementsByTagName()方法-通过标签名称获得集合

var inputs1=document.getElementsByTagName("input");
//alert(inputs1.length);
//遍历数组，得到每个input标签
for(var m=0;m<inputs1.length;m++){
//得到每个input标签
    var input1=inputs1[m];
    //得到value
    alert(input1.value);
}

　　（5）注意：只有一个标签时，这个标签通过getElementsByName()获取，不需要遍历，直接通过数组下标获取到值

10.案例：window弹窗案例

　　10.1 实现过程

　　（1）创建页面：两个输入项和一个按钮，按钮上有一个事件（弹出一个新窗口 open）

　　（2）创建弹出页面：表格，表格中每一行有编号，姓名，按钮（事件：将当前编号和姓名赋值到第一个页面的相应位置）

　　10.2 实现-opener属性

function s1(num1,name1){
     //跨页面操作 opener:得到创建这个窗口的窗口 得到window页面
     var pwin=window.opener;
     pwin.document.getElementsById("numid").value=num1;
     pwin.document.getElementsById("nameid").value=name1;
     //关闭窗口
     window.close();
}

　　10.3 注意点

　　（1）访问本地文件时，由于js安全性，浏览器安全级别高，不允许访问

　　（2）实际开发中不访问本地文件，所以不存在这样的问题