前言

java学习之路—–>Javaspcrit

内容

JavaScrip

html负责一个页面的结构
css 负责一个页面的数据的风格和样式
javascrip负责与用户交互

javascript的历史

微软  盖茨认为未来是"视窗"的世界。  
网景： 1995年退出了一款浏览器（导航者）和liveScript(校验功能)， 非常受欢
迎。
和sun公司合作，借用了java的名字，把liveScirpt改名成javascript。  70%市场
份额。
盖茨知错了,盖茨找网景的老大判断， 不同意  （领航者)。
盖茨一年投资20亿美元去开发JScript.  微软 :捆绑销售+免费。   45美元。
1998年被美国在线的公司收购， 03年的时候网景宣布破产。  
同意赔钱7亿美元   拿出2千万美金成立了一个基金会（Mozilla ）谋智+ 把浏览器的
源代码全部开工。

协议

1997年欧洲的计算机协议（ECMA）组织出来给javascript规定协议。  
1. ECMAScirpt(规范了基本的语法而已)
2. BOM （浏览器对象模型）
3. DOM  (文档对象模型)

javascript的特点：

1. 跨平台
2. 安全性。 （javascript的代码不能直接访问硬盘的内容）

javascript与java之间区别：

1. javascript是属于网景公司产品， java是sun公司的产品。
2. javascript是基于对象的语言，java是面向对象的语言。
3. javascript是解释型语言，java是解释、编译型语言。
4. javascript是弱类型语言， java 是强类型语言。
5. java中声明变量 的时候必须要明确该变量的数据类型。
6. javascript声明变量不需要明确是何种数据类型， 任何的变量都是使用一个关键字
   var去声明即可。

如何编写javascript的代码。

方法1：可以使用<script>标签体进行编写；
       <script type="test/javascript">
         js代码块；
         alert("哈哈");//弹出框
         document.write("数据");//向页面输出数据
       </script>
方法2： 可以引入javascript代码
        <script src="name.js" type="test/javascript">
        </script>
注意： 
        1.<script>是有开始标签与结束标签的，千万不要在一个标签中结束了。
        2.如果<script>已经用于引入了js文件，那么该<script>标签体就不能再写
        js代码了，

网页的注释：

html <!--注释的内容-->
css注释  /*注释的内容*/
javascript: //单行   /*多行*/

变量的声明：

格式：
    var 变量名 = 数据;
    var a = 10;
    document.write("a="+a+"<br/>");
    var b = "狗娃";
    document.write("b="+b+"<br/>");    
    var c = 3.14;
    document.write("c="+c+"<br/>");    

注意:
    1. 变量可以存储任何类型
    2. 类型根据数据类型决定
    3. 没有重复变量说法，只有定义顺序
    4. 使用typeof来检测数据类型    

数据类型：
    number 小数跟整数
    string 字符跟字符串
    boolean 布尔类型
    undefined 未被定义类型

类型转换：
    字符串转数字
    parseInt() 整数
    parseFloat() 浮点数
    IsNaN方法  判断该字符串是不是一个数字

运算符

+(加法、正数、连接符) 
true 是1  
false 是0
/(除法) 两个整数不能整除时候结果为浮点数。

比较运算符
> 大于号
  10>3 true
  "10">"3" false
  "19">"18888" true
  10>"9" true 数字与字符串比较时，会先把字符串转换成数字再进行比较
< 小于号

逻辑运算符
&& 逻辑与 没有单与
|| 逻辑或
！ 非

三目运算符
表达式?执行体1:执行体2

控制流程语句

if语句
if(condition){
   执行体
}

if语句的特殊处
1.类似C语言，与JAVA有些区别
2.String不能空是true 空为false
3.undefined false
4.NaN false

switch用法与其他类似
特殊之处
case后可以跟常量与变量，还可以跟表达式

循环语句
for
格式：
  for(初始化语句;判断条件;循环后的语句){
    执行体;
  }

for-in
格式：
  for(var 变量名 in 遍历的目标){
    执行体；
  }
1. 可以遍历数据的元素
var arr = {12,13,19,15,16};
for (var index in arr){
   document.write(arr[index]+",");
}
2. 可以用以遍历对象的所以属性

while
格式：
  while(判断条件){
    执行体；
  }        

do while
格式：
   do {
    执行体；
   }while(判断条件)；    

with 
说明：有了With语句，在存取对象属性和调用方法时就不用重复指定对象
格式:
   with(对象){
      可直接调用对象方法或属性;
   }

函数

格式：
function 函数名(形参列表){
   函数体;
}
注意细节:
1.在Js的函数定义时，形参不能加var声明
2.在Js函数中，没有返回值类型，但可以有返回值，也可以没有，不用声明
3.在Js的函数中，没有函数重载
4.在Js的函数中，任何一个函数内部都隐式的维护了一个arguments的对象，给函
  数传递数据的时候，会先给arguements的数组里，然后再分配给形参

字符串对象

方式1：
new String("内容");
方式2：
var str = "内容";

常用方法
anchor() 生产锚点
"".anchor("");

blink() 为元素添加blink标签

charAt()  返回指定索引位置处的字符

charCodeAt() 返回索引值对应的码值

fontcolor() 给字符串加上颜色

indexof() 返回指定字符串第一次出现的索引值

italics() 把字符串变为斜体

link() 给字符串添加超链接

replace() 替换字符串内容

split() 切割字符串

substr() 截取字符串

toUpperCase()转大写
toLowerCase()转小写

Date对象

getYear() 获取当前年份与1900年份相差年份

getFullYear() 获取当前准确年份

getMonth()获取月份

getDate()获取日

getHours()获得时间

getMinutes()获得分钟

getSeconds()获得秒

toLocaleString()获取一定格式的日期，不能修改

Number对象

方式1： 
var 变量 = new Number(数字);
方式2：
var 变量 = 数字;

常用方法
toString() 将数字转换成字符串

toFixed() 指定保留小数位，还带有四舍五入

Math对象

常用方法
   ceil() 向上取整

   floor() 向下取整

   random() 随机数方法 

   round() 四舍五入

Array数组对象

   方式1：
   var 变量名 = new Array();
   方式2：
   var 变量名 = new Array(个数); 创建一个指定数组长度的数组
   方式3：
   var 变量名 = new Array(元素1,元素2,...);
   方式4:
   var 变量名 = [""];


注意细节：
   1.数组长度可以变化    

常用方法
   concat() 连接数组

   join() 使用指定的分割符，把数组中的元素拼装成一个字符串返回

   pop() 移除数组中的最后一个元素并返回

   push() 将新元素加入数组，并返回最新长度

   reverse() 反转数组的元素

   shift() 移除第一个元素，并返回

   slice() 截取数组的一段内容

   sort() 排序方法,但是需要写排序方法

   splice() 移除一个或多个元素，必要时还可以插入元素

自定义对象

在Js中没有类的概念，只要有函数即可创建对象

方式1：使用无参函数创建对象
function Person(){
}
var p = new Person();
p.id = 110;
方式2：使用带参的函数创建对象
function Person(id,name){
    this.id = id;
    this.name = name;
    this.say = function(){
      alert(name + "呵呵");
    }
}
var p = new Person();
方式3: 使用Object函数来创建对象
function Object(){
}
var p = new Object();
p.id = 100;
p.name = "铁蛋";
方式4：使用字面量的方式创建
var p = {
    id:110,
    name:"狗娃",
    say:function{
      alert(this.name + "呵呵");
    }
}

prototype

1.prototype是函数的一个必备属性
2.prototype的值是一个对象
3.可以任意修改函数的prototype属性的值
4.一个对象会自动用有这个对象的构造函数的prototpye的成员属性和方法
 Array.prototype.getMax = function(){
var max = this[0];
for(var index = 1; index<this.length ; index++){
    if(this[index]>max){
        max = this[index];    
    }    
}
return max;
}


Array.prototype.searchEle = function(target){
    for(var i = 0 ; i<this.length ; i++){
        if(target==this[i]){
            return i;    
        }    
    }
    return -1;

}



//var arr = new Array(12,4,17,9);
var arr = [12,4,17,9];
var max = arr.getMax();
var index = arr.searchEle(9);
document.write("最大值："+ max+"<br/>");
document.write("索引值："+ index+"<br/>");

Bom编程

   浏览器对象模型: 浏览器对象模型中把浏览器的各个部分都用一个对象来描述，
   如果想要操作浏览器的一些属性，我们就可以通过浏览器对象模型的对象来操作

window 代表了新开一个窗口
   常用方法：
   open() 打开新窗口并装入给定的URL的文档

   resizeBy 改变窗口当前的位置，指定X与Y

   resizeTo 将窗口的大小更改为指定的宽度和高度值

   moveBy() 相对于原来的窗口移动指定的值

   moveTo() 相对于整个屏幕移动

   setInterval() 每经过指定的时间就可以执行指定的代码，单位ms

   clearInterval() 取消定时任务

   setTimeout() 经过指定的时间后，执行一次指定代码，单位ms

注意细节：
   window的一些方法调用可以省略window的对象

事件
   注册事件的方式:
   方式1：直接在html元素上注册
          <body onload="ready()">
          function ready)(){
            代码体;
          }
   方式2：可以在js代码找到对应的对象再注册      推荐 
          var bodyNode = document.getElementById("body");
          bodyNode.onload  = function{
          }
   常用的事件:
   鼠标点击相关：
   onclick 在用户用鼠标左键单击对象时触发。 
   ondblclick 当用户双击对象时触发。 
   onmousedown 当用户用任何鼠标按钮单击对象时触发。 
   onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。 

   鼠标移动相关：
   onmouseout  当用户将鼠标指针移出对象边界时触发。 
   onmousemove 当用户将鼠标划过对象时触发。 

   焦点相关的：
   onblur 在对象失去输入焦点时触发。 
   onfocus 当对象获得焦点时触发。

   其他：
   onchange 当对象或选中区的内容改变时触发。 
   onload 在浏览器完成对象的装载后立即触发。 
   onsubmit 当表单将要被提交时触发。 


Location 代表了地址栏对象
   href 设置以及获取地址栏的对象

   reload() 刷新当前页面

Screen 代表了整个屏幕对象
   availHeight 获取系统屏幕的工作区域高度
   availWidth 获取屏幕的工作区域宽度
   height 获取屏幕的垂直分辨率
   width 获取屏幕的水平分辨率

Dom编程

    文档对象模型：一个html页面被浏览器加载的时候，浏览器就会对整个html页面上
    的所有变迁都会创建一个对应的对象进行描述，
    我们在浏览器上看到的信息只不过就是这些html对象的属性信息而已。
    我们只要能找到对应的对象操作对象的属性，则可以改变浏览器的当前显示内容。

    document.all 获取html文件中的所有标签节点

    document.links 获取文档中所有含有href属性的标签

通过html因素的标签属性找节点
    document.getElementById("html元素的id") 
    document.getElementsByTagName("标签名") 
    document.getElementsByName("html元素的name")

通过关系(父子关系、兄弟关系)找标签。
    parentNode    获取当前元素的父节点。
    childNodes    获取当前元素的所有下一级子元素。
    firstChild    获取当前节点的第一个子节点。
    lastChild    获取当前节点的最后一个子节点。
    ------------------------------------------------------------    
    nextSibling        获取当前节点的下一个节点。（兄节点）
    previousSibling    获取当前节点的上一个节点。（弟节点）


 注意细节: 
    InnerHTml是用来设置标签题的内容，value死用以设置标签的value属性值
    获取子节点的时候包括空文本和注释文本，可以通过便标签的类型判断筛选
    文本类型： 3
    注释类型: 8
    标签节点类型: 1

创建、插入节点

    document.createElement("标签名")        创建新元素节点
    elt.setAttribute("属性名", "属性值")    设置属性
    elt.appendChild(e)                        添加元素到elt中最后的位置

    elt.insertBefore(newNode,oldNode); 在child之前
    elt必须是oldNode的直接父节点

    elt.removeChild(eChild) 删除指定节点
    elt必须是child的直接父节点

正则表达式

方式1: 
    /正则表达式/模式
    var str = "hello1123"
    var reg = /^[a-z0-9]+/;


方式2:
    new RegExp("正则表达式",模式);

常用的两个方法
    test方法 匹配，使用正则对象去匹配字符串，成功则返回true，否则false

    exec方法 查找，根据正则表达式查找字符串符合规则的内容

模式
    g 全文查找
    i 忽略大小写

前言

内容

JavaScrip

javascript的历史

协议

javascript的特点：

javascript与java之间区别 ：

如何编写javascript的代码。

网页的注释：

变量的声明：

运算符

控制流程语句

函数

字符串对象

Date对象

Number对象

Math对象

Array数组对象

自定义对象

prototype

Bom编程

Dom编程

正则表达式

javascript与java之间区别：