{channel.title!channel.name} - 楚淮公司周东林

很好的javascript总结

Javascript 是最流行的网页前端脚本语言,用于实现网页特效/表单验证/AJAX等工作, 其语法类似C, 区分大小写。学习Javascript 建议安装Firefox或Chrome浏览器, 在浏览器中按F12键调出控制台, 在控制台下可直接执行各种javascript函数和命令. JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上。


Javascript 语法说明

注释:

  1. 单行注释    //  
  2. 多行注释

/*   多行文字

*/

;分号用于分隔 JavaScript 语句,用分号来结束语句是可选的。

 

变量:

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(但不推荐这么做)
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)

 

变量声明  var  变量名  , 例如   var  x;   

变量赋值  变量名=值     例如   x=100   x='abc'

Javascript 数据类型

数据类型:  未定义(undefined) , 空(null),  布尔(Boolean), 字符串(String), 数值(Number), 对象(Object), 数组和函数都可算是一种特殊的对象. JS不区分整数和浮点数, 所有数字均用浮点数表示.

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:

var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

未定义(undefined): 任何未被赋值过的变量

字符串可用单或双引号作定界符.  s1='abc'     ;   s2="abc" 均可

isNaN(x) : 判断x是否是数值形式,   如x非数值,返回true;   如x是数值, 返回false. 例 isNaN('12') 返回false

如果把数字与字符串相加,结果将成为字符串, 例如 5+"6" 将得到"56",字符串和数值可以直接按数值规律比较大小.  "123">45

数据类型转换:

parseInt(str) : 将字符串转为整数   parseInt("123.56")结果为 整数123

parseInt("12a3")的结果为12

parseFloat(str): 将字符串转为浮点数 parseFloat("1.56") 将得到1.56

 

布尔(逻辑)只能有两个值:true 或 false。

js中没有常量,但一般约定全大写字符命名的变量不要去修改.

各种运算符类似C 。  ++,  -- 都和C一样.

关系运输符:   >   <  ==  ===  <=  >=  !=  !==

逻辑运算符 :  &&与   ||或    !非

 JavaScript 保留字

break          delete         function            return         typeof

case             do                 if                  switch          var

catch           else              in                this              void

continue     false           instanceof   throw          while

debugger     finally         new             true             with

default         for               null              try

JavaScript  String对象

String对象是最常用的对象, 其有很多属性和方法

s='AB汉字系统'

s.length   // 返回6, 字符串长度

s.charAt(2)  // 返回 汉,  取第2个字符

s.indexOf('B')  //  返回1, 查找B, 表明B在s的第1个位置

s.indexOf('C')  //  返回 -1, 表示未找到C

s.substr(1,3)   //返回B汉字,  从位置1开始, 取3个字符

s.replace('AB', 'DE') // 将AB替换为 DE

var s = "hello, world"             

s.charAt(0)   或s[0]          // => "h": the first character.

s.charAt(s.length-1)          // => "d": the last character.

s.substring(1,4)                 // => "ell": the 2nd, 3rd and 4th characters.

s.slice(1,4)                         // => "ell": same thing

s.slice(-3)                          // => "rld": last 3 characters

s.indexOf("l")                    // => 2: position of first letter l.

s.lastIndexOf("l")                     // => 10: position of last letter l.

s.indexOf("l", 3)                // => 3: position of first "l" at or after 3

s.split(", ")                         // => ["hello", "world"] split into substrings

s.replace("h", "H")            // => "Hello, world": replaces all instances

s.toUpperCase()              // => "HELLO, WORLD"

s1+s2+s3  或  s1.concat(s2,s3)  // 三个字符串连接

字符串分隔

var  t="12:10:35";

var  tarr=t.split(":");  // 以:为分隔符, 分隔t, 得到一个数组

  hour=tarr[0];  minute=tarr[1];  second=tarr[2]

JavaScript  json对象

json对象由花括号定界,在花括号内部,对象的属性以名称和值对的形式 (name : value) 来定义,属性由逗号分隔:

person={firstname:"Bill", lastname:"Gates", id:5566};
或person={"firstname":"Bill", "lastname":"Gates", "id":5566};

访问json对象属性可用如下两种方式:

name=person.lastname;
name=person["lastname"];
str='{"name":"Bill",  "id":"5566"}'; //字符串
person=JSON.parse(str); //由字符串构造json对象
document.write(person['name']+' '+person.id);

局部Javascript 变量

在 JavaScript 函数内部用var 开头声明的变量是局部变量,只能在函数内部访问它。函数运行完毕,局部变量就会被删除。

function  fun1(){

  var  x=1, str='abc';  // 局部变量

   z=100 ; // 没有用var开头, 所以z是全局变量  

}

全局Javascript 变量

(1)在函数外声明的变量

(2)在函数内没有使用var 开头定义的变量

都是全局变量,网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除。

x=100;    // 全局变量

function  fun1( ){

  y=200;      // 全局变量

  var  x=20;  // 用var对x重新申明, 此时在函数内部x是局部变量, 前面的全局变量x不可见了

}

 

Javascript 流程控制

  1.  if  (条件)  {  语句1 }

    else  {  语句2 }

  1. if  (条件)  {  语句1 }

    else  if  (条件)  {语句2 }

else  {  语句3 }

  1.  switch (表达式) {

  case   匹配条件1:  语句1;  break;

  case   匹配条件2:  语句2;  break;

  …

default:  默认语句;

}

 

  1. 条件表达式   变量=布尔值? 值1:  值2  . 条件为真取值1, 为假取值2

a=x >y? '大于': '不大于'

  1.  while  (条件) {

循环语句体

 }

  1.  do  {

循环语句体

 } while  (条件)

  1.  for  (var  x=1;  x<100;  x++) {

循环语句体

 }

  1.   for/in 语句循环遍历对象的属性:
var person={fname:"John",lname:"Doe",age:25};
var txt='';
for (x in person){
   txt= txt + x+":"+ person[x]+" ";
  }
document.write(txt);
  1.   异常处理

try {

语句

} catch(e) {

异常处理

alert (e.message)  // 显示异常错误信息

} finally  {

最后一定会执行语句(无论是否有异常)

}

Javascript 数组

(1) 创建数组方法1, 直接赋值 

var  arr=[1,2,3];  alert( arr[0]+ arr[1]+arr[2]) ;

(2)创建数组方法2, 用new语句

var  arr=new  Array(数组长度)  或  arr=new  Array(数组的值)

var  arr1=new Array(5);

alert('数组1长度为:'+ arr1.length); 

var  arr2=new Array(1,2,3);

注:js 的数组可以存放任何类型的数据, 一个数组中的各个数据元素可以是不同类型;访问数组元素时可通过索引,索引从0开始。 当访问到一个不存在的索引时, 并不会报错, 而是返回一个undefined值,如果试图赋值给一个不存在的索引值, 也不会引发错误, 而是自动扩展数组.

数组的常用方法:

(1)数组元素的添加

arrayObj. push( item1 , item2 );// 将一个或多个新元素添加到数组结尾,并返回数组新长度

arrayObj.unshift(item1 ,item2);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,并返回数组新长度

(2)数组元素的删除

arrayObj.pop();   //移除最后一个元素并返回该元素值

arrayObj.shift();  //移除第0个元素并返回其值,数组中元素自动前移

(3)数组的截取

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素.原数组不变

[1,3,5,7,9].slice(2,4)  返回 [5,7]

arrayObj.splice(start, [length]); //在原数组中从start开始, 截取长度length的子数组, 截取后, 原数组中将删除子数组

arr=[1,3,5,7,9]

arr.splice(2,3) 返回 [5,7,9],  arr中删除该子数组,  arr=[1,3]

 (4)数组的拷贝

arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向原数组

arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向原数组

(5)数组元素的排序

arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址

arrayObj.sort();  //对数组元素排序,返回数组地址

arr1=[8, 10, 1, 2, 100, 3, 4, 5, 6]

arr1.sort()   //[1, 10, 100, 2, 3, 4, 5, 6, 8]  默认将按ascii码排序

//  如需按数值大小排序, 需自己定义一个比较函数

// 比较函数需两个参数a,b;  如a>b返回1,  否则返回-1

arr1.sort( function(a,b){ if (a>b) { return 1;} else {return -1} }  )

[1, 2, 3, 4, 5, 6, 8, 10, 100]

(6)、数组元素的字符串化

arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。

arr1=['a',1,5,'c']

arr1.join(':')  将得到"a:1:5:c"

(7) 查找

arrayObj.indexOf(value)  // 返回value值在数组中的索引, 如无,返回-1

[1,3,5,7].indexOf(3) 返回 1

二维数组  arr=[ [0,1,2],  [3,4,5], [6,7,8] ]  ,  则 arr[1][1]的值为4

Javascript 函数

function  函数名(参数1, 参数2…){

  语句

  return  返回值;

}

调用函数时, 如传递的参数个数不匹配, 不会报错, 未传递的参数值为undefined

Math  库

Math.random()  // 返回0-1的随机小数

Math.floor (5/2)  // 向下取值, 返回2

Math.ceil(5/2)    // 向上取整, 返回3

Math.round(5/2)  // 以四舍五入方式取整, 返回3

js 四舍五入函数 toFixed(n) // n是小数位数

x=2.345

x.toFixed(1)  // 2.3

x.toFixed(2)  / /2.35

Javascript 主要作用

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

插入新的 HTML 元素

log = document.createElement("div"); // 创建一个 <div> 元素
log.id = "debuglog";
log.innerHTML = "<h1>Debug Log</h1>"; //赋予内容
document.body.appendChild(log); // 将div插入到body
var pre = document.createElement("pre"); // 创建一个 <pre> 
var text = document.createTextNode("文字串"); // 创建一个文本节点
pre.appendChild(text); // 将文本节点添加到<pre>中
log.appendChild(pre); // 将<pre> 添加到<div>中

改变 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=new value
例:document.getElementById("image").src="landscape.jpg";

改变 CSS 样式

如需改变 HTML 元素的样式,请使用这个语法:

document.getElementById(id).style.property=new style
例:
<p id="p2">Hello World!</p>
<script>
var p=document.getElementById("p2");
p.style.color="blue";
p.style.fontSize="24px";
</script>

 

function show(){
document.getElementById('img1').style.visibility="visible";  //显示元素
}
function  hide(){
document.getElementById('img1').style.visibility="hidden"; // 隐藏元素
}

css的很多属性含有减号连字符,如font-Size, background-Color,这些称为标签属性。如果要编写程序来设置这些属性,由于减号不能出现在表达式中,所以要将这些标签属性改写为样式属性。标签属性和样式属性基本上是相互对应的,两者很多时候就相差一个连字符。标签属性是在html标签或CSS中设置时使用的, 不区分大小写。编写脚本动态指定style属性时要用样式属性,要区分大小写。例如:

<style>
p {font-size:24px;}
</style>
<script>
document.getElementById("p2").style.fontSize="24px";
</script>

js中得到网页元素的几种典型方法:

(1)var  x=document.getElementById(id);

x.innerHTML='新的内容'

x.className='ys1';  //设置x元素的类样式

num=x.value;      //取得x元素的值

x.value='abc';      //向x元素中赋值

 

由于id是唯一的, 这种方法一般返回唯一的一个元素

(2)var  arr=document.getElementsByTagName(tag);

var  arr=document.getElementsByTagName('p');

for ( var x=0;  x<arr.length;  x++)

     arr[x].style.color="red"     // 修改每个p标签的文本颜色

网页中可能有多个同样的标签, 该方法返回一个数组. 用for循环访问数组中每个元素

(3) var  arr=document.getElementsByName(name);

var  arr=document.getElementsByName('gender');

for ( var x=0; x<arr.length;  x++)

     if  (arr[x].checked) ; // 检查名为gender的所有单选按钮的选中状态

网页中可能有多个同名的元素, 该方法返回一个数组. 用for循环访问数组中每个元素

(4)  在html5中增加了 一种新方法, 通过class名来获取元素

var  arr=document.getElementsByClassName('red')

返回所有class属性含有 red类样式的数组对象

DOM 事件模型

在网页中会发生很多事件, 例如click,  dblclick, focus, mouseover 等, 一般可编写回调函数, 将函数与事件绑定, 事件发生时将自动调用回调函数进行处理. 在标准事件模型中, 事件对象event在事件发生时由系统作为参数传递给回调函数.

<script>
function  handle(obj,e)
{alert(obj.innerHTML+":"+obj.id);  // 显示该元素中的内容和id名  
alert(e.clientX+":"+e.clientY);    // 显示事件发生时的鼠标坐标
}
</script>
<span  id="a" name="a" onclick=" handle(this,event);"> a12345 </span> 
<span  id="b" name="b" onclick="handle(this,event);"> b56789 </span>

this: 代表发生事件的对象;  event: 代表事件 ,是比较固定的写法

事件监听器注册常用的三种方式

<script>

function  fun1(obj, e) {   };  // 有函数 fun1

</script>

方式1 : 在标签中绑定

<span  id="a" name="a" onclick="fun1(this,event);"> a12345 </span>

方式2:  执行脚本,在脚本中绑定

<script> 

document.getElementById('a').onclick=fun1;  //注意fun1后面不能有( )

</script>

方式3:  标准模型方式, 用addEventListener绑定

<script>

var  a=document.getElementById('a');

a.addEventListener('click', fun1, 0 ); //第3个参数为1:事件捕获,为 0: 事件冒泡

</script>

常见事件

(1)onload 事件

onload 事件在网页加载后自动发生, 一般可做一些初始化处理

<body onload="doinit()">

(2)onchange 事件

onchange 事件常用于检查文本框的输入内容

<input type="text" id="fname" onchange="upperCase()">

(3)onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数

<script>

function  mOver(obj){

obj.innerHTML="谢谢"

}

 

function  mOut(obj){

obj.innerHTML="把鼠标移到上面"

}

</script>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" ">把鼠标移到上面</div>

(4)onclick  单击事件

onclick 事件会在对象被点击时发生。

请注意, onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。

(5)onfocus 获得输入焦点事件

onfocus 获得输入焦点事件当输入字段获得光标焦点时发生

javascript 语言核心定义了: Array 数组, Function 函数, Date 日期, RegExp 正则, Error 错误类.


浏览.发表于:2017-06-18 13:43:02