JavaScript基础

Ajax技术
1 JavaScript核心基础语法
弱类型类型语言
一门脚本语言，原名ECMAScript,运行与浏览器中
沙箱模型
页游 最高成就


JavaScript特效
JQuery
沙箱模型


怎么在网页嵌入JavaScript代码
  1、在网页写<script>标签，标签内容里面写JavaScript代码。（Script标签必须有type属性,值必须是text/javascript）
  2、在网页上写<script>标签，在标签里面加入src属性，引入一个代码文件 就是一个普通的文本文件 只是扩展名为.js
    注意 上面两种写法不能不存
 3、在事件里面写代码，事件是标签的一类的一类的特别的属性,一般用on开头
JavaScript有几种数据类型
基本数据类型：
1、 Undefine -->undefind 定义变量却不赋值、
2、 数值类型 -->Number 整数和浮点数
3、 字符串 -->String 单引号或者双引号括起来
4、 布尔类型 -->Boolean true flase
5、 Null-->null连这个变量都没有
6、 引用数据类型：
  1. 对象 -->Object Date 带属性和方法
  2.数组-->Array
  3.日期-->Date
  4.预定义对象Global Math
  5.包装类 
  6.系统提供的一些对象 宿主对象 BOM DOM 文档模型
=   赋值
==  比较 判断左右两边是否相等
===  精确相等 比较数据类型和值 全等


数据类型转换：
            1   任何类型的变量都可以通过.toString() 转换成字符串
           2    任何类型的变量都可以通过Number() 转换成数值。转换失败返回NaN 判断是否为NaN 要用isNaN()判断。
          3     任何类型的变量都可以通过 Boolean()转换为布尔值。非0的值都是true,0都是flase,原本null继续null
parselnt()
parseFloat()
常用的引用类型的用法:
             1 Object
       可以任意为对象设置属性，无需提前定义
            2 Array 数组
        下标是任意的数字(甚至不必是数字)，不必连续，也不必从0开始，没有固定的大小   类似与Java的Map集合
             3 日期   Date()   
默认的构造时间是当前时间    getFullYear() getMonth()获得月份从0月开始  getDate()获得日期
getDay() 获得星期几 从0开始
getHours() 小时
getMinuters() 分钟
getSecond() 秒
getMilliseconds()




getTime() 从1970年1月1日开始到现在的毫秒数
     4、Global
parseInt() parseFloat encodeURL(转换字符串的编码，把特殊符号变成特有的编码)
eval() 参数是字符串，内容当做JavaScript代码当场执行
使用Global类里面的方法，无需写出Global这个类、
    函数：function
    funtion 函数名 （参数）{
    方法体
}
1. 参数类型不固定，要看调用时传入的值究竟是什么？
2. 返回值不固定，连有没有返回值都看代码


语法
1 没有类，没有类定义，没有接口，没有枚举,变量无需定义即可使用
2 常规的语法，如：if else for while(没有do while) break continue  都和Java 差不多
（foreach for (var循环变量 in 数组或对象)
3 也有try/catch


脚本有什么特效？
     1、页面特效 视觉特效
     2、数据验证 输入检查 工作分担给客户端做 Ajax
     3、
跨平台性
2 JavaScript面向对象编程
调试技巧：
      1、 根据浏览器来：
      a Eclipse里面内嵌的浏览器 没有调试效果
     b Chrome 或者 FireFox 正常浏览的时候，不报错  按f12键进入调试
      c IE浏览器 调试JavaScript
      2 不断的添加alert调试在JS代码中
      3 try catch 捕获所有错误 保证必需的代码可以正常运行


JavaScript是一门基于对象的计算机语言 描述的工具就是对象
   1、创建对象  new一个 var a = new String("123")
   Global Math (预制对象)Window Document（宿主对象）
对象的属性可以是另一个对象
  2、销毁对象； a = null；
  3、添加属性；a.name= "";
 4、销毁属性;   delete a.name
5、添加成员方法:  d.sayHello = function(){alert();}
6、调用成员方法:   d.asyHello;
7、  删除成员方法： delete d.sayHello;
8、  复杂定义:


                       var preson = new Person();                                                     普通格式
                       a.name= "";                                                                               var preson = new Person();                     
                       a.age = 18;
                       d.sayHello = function(){alert();}


   JSON格式 JavaScript里面的描述对象          只针对Object对象                                       


简化格式                                                                                                          简化格式
             var person = {                                                                                    var person = {                            }；
                  name:"",
                  age:28,
                 sayHello:function(){
                          alert("你好"+this,name);
}


9 数组定义;
普通格式                                 简化格式
var arr = new Array();              var arr = []
var arr = new Array(1,2,3,4,5)  var arr = [1,2,3,4,5]


10字符串
普通格式                                简化格式
var arr = new String();              var arr = "";
var arr = new String("q");              var arr = "q";


11自定义类函数
    语法和定义函数相同，函数名就是类名，函数同时也是构造函数。
function  方法名（参数列表）{
             函数体
}


   使有的类都是Object的派生类，没有类的继承关系。


12原型 prototype
 JavaScript公有的静态方法和成员属性 函数也是一个对象
函数只会创建一次。不会占用内存，同时每个对象都有自己的对象属性实例
    Person.prototype.sayHello = function(){
alert();
};


原型关系是递归


定义对象成员函数
     对象名.函数名 = function(参数列表){
                              函数体
}     


   JavaScript什么时候回收垃圾关闭页面 访问别的页面 刷新页面


13、定义类
         function   标识符(参数列表){
this.属性名  =   值
}




1、关键字var 可以不用关键字，也可以定义变量，但必须是赋值动作


    2、 定义在函数里面的叫 局部变量，作用范围仅限于这个函数内部
   
    3、定义在函数外部叫全局变量，作用范围无限大


   4、 不用关键字定义的变量 全局变量
 3 JavaScript事件模型
4 浏览器模型BOM
BOM -->browse Object Modal
    Js代码里面，有一些对象，window是这些对象的根，代表浏览器本身。
 window内置多个属性，每个属性都是一个对象
window.history-->   代表浏览器浏览页面的历史
   1，back() 回退一页
   2,forward () 前进一页
  3, go()  根据数字后退或前进，数字大小代表后退或者前进的页数
window.status -->代表浏览器的状态栏
window.Document-->代指当前浏览器里面显示的网页  DOM
window.location -->代表浏览器的地址栏
             1.href 这就是完整的网址 写这个值相当于要浏览器取访问一个新的网址
             2. protocol 协议
             3. reload() 相当于刷新，点击按钮和F5是同样效果 产生Http请求
            4. pathname uri部分， 即网址的2,3部分
           5. host   服务器地址和端口    localhost:8080
window.navigator  可以获得浏览器很多信息 兼容性很差
window.screen  代表当前计算机的屏幕
               1、width   height   当前屏幕的分辨率，宽和高
              2 、colorDepth   颜色深度
             3、 availWidth availHeight  当前屏幕可用区域的大小
window对象自身的方法:
          1   移动窗口： moveBy 相对移位  moveTo 绝对移位    仅限IE
         2     改动大小：  resizeBy 相对大小    resizeTo 绝对大小  仅限IE
         3      开启子窗体:   open(URL,窗口的名字,属性,属性);返回子窗体的句柄。
        URL  地址，打开子窗口要显示的页面
       name 名字不显示，JS里面可以用来操纵
      param 参数或者属性 
         4      关闭子窗口：子窗体的句柄.close();子窗体的句柄。 可以用window.close();关闭自身，但是浏览器会有提示，二次确认。最后给你一个反悔的机会。
        5     对话框:
                          alert(文字)  消息对话框  显示文字，只有一个按钮，点击关闭;   window里面方法和属性可以直接调用
                         cofirm(文字)   确认对话框  显示文字，有两个按钮，是 否 点击是返回true，点击否返回flase
                         prompt(文字，默认值)  确认对话框 显示文字 然后显示一个文本框（内含默认值），点击“是”返回文本框的内容，点击“否”返回一个null
 
5 文档对象模型DOM
操纵正在显示的网页  window里面有一个Document的子对象   Document也有很多子对象
1、getElementById(字符串)   参数是要找的ID  返回的对应标签的ID值  id必须是数字加字母的组合
2、getElementsByName(字符串)     参数是要找的name，返回值是一个数组    节点数组
       能有name属性的是 input form select textarae
3、getElementByTagName(字符串) 参数是要找的标签名，返回的还是数组   访问节点的手段
4、createElement(字符串)   参数是节点标签  ，返回值是节点对象
5、createTextNode(字符串) 参数是节点文字内容，返回值是文字节点对象
6、createAttribute(字符串)  参数是属性名
7、appendChild(节点对象)  父标签对象上进行。参数是要追加的节点
节点对象：
                     1 根节点对象document.documentElement  -->html标签
                    2 document.body  -->网页的 body标签
                    3 Node --->包括body在内的所有标签，都是Node对象
                   4  nodeName 标签名字  文本标签 --> #text
                   5 nodeValue  文本标签 -->文字内容
                   6  nodeType 标签类型
                   7  innerText innerHtml
                   8 childNodes 所有的子标签节点   NodeList
                  9 firstChild 第一个子节点 lastChild 最后一个子节点
                 10  previousSibling 上一个兄弟标签  nextSibling 下一个兄弟标签 
      
                 


6 使用DOM操纵样式表   CSS
1.针对内联样式
      DOM对象.style.样式名 = .....
     css里面的样式名  js里面的样式名
     background-color  backgroundColor
jQuery语法:jQuery对象.css('样式名')
jQuery语法:jQuery对象.css('样式名','值')
DOM对象只能指代一个标签，如果有多个标签需要修改样式，需要写成多行代码
jQuery 对象能指代多个标签，默认带迭代效果。设置样式是所有被选中的标签都有


2，针对嵌入式样式
JS语法
     1 设置样式可行 内联样式
     2 读取样式不行 内联样式
jQuery
    1 设置样式可行 内联样式
     2 读取样式可行 读取到的是最终样式


jQuery局限于  DOM操作


css(name|pro|[,val|fn])
概述
访问匹配元素的样式属性。




参数
name     String     V1.0要访问的属性名称


properties   Map    V1.0要设置为样式属性的名/值对


name,value    String, Number     V1.4属性名,属性值


name,function(index, value)      String,Function     V1.01:属性名




2:此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。


示例
参数name 描述:
取得第一个段落的color样式属性的值。


jQuery 代码:
$("p").css("color");            参数properties 描述:
将所有段落的字体颜色设为红色并且背景为蓝色。


jQuery 代码:
$("p").css({ color: "#ff0011", background: "blue" });       参数name,value 描述:
将所有段落字体设为红色


jQuery 代码:
$("p").css("color","red");       参数name,回调函数 描述:
逐渐增加div的大小


jQuery 代码:
  $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });
  DOM解析
    JavaScript里面的DOM解析 解析当前页面
   Java里面的DOM解析对象不一定 由参数决定


JavaScript
Java
解析对象
HTML网页
XML文档
解析手段
浏览器已经做好解析
Js解析document
要自己取创建对象，并且解析得到结果
解析结果
Document对象
Document 类的实例
功能
更多更全 getElementByName
只有基本功能
输出 写
不能，只会显示在浏览器上
能 


    DOM 不怕网络爬虫技术  58同城
7 JavaScript表单编程
8 AJAX基础