JavaScript第一讲：JavaScript基础

第一节，本节主要讲解JavaScript的一些基础，用一些实例来应用，加深印象。

 一、输出 

   1. alert()  2. document.write();是在文本里写

二、如何在HTML文档中使用js

1、在网页里所有的<script></script>里的代码都可以看成是合并的为一体的所以，定义变量时不能重命名。

2、事件触发

<a href="javascript:这里写js代码程序">demo</a>；

  <a href="javascript:show()">demo</a>这里的js是在点击<a>标签的时候才能使用

例：

<form action="javascript:alert('@@@@');">；

<div οnclick="javascript:alert('dddd')">helo</div>；

3、使用<script></script>将js语法嵌入到HTML中，可以使用多个，每个之间都是有关联的。

4、可以在任何地方外部引进<script src="*.js"></script>

小知识点

new Date() 当前时间

三、运算符和表达式

1、算数运算符号 + - * /  ++  --   %

+ 有加法运算；连接字符串

% 一种是被整除  一种求一段时间

4%-3结果是1  因为取正负看除数

2、任何与字符串相加就是连接的意思

3、赋值运算符号=  += -=  /=  %=

+= 用于字符串连加

4、条件运算符号> < ==  ! >=

两边比较的时候使用相同的类型

5、逻辑运算符号&&  ||  !

var a=10

if(a>5 | a++>10)

alert(a); 

结果为10，因为a>5 | 断路了后面的了可以看成是bool || 表达式

6、位运算符号>>  >>>  <<   | &  ~

乘以2  则左移一位 除以2是右移一位

>>> 无符号右移

7、其他运算符号即三元运算符 ？ ：

例：var a=true ?"www":"yyyy";alert(a);结果为www

四、流程控制

顺序结构

条件结构--分支结构---选择结构

1.单路分支

if(bool){

}

2.双路分支

if(bool){

}else{}

3.多路分支

if(bool){

}else if{bool}{

}...else{

}

用于范围

switch(变量){

case 值1：

     表达式

   [break;]

case ...

 

case 值2:

   [default]

}

单个值匹配  switch(变量)里的变量一般用 int 或string数据类型

 

4.嵌套分支

if(bool){

  if(){

   switch(){

    }

  }

}else{

   for(){

    while(){

     }

 }

}

 

循环结构

while()

do-while()

for()

 

例1.

九九乘法

<script>

//st: 添加st节点

for(var i=1;i<=9;i++){

  for (var j=1;j<=i;j++){

   //break st:将这个st节点这跳出来后面的就不执行了

    document.write(j+"*"+i+"="+(j*i)+"&nbsp;&nbsp;")

  }

document.write("<br>");

}

</script>

 

例2.

if(i==30)

  continue;如果i=30的时候那么我就i=30的时候就退出来。

 

例3.

<script>

 document.write('<table border="1" width="800" align="center">');

  var i=0;

while(i<1000){

   if(i%10==0){

   if(i%2==0)

      bg="#cccccc";

 else

     bg="#fffff";

    document.write('<tr    οnmοuseοver="show(this)"  οnmοuseοut="noshow(this)"   bgcolor="'+bg+'">');

   }

//输出1000个格子

document.write('<td>'+i+'</td>');

i++;

if(i%10==0)

document.write('</tr>');

}

document.write('</table>');

 

var ys=null

function show(obj){

 ys=obj.bgColor;

obj.bgColor="red";

}

function noshow(obj){

obj.bgColor=ys;

}

</script>

 

知识点

除java外  其他都可以把1为真 0为假

五、函数：是一段完成指定功能的已经命名的代码段

函数只用“调用”才能使用到，调用，就是通过名称（可以在声明之前也可以在声明之后）

例1.

function test（）{

功能段（一条，或多条）

}

<script>

function table(){

 document.write('<table border="1" width="800" align="center">');

 for(var i=0;i<10;i++){

  if(i%2==0)

     var bg="red";

else

    var bg="";

document.write('<tr bgcolor="'+bg+'">');

for(var j=0;j<10;j++)

    document.write('<td>'+(i*10+j)+'</td>');

  document.write('</tr>');

}

document.write('/table');

}

test();

test();

test();

</script>

例2

<script>

function table(row,col,width,color){

 document.write('<table border="1" width="'+width+'" align="center">');

 for(var i=0;i<row;i++){

  if(i%2==0)

     var bg=color;

else

    var bg="";

document.write('<tr bgcolor="'+bg+'">');

for(var j=0;j<col;j++)

    document.write('<td>'+(i*10+j)+'</td>');

  document.write('</tr>');

}

document.write('/table');

}

test(3,4,100,"red");

</script>

1.函数名

2.参数：根据需要使用参数

3.函数体（功能）

4.返回值（可选）

5.function test(a,b){

   return 值 

}

6.函数名不加（）时代表是函数；加（）时表示调用

 

回调函数

情况：

1.函数的作用 ---决定我去不去使用

2.函数的参数-----决定我怎么用

3，返回值---决定我返回后如何处理

function demo(a,b,fun){

  return a+b+fun();

}

demo(1,2,test);

function test(){

return 100 

}

例3

function table(start,end，check){

for (var i=start;i<end;i++){

      if(check(i)){

  document.write(i+"< br>");

}

}

}

1.丛这个函数中（10,500）取出3的倍数

 table(10,500,function(num){

if(num%3==0)

   return true;

else

  return false;

})

2.从这个函数中（-200,200）中取负数

table(-200,200,function(num){

 if(num>0)

    return  false;

else

   return true;

})