JavaScript基础知识整理(1)

时间:2023-03-10 01:42:55
JavaScript基础知识整理(1)

粗略理解,努力入门中

1、在html中引入外部脚本:  <script src="filename.js"></script>

2、注释:  多于一行的长注释使用   /*注释内容 */ , 只有一行的注释用   //注释内容 。

3、创建函数的格式:

function name(){

   函数的内容

}

在函数内部创建的变量为局部变量,只有在函数的内部有效,在所有函数之外创建的变量为全局变量,整个代码中的任何地方都能使用。

4、getElementById() 通过id获得和操作元素;

getElementByValue() 通过value获得和操纵元素

5、点号语法:对象.属性.方法

6、关键字this指向对象,可以使用它的上下文将值传递给函数。上下文大多数情况下是指函数运行时,封装这个函数的对象。

9、if()...else...语句

if(条件){

  条件为真时执行的语句

}

else{

  条件为假时执行的语句

}

10、switch(variable){

  case value 1 :

    当变量variable的值为value 1时执行的语句

    break;

 case value 2:

    当变量variable的值为value 2时执行的语句

    break;

  case value 3:

    当变量variable的值为value 3时执行的语句

    break;

  .

  .

  .

  case value n:

    当变量variable的值为value n时执行的语句

    break;

default:当变量variable的值与上面的所有值都不匹配时执行的语句

}

break的作用:当变量的值与case后面的值相等时,就离开switch语句,否则就继续往下执行。

11、try catch throw

这部分内容在以下链接有较详细的讲解 http://www.w3school.com.cn/js/js_errors.asp

JavaScript基础知识整理(1)

12、for循环

例如:for(var i=0;i<某数值;i++){

  代码块(只要计数器变量i<某数值,就循环执行这个代码块)

}

13、数组

例如:

var baiYu=new Array("Xiang","Yu" ,"Yong","Shang"); //声明一个字符串数组

var number=new Array(1,3,4,6,7,5,3,2);//声明一个数字数组

var bai=new Array(66);//声明一个包含66个对象的新数组

以   数组名[]   的形式 调用数组

14、不知道代码循环多少次时使用do/while循环

do{

  代码块1

}

while(代码块2);

只要代码块2的结果为true,就循环执行代码块1。

15、处理图像

做了一个好玩儿的翻转器(虽然一般翻转器不是这样用的)

效果:JavaScript基础知识整理(1)

html代码:<!DOCTYPE html>
<html>
<head>
   <link href="bear.css" rel="stylesheet" type="text/css">
   <script src="bear.js"></script>
</head>
<body>
   <a href="lefteye.html"><img src="data:images/left.png" id="left"></a>
   <a href="right.html"><img src="data:images/right.png" id="right"></a>
</body>
</html>

css代码:

body{
 width:600px;
 height:400px;
 margin:0 auto;
 margin-top:120px;
}
img{
 margin:0 ;
 float:left; 
}

javascript代码:

window.onload=initEyes;

function initEyes(){

document.getElementById("left").onmouseover=leftOpen;

document.getElementById("left").onmouseout=leftClose;

document.getElementById("right").onmouseover=rightOpen;

document.getElementById("right").onmouseout=rightClose;

}

function leftOpen(){

this.src="data:images/leftopen.gif";

}

function leftClose(){

this.src="data:images/leftclose.gif";

}

function rightOpen(){

this.src="data:images/righttopen.gif"; }

function rightClose(){

this.src="data:images/rightclose.gif"; }

这个javascript代码中很多重复的部分,也许能够以一种像C++里的模板类的方式使得代码更为简练。期待接下来的学习。

ps:使用的图片由板绘+ps制得。