JavaScript概述

浏览数：30 / 时间：2015年06月08日

前言

1.什么是javascript?
   在浏览器端执行一种编程语言。javascript和java没有任何关系   ，只是语法和java相同。也有一些差异。
2.javascript作用？
   a.前端验证
   b.操作html
   c.ajax核心技术之一
   d.获取浏览器的一些相关信息

3.什么是ajax?

在浏览器中运行的js脚本，通过http请求异步地访问服务器组件，服务器组件返回xml文件或者json格式的数据，js接收后通过解析xml或json来局部刷新页面，提高用户体验。

正文

JavaScript
脚本语言：为了缩短传统编程语言从编写-编译-运行这个过程而开发的一种简单类型语言。
与java的区别？
1.js由NetScape开发，java由SUN公司开发
2.js是一种弱类型的语言，语法要求很松散；java是一种强类型的语言，语法要求很严格。
3.js功能比较简单，java语言功能很强大，能执行连接数据库等复杂操作。
js语法特点：
1.全面支持Unicode编码
2.大小写敏感
3.语法不严格

基本语法

变量

1. var 变量名称
2. js由浏览器解析执行，存在浏览器差异
3. 注释：// 单行注释 /* 多行注释 */

4. js中可以定义重名变量,如果后面定义的变量没有初始化则会按照前面定义的输出

数据基本类型：

1.  number    数字类型
2.  string    字符串类型
3.  boolean   布尔类型非0非null为true

特殊类型

1.   undefined 变量没初始化直接使用
2.   null       只有显示声明null才能使用
3.   NaN        "test"/123

对象类型

Function Object Array Date Math

运算符

算数运算符

   +-*%/   i++ i--
  //算数运算符
  var a = 4;
  var b = "3";

  //alert(a+b); 43
  //alert(a+parseInt(b)); 7
  //alert(a-b); 1

比较运算

   > < == != ===

   == 比较值是否相等不会对数据类型进行比较
   === 比较值和数据类型，同时相等才为true

逻辑运算

&& || ! & |

赋值运算

三目运算

类似java

表达式

var a = 4;
分号作为语句结束，可以不写默认一行为一个语句结束

流程控制语句

  if(1){
   alert(a);
  }

java中：for(int i;;){}
js中    ：for(var i;;){}

java中的foreach for(Object o : objects){}
js中的foreach for(var o in objects){}

js是一种面向对象的语言

对象类型

1.Function 类型

       1.1 function   函数名称(参数列表){

    函数体
     }
       1.2 var fun = new Function("a","b"," return a+b;");

       1.3 var fun = function (a,b){
      return a+b;
           }
      注意：Function 类型没有重载，并且 fun 和fun(1,2)结果完全不同;

2.Object类型

1.1

1.2 Json 方式创建对象

1.3 js方式创建一个对象

3 .Array数组类型

       1.1 Java中的数组
    1.固定长度，存储同一类型数据，连续内存空间
     js中的数组
           1.可变长，存储数据不固定，存储空间不一定连续
   var arr = new Array();
    arr[0] = 123;
    arr[1] = "hello";
    arr[5] = "aaaa";

       1.2通过JSON的方式创建
   var arr2 = [1,2,3,"hello",,,"aa",];
    alert(arr2.length);// IE中长度为8，火狐7

数组的API

1.     属性 length 获得数组长度
2.    方法
1）          push(参数); 将参数追加到数组的尾部，同时数组长度增加
2）          pop(); 删除数组的最后一个元素并且将该元素返回
3）          shift(); 删除数组中第一个元素，并返回该元素
4）          unshift(参数); 往数组的最前端添加一个元素，同时数组长度增加
5）          arr.sort(); 数组arr执行sort之后会进行简单排序，默认只能排序0-9                  如果排序数字复杂，则必须对sort方法进行修改：    arr.sort(function(a,b){return a-b;});
6）          arr.reverse(); 使当前数组逆序输出
6）          concat(); 将两个数组进行拼接操作，返回的是拼接好的数组
              var arr1 = arr.concat(arr2);
7）          join(参数)   通过连接符将数组元素连接起来，返回连接字符串
               arr2.join("-");

4.String对象类型

var str = new String("abc");

1.      属性 length 获得字符串长度
2.      方法

1）          charAt(下标)
2）          indexOf()
3）          substring()
4）          concat()
5）          split()

5.Date 对象类型

   var d = new Date();
1）    获得当前年份    d.getYear()
2）    获得年份的全称    d.getFullYear()
3）    获得月份    d.getMonth()
4）    获得日期    d.getDate()
5）    获得星期    d.getDay()
6）    获得时间    d.getHours()
7）    获得分钟    d.getMinutes()
8）    获得秒钟    d.getSeconds()

6.Math 对象

1）       ceil()    向上取整
2）       floor()   向下取整
3）       round()   四舍五入

JS中的事件

事件的三要素：事件源/ 事件/ 监听器

事件监听属性

1.   onmouseover   鼠标移入事件
2.   onmouseout    鼠标移出事件
3.   onclick       鼠标单击事件
4.   ondblClick    鼠标双击事件
   注：       函数   setTimeout("",);
5.   onmousemove   鼠标的移动事件
6.   onblur        鼠标失去焦点事件
7.   onfocus       鼠标获得焦点事件
8.   onmousedown   鼠标按下事件
9.   onmouseup     鼠标弹起事件

10.   onload       页面载入完成事件
11.   onsubmit      表单提交事件   函数返回true表单提交
           onsubmit=" return Function"

12. onchange 失去焦点并且值发生改变事件

13.   onkeyup       键盘弹起事件
14.   onkeydown     键盘按下事件

15   onscroll 滚动条滚动
16.   onresize窗口变大变小
17.   onmove窗口移动

18.onmousemove事件代码示例

在function中怎么获得事件

1. 传递event对象到function中

2.this表示当前标签对象

DOM(Document Object Model,文档对象模型)

由W3C定义的一组规范一组API 用来操作HTML对象

1.直接获得标签对象

1）  document.getElementById("id属性值") 通过ID来获得对应的标签对象
2）  document.getElementsByTagName("标签名称") 根据标签名称来获得一组标签，返回数组对象
3）  document.getElementsByName("name属性值"); 根据name属性值来获得一组标签，返回数组对象

4）缩放图片代码示例

2.间接获得标签对象

1）  父标签.childNodes    获得当前标签的所有孩子节点，返回数组对象
2）  父标签.firstChild    获得第一个孩子节点
3）  父标签.lastChild     获得最后一个孩子节点
4）  标签.nextSibling     获得下一个兄弟节点
5）  标签.previousSibling 获得前一个兄弟节点

3.创建节点对象

1） document.createElement("标签名称") 创建一个对应的标签对象
2） document.createTextNode("文本值"); 创建一个文本节点对象

3）动态表格代码示例

4.操作标签

1）  父标签.appendChild(子节点); 将一个标签追加到父标签当中
2）  父标签.removeChild(子节点); 删除子节点
3）  父标签.insertBefore(newElement,targetElement); 在目标元素之前插入一个新元素
4）  父标签.replaceChild(newElement,oldElement);    用新元素替换掉旧的元素

5.其他操作

1）标签.style.样式属性 = 属性值;   h1.style.backgroundColor = "red";
2）  标签.innerHTML 获得或者设置元素的标签体
3）  文本节点.nodeValue 获得文本节点值
4）  标签.parentNode 获得父节点

5）在页面显示时间代码示例

select下拉列表的特性

1.  select对象默认存在一个用来存放option对象的数组
2.  select对象.options 获得option数组对象
3.  select对象.selectedIndex 获得当前访问的option对象在数组中的位置

4.select对象.options.length=0;清空i数组。
5.自动填充下拉框代码示例

总结

javascript语法

a.基本知识
1. 大小写敏感、标识符命名前面$ _ 字母开头，后面接上字母数字 _ $

    2.语句后面接上;
b.变量
  1.javascript 是弱类型数据语言，变量在定义的时候不需要接上类型。
  2. javascript中使用var 定义变量。
c.数据类型
  1, 数字类型   number    包括整数和浮点数
   2.字符串       string       "张三"   ‘张三‘
   3.布尔类型    true/false 非0 /0   非null/null
   4.特殊类型：
                   undefined     为定义，两种情况：
                   1).变量定义之后没有赋值
                   2).变量没有定义
                  null     为空
                  NaN   不是一个数字 ,非数字。
                  java     123/"1" 这个不行
                  javascript    123/"1" 可以
                      比如：123/"abc" NaN

d.类型转换
e.运算符和表达式
f.流程控制语句和循环语句
g.函数
1. 使用function来定义函数
2. function   函数名(参数列表){方法体}
h.Object 对象
i.数组
     javascript数组特点：
         1.数组长度可以改变。
         2.数组中可以存放任意类型的数据。
     数组的创建：
         var arr=new Array();
         var arr=[1,2,3,4];


         parseInt(i)；字符串----->number 整数
         parseFloat(i);字符串----->number 小数
         toString();number----->字符串