JavaScript AND BOM

一、简介

JavaScript用于网页和用户之间的交互

完整的javascript由语言基础，BOM和DOM组成

二、设计使用：

通过javascript向文档中输出文本：

document是javascript的内置对象，代表浏览器的文档部分
document.write("Hello Javascript"); 向文档写入字符串

javascript和DOM结合显示和隐藏文本：

隐藏文本
 
显示文本
 
 这个是一段可以被javascript隐藏的文本

οnclick="..." 表示点击button之后做的事情
document.getElementById 根据id获取指定的元素
.style.display='none' 隐藏
.style.display='block' 显示(准确的讲，以block的形式显示)

onclick，getElementById，style.display 这些内容，是HTML DOM 应该到才会用到的知识和概念

 基本数据类型：也叫简单数据类型五种

undefined（声明了未赋值），Boolean,Number（数字）,String，null（空对象/对象不存在）

javascript中的Number可以表示十进制，八进制，十六进制整数，浮点数，科学记数法

地名: 公司类型:
公司名称: 老板姓名:
money: 产品:
价格计量单位:

生成
浙江最大互联网公司阿里九九倒闭了，王八蛋老板牛风吃喝嫖赌，欠下了一万个亿，带着他的小姨子跑了!我们没有办法，拿着贴膜抵工资!原价都是一百多、两百多、三百多的贴膜，现在全部只卖二十块，统统只要二十块!牛风王八蛋，你不是人!我们辛辛苦苦给你干了大半年，你不发工资，你还我血汗钱，还我血汗钱!

参数作用域：一个参数的作用域就在这个函数内部，超出函数就看不见该参数了

全局变量的作用域：全局变量会随着相应使用到它的函数执行而改变

事件：是javascript允许html与用户交互的行为。 用户任何对网页的操作，都会产生一个事件

如鼠标移动，鼠标点击οnclick=""，键盘点击等等。

算数运算符：+ 具备多态特征 
当两边都是数字的时候 ，表现为算数运算符 
当任意一边是字符串的时候，表现为字符串连接符

绝对等与绝对不等于：

与==进行值是否相等的判断不同 ，绝对等 ===还会进行 类型的判断
比如 数字1和 字符串'1'比较，值是相等的，但是类型不同
所以==会返回true,但是===会返回false
绝对不等于!== 与上是一个道理

三目运算符：三目运算符 ?: 有三个操作数             var  x  =  a>0?b:c ;
如果第一个返回true,就返回第二个操作符
否则就返回第三个操作符。

条件语句：

条件成立时执行（if条件一定是一个Boolean类型的值，当为true时，执行对应的语句）     if else if else

多条件判断 - switch：每个判断结束，都要加上break;

循环语句：for       while   do-while     for-each

continue 表示放弃本次循环，进行下一次循环          break表示终止循环，循环体结束

（使用标记结束相应循环）

a:for(int i=1;i<3;i++){}         break a; 

错误处理：对未定义的方法调用进行try catch的处理。 捕捉到了该方法未定义的错误。并打印出来。
后续的代码，也就可以继续执行了。

数据计算生成：

  
起始资金
  
 ￥

  
每年收益
  
 %


  
复利年数
  
 年


  
每年追加资金
  
 ￥


   



  
本金和
  
 ￥


  
利息和
  
 ￥


  
本息和
  
 ￥

对象：JavaScript中的对象是有着属性和方法的一种特殊数据类型。

           常见的对象有数字Number，字符串String，日期Date，数组Array等。

这里的Number是对象Number,和基本数据类型中的基本类型Number是不一样的Number。

创建一个数字对象：可以通过new Number()创建一个数字对象

与基本类型的数字不同，对象类型的数字，拥有更多的属性和方法

数字对象x的值:123
数字对象x的类型:object
基本类型y的值:123
基本类型y的类型:number

最大值与最小值：Number对象能够取到的最大和最小边界 Number.MIN_VALUE    Number.MAX_VALUE

不是数字：NaN(Not a Number),表示不是一个数字
当通过非数字创建Number的时候，就会得到NaN.
注意： 不能通过 是否等于Number.NaN来判断 是否 “不是一个数字”，应该使用函数 isNaN()

返回一个数字的小数表达：toFixed返回一个数字的小数表达

数字对象123通过toFixed(2) 保留两位小数:123.00
PI 通过toFixed(3) 保留三位小数:3.142

返回一个数字的科学计数法表达：

数字对象123通过toExponential 返回计数法表达 1.23e+2
数字对象3.1415926通过toExponential 返回计数法表达 3.1415926e+0

返回一个数字对象的基本数据类型：方法 valueOf() 返回一个基本类型的数字 
通过typeof 判断数据类型可以发现，一种是object,一种是number

数字对象a的类型是: object
通过valueOf()返回的值的类型是number

一个乘法示例：

 



    *
    =
    
    

字符串：

创建字符串对象：与Number类似的，可以通过new String()创建一个String对象

属性 length 返回字符串的长度

charAt 返回指定位置的字符
charCodeAt 返回指定位置的字符对应的Unicode码

concat用于进行字符串拼接

indexOf 返回子字符串第一次出现的位置 
lastIndexOf 返回子字符串最后一次出现的位置

localeCompare 比较两段字符串是否相同，0即表示相同，非0表示不同

截取字符串：substring（）

字符串x的值: Hello JavaScript
x.substring (0,3) 获取位0到3的字符串： Hel
左闭右开，取得到0，取不到3

字符串转换为数组：split 根据分隔符，把字符串转换为数组。 
注： 第二个参数可选，表示返回数组得长度

字符串x的值: Hello This Is JavaScript
通过空格分隔split(" "),得到数组Hello,This,Is,JavaScript
通过空格分隔split(" ",2),得到数组，并且只保留前两个Hello,This

字符串替换：replace(search,replacement)
找到满足条件的子字符串search，替换为replacement

默认情况下只替换找到的第一个子字符串，如果要所有都替换，需要写成：

x.replace(/a/g, "o");

或者

var regS = new RegExp("a","g");

x.replace(regS, "o");

 所有返回字符串类型的方法，返回的都是基本类型的String

字符串替换工具：

    
字符串替换工具

    

        
源字符串:
        

    
     
    

        
查询字符:
        

    
     
    

        
替换字符:
        

    
     
    

        
替换后为:
        

    
     
    

        

    

数组：javascript中的数组是动态的，即长度是可以发生变化的。

创建数组对象的3种方式： 
1. new Array() 创建长度是0的数组 
2. new Array(5); 创建长度是5的数组,，但是其每一个元素都是undefine 
3. new Array(3,1,4,1,5,9,2,6); 根据参数创建数组

属性length 获取一个数组的长度

遍历有两种方式
1.结合for循环，通过下标遍历
2.使用增强for in循环遍历
需要注意的是，在增强for in中，i是下标的意思。 

for(i in x){ //for in 循环

p(x[i]);

}

方法 concat 连接两个数组

方法 join 通过指定分隔符，返回一个数组的字符串表达

数组x是:3,1,4
y = x.join() 得到的是数组x的字符串表达，其值是3,1,4 其类型是 :string
z = x.join("@");是x的字符串表达，不过分隔符不是默认的"," 而是"@" : 3@1@4

方法 push pop,分别在最后的位置插入数据和获取数据(获取后删除) 
就像先入后出的栈一样

数组x是:3,1,4
向x中push 5,得到 3,1,4,5
从x中pop一个值出来，其值是 5
pop之后，x数组的值是:3,1,4 

方法 unshift shift ,分别在最开始的位置插入数据和获取数据(获取后删除)

数组x是:3,1,4
对数组 unshift 值5(在最前面加)，数组变为:5,3,1,4
从数组中 shift 一个数(从最前面取)，其值是:5
shift之后，数组变为:3,1,4 

方法 sort对数组的内容进行排序（从小到大）

自定义排序算法：

sort()默认采用正排序，即小的数排在前面。 如果需要采用自定义排序的算法，就把比较器函数作为参数传递给sort()。
比较器函数:

function comparator(v1,v2){

return v2-v1; //v2-v1表示大的放前面，小的放后面

}

调用sort函数的时候，把这个比较器函数comparator作为参数传递进去即可

x.sort(comparator);

 自定义一个函数，对数组进行排序，要求排序后数组中无重复数据：

方法 reverse，对数组的内容进行反转

方法 slice 获取子数组
注意： 第二个参数取不到

数组x是:3,1,4,1,5,9,2,6
x.slice(1)获取的子数组是:1,4,1,5,9,2,6
x.slice(1,3)获取的子数组是:1,4
第二个参数取不到

方法 splice (不是 slice) 用于删除数组中的元素
奇葩的是 ，它还能用于向数组中插入元素

数组x是:3,1,4,1,5,9,2,6
x.splice (3,2) 表示从位置3开始 ，删除2个元素:3,1,4,9,2,6
x.splice(3,0,1,5) 从位置3开始，删除0个元素，但是插入1和5,最后得到:3,1,4,1,5,9,2,6 

日期：date 

通过new Date创建一个日期对象，这个对象就表示当前日期(现在)

获取年月日：

 

分别获取时:分:秒:毫秒     ：

 

一周的第几天：

 

 

 

计算年龄：

请输入出生年月日

年份



月份



日







计算年龄




今年100 岁

 Math对象：Math是JavaScript的工具对象，用于常见的数学运算

属性E PI，分别表示自然对数和圆周率PI

方法 abs 取绝对值     document.write(Math.abs(-1));

方法 min max 分别取最小值，最大值         document.write(Math.max(1,100));

方法 pow 求一个数的n次方                         document.write(Math.pow(3,3)); //3的立方，即27

方法 round,小数四舍五入取整                     document.write(Math.round(3.5));

方法 random 取0-1之间的随机数                 document.write("十个 5-10 之间的随机数 : Math.round(Math.random() *5)+5 ");

自定义对象：通过new Object()创建一个对象      在JavaScript中可以自定义对象，添加新的属性，添加新的方法

通过function设计一个对象：

通过new Object创建对象有个问题，就是每创建一个对象，都得重新定义属性和函数。这样代码的重用性不好
那么，采用另一种方式，通过function设计一种对象。 然后实例化它 。
这种思路很像Java里的设计一种类，但是 javascript没有类，只有对象，所以我们叫设计一种对象

为已经存在的对象，增加新的方法：需要通过prototype实现这一点

 

三、BOM ：浏览器对象模型(Brower Object Model)

浏览器对象包括： 
Window(窗口) ：

一旦页面加载，就会自动创建window对象，所以无需手动创建window对象。
通过window对象可以获取文档显示区域的高度和宽度     document.write("文档显示区域的高度"+window.innerHeight);

获取外部窗体的宽度和高度：所谓的外部窗体即浏览器，可能用的是360，火狐，IE, Chrome等等

document.write("浏览器的高度:"+window.outerHeight);

打开一个新的窗口：一些网站会自动打开另一个网站，那么是怎么做到的呢? 
就是通过window的open方法做到的 
不建议使用，如果需要打开一个新的网站，应该通过超级链接等方式让用户主动打开，在没有告知用户的前提下就打开一个新的网站会影响用户的体验

打开一个新的窗口

Navigator(浏览器) ：Navigator即浏览器对象，提供浏览器相关的信息

Screen (客户端屏幕) ：Screen对象表示用户的屏幕相关信息

如果是在台式电脑上，通常看到的可用区域的高度会比屏幕高度小一点，因为有任务栏的存在。
History(访问历史) ：History用于记录访问历史

返回上一次

 

返回上上次

Location(浏览器地址) ：Location表示浏览器中的地址栏

reload方法刷新当前页面

当前时间:



刷新当前页面

跳转到另一个页面：

跳转到首页 

Location的其他属性：

 

弹出框：浏览器上常见的弹出框有  警告框，确认框，提示框 这些都是通过调用window的方法实现的。 

警告框 alert，常用于消息提示，比如注册成功等等

确认框 confirm，常用于危险性操作的确认提示。 比如删除一条记录的时候，弹出确认框
confirm返回基本类型的Boolean true或者false

  


删除

 输入框 prompt，用于弹出一个输入框，供用户输入相关信息。 因为弹出的界面并不好看，很有可能和网站的风格不一致，所以很少会在实际工作中用到。

  


请输入用户名

计时器：

只执行一次：函数setTimeout(functionname, 距离开始时间毫秒数 ); 
通过setTimeout在制定的毫秒数时间后，执行一次 函数functionname 
本例在3秒钟后，打印当前时间。 
解释: 
document.getElementById 获取id=time的div元素 
.innerHTML 修改该元素的内容  

点击后3秒钟后显示当前时间，并且只显示一次

不停地重复执行：函数setInterval(函数名, 重复执行的时间间隔毫秒数 );
通过setInterval重复执行同一个函数，重复的时间间隔由第二个参数指定

每隔1秒钟，打印当前时间

   

   

 

 终止重复执行：通过clearInterval终止一个不断重复的任务

每隔1秒钟，打印当前时间

   

   

不要在setInterval调用的函数中使用document.write()：

注：部分浏览器，比如firefox有这个问题，其他浏览器没这个问题。

假设setInterval调用的函数是printTime, 在printTime中调用document.write();
只能看到一次打印时间的效果。
这是因为document.write，会创建一个新的文档，而新的文档里，只有打印出来的时间字符串，并没有setInterval这些javascript调用，所以只会看到执行一次的效果。 

每隔1秒钟，通过document.write打印当前时间