JavaWeb学习笔记03-js的String对象

1、js的String对象

** 创建String对象
*** var str = “abc”;

** 方法和属性（W3C里面可查）
** 属性 length：字符串的长度（仅此一个）

** 方法
（1）与html相关的方法
- bold(): 加粗
- fontcolor(): 设置字符串的颜色
- fonntsize(): 设置字体的大小
- link(): 将字符串显示成超链接
- sub()和sup(): 设置下标和上标
（2）与java相似的方法
- concat(): 连接字符串
string1.cancat(string2);
- charAt(): 返回指定位置的字符串
string.charAt(2);字符串是从0开始计数的
如果字符串位置不存在，返回的是空字符串
- indexOf(): 返回字符串的位置
vat str = "tough";
document.write(str.indexOf("o");//返回1
字符不存在则返回-1
- split(): 切分字符串切分成数组
var str = "a-b-c-d";
var arr = str.split("-");//切分成数组
document.write("length:"+arr.length);//输出4
- replace(): 替换字符串
* 传递两个参数：
- 第一个参数是原始字符
- 第二个是要替换成的字符
var str = "tough";
document.write(str.replace("o","q"));
- substr()和substring()
var str="zhoufaming";
document.write(str.substr(5,5)); //输出aming
*** 从第几位开始，向后截取几位
document.write(str.substring(3,5)); //输出uf
*** 从第几位开始，到第几位结束，但是不包含最后一位，上述例子不包含第五位。

2、js的Array对象
** 创建数组（三种）
- var arr1 = [1,2,3];
- var arr2 = new Array(3); //长度为3
- var arr3 = new Array(1,2,3); //数组中的元素是1 2 3 
* var arr = []; //创建一个空数组

** 属性：length: 查看数组的长度
** 方法
- concat: 数组的连接
可以把数组1和数组2连接到一起
arr1.cancat(arr2);
- join() 根据指定的字符分割数组
* 如想把数组之间用"-"连接
var arr = new Array(3);
arr[0]="t";
arr[1]="o";
arr[2]="u";
arr.join("-"); //显示结果为 t-o-u
- push() 向数组末尾添加元素，返回数组的新的长度
** 如果添加的是一个数组，这个时候push()会把添加进去的数组当作一个整体字符串添加进去
如 var arr1=[tough,sarah];
  var arr2={ada,hugo};
  arr1.push(arr2); //返回的长度为3
- pop() 表示删除最后一个元素，返回删除的那个元素
var arr=["tough","sarah","hugo","ada"];
arr.pop(); //显示结果为ada
并在arr中将ada这个元素删除
- reverse() 颠倒数组中元素的顺序
var arr=["tough","sarah","hugo","ada"];
arr.reverse(); //显示内容为 ada hugo sarah tough

3、js的Date对象
** 在java里面获取当前时间
Date date = new Date();

** js里面获取当前时间
var date = new Date();
document.write(date); // Fri Apr 17 10:40:46 UTC+0800 2016

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

** 获取当前年的方法
getFullYear() 得到当前的年
document.write(date.getFullYear());
** 获取当前月的方法
getMonth() 返回对象为0-11，所以应+1
** 获取当前的星期的方法
getDay() 返回值为0-6 其中0为星期天
** 获取当前的日
getDate()
** 获取当前的小时
getHours()
** 获取当前的分钟
getMinutes()
** 获取当前的秒
getSeconds()
** 获取毫秒数
getTime()
返回的是自1970年一月一日至今的毫秒数
** 应用场景：
* 使用毫秒数来处理缓存的效果
http://www.baidu.com?毫秒数


4、js的Math对象
* 数学的运算
里面的都是静态方法，使用可以直接使用Math.方法()
** ceil(x)  向上舍入
** floor(x) 向下舍入
** round(x) 四舍五入
** random() 随机数（伪随机数）
- 产生一个0.0-1.0的随机数
* 得到0-9的随机数：Math.floor(Math.random());

5、js的全局函数
* 由于全局函数不属于任何一个对象，所以可以直接写名称使用
** eval() 执行js代码（如果字符串是一个js代码，使用该方法直接执行）
** encodeURI() 对字符进行编码
  decodeURI() 对字符进行解码
** encodeURIComponent() 和 decodeURIComponent()
和encodeURI和decodeURI同样的用法，只是解码和编码范围大小不同
** isNaN() 判断当前字符串是否是数字
是数字返回false 不是数字返回true
** parseInt() 类型转换
把字符串转换为数字类型
** parseFloat()同理

6、js的函数的重载
** 重载：方法名相同，参数不同。
function add(a,b){
return a+b;
}
function add(a,b,c){
return a+b+c;
}
function add(a,b,c,d){
return a+b+c+d;
}
alert(add(1,2)); // 输出NaN
alert(add(1,2,3)); // 输出NaN
alert(add(1,2,3,4)); //输出10
** 函数里面都存在一个数组 arguments 存放传入参数
** js是否存在重载？
** 不存在
** 存在三个相同名字的函数时候，调用最后一个方法
** 把传递的参数保存到 arguments 数组里面
**** js里面是否存在重载（面试题）
1、js里面不存在重载
2、但是可以通过其他方式模拟重载 通过arguments数组来实现
如 function add(){
//若传递的是两个参数
if(arguments.length == 2){
return arguments[0]+arguments[1];
}else if(arguments == 3){
return argument[0]+argument[1]+argument[2];
}
同理...
}

7、js的bom对象
** bom：broswer object model（浏览器对象模型）
** 对象：
*** navigator  获取客户机的信息（浏览器的信息）
navigator.appName 返回浏览器的名称
*** screen  获取屏幕的信息
document.write(screen.width);
document.write(screen.width);//获取屏幕宽和高
*** location  请求url地址
**** 获取到请求的url地址
location.href
**** 设置url地址
- 页面上设置一个按钮，按钮绑定一个事件，当点击按钮的时候，可以跳转到另一个页面。
location.href="目标网页地址"
- 鼠标点击时间 onClick="js的方法"
*** history 请求的url的历史记录
- 到访问的上一个页面
history.back();或者
history.go(-1);
- 到访问的下一个页面
history.forward();或者
history.go(1);

*** window(重点)
* 属性 window.opener
获取创建当前窗口的窗口
如win.html中创建了lin.html
var temp = window.opener;
自此可以在lin.html中通过 getElementById 得到win.html中的属性。
* 窗口对象
* 顶层对象（所有的bom对象都是在window里面操作的）
** 方法
- window.alert() 页面弹出一个框，显示内容
** 简写 alert()
- window.confirm("显示内容");
confirm方法包含返回值，选择"确定"，返回true，选择"取消"，返回false
- window.prompt("text","defaultText")
text 显示的内容
defaultText 输入框里面的默认值
- window.opem("URL","name","featurea","replace") 打开一个新的窗口
URL 打开的新窗口的地址url
name 一般为空
featurea 窗口特征，如窗口的高度和宽度
- window.close()（浏览器兼容差）
（以下为重点方法）
- 做定时器
** winsow.setInterval("js代码","毫秒数")
设置在设置的毫秒数执行一次js函数

** window.setTimeout("js代码","毫秒数")
表示在"毫秒数"之后执行，但是只会执行一次

** window.clearInterval(定时器的id) 清除setInterval设置的定时器
在定义定时器的时候定义一个id
var id1=setInterval("alert(666);",3000)
//通过 setInterval 会有一个返回值
clearInterval(id1); // 通过 clearInterval 可以清除这个返回值
** window.clearTimeout(定时器的id) 清除setTimeout设置的定时器
在定义定时器的时候定义一个id
var id1=setInterval("alert(666);",3000)
clearInterval(id1);

8、js的dom对象
* document object model : 文档对象模型
** 文档
超文本文档（超文本标记文档）
** 对象
提供了属性和方法
** 模型
使用属性和方法操作超文本标记型文档

*** 可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

*** 想要对标记型文档进行操作，首先需要对标记型文档里面的所有内容封装成对象
- 需要把html里面的标签、属性、文本内容都封装成对象

*** 想要对标记型文档进行操作，解析标记型文档
- 画图分析，如何使用dom解析html

*** 解析过程
根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象
- document对象：整个文档
- element对象：标签对象
- 属性对象
- 文本对象

-- Node节点对象：这个对象是这些对象的父对象。
** 如果在对象里面找不到想要的方法，这个时候可以到Node对象里面去找。

DOM模型有三种
DOM level 1：将html文档封装成对象
DOM level 2：在level 1的基础上添加新的功能，如对于事件和css样式的支持
DOM level 3：支持xml1.0的一些新特性。


* DHTML:很多技术的简称
** html：封装数据
** css：使用属性和属性值设置样式
** dom：操作html文档（标记型文档）
** javascript：专门指的是js的语法语句（ECMAScript）

9、document对象
* 表示整个文档

** 常用方法
*** write()方法：
（1）向页面输出变量（值）
（2）向页面输出heml代码
*** getElementById()
- 通过id得到元素（标签）
- //使用getElementById得到input标签
<input type="text" id="nameid" name="name1"/>
var input1 = document.getElementById("nameid");//传递的参数是标签里面的值
*** getElementsByName()
- 通过标签的name的属性值得到标签
- 返回的是一个集合（数组）
*** getElementsByTagName("标签名称")
- 通过标签名称得到元素

**** 注意
只有一个标签，这个标签只能使用name获取到，使用 getElementsByName返回的是一个数组，
但是若只有一个元素，这个时候不需要遍历，而是可以直接通过数组的下标获取到值。
var input2 = document.getElementsByName("name1")[0];
alert(input2.value);