JavaWeb系列之二 （JavaScript的简介及其应用）

1.JavaScript的简介

 *是基于对象和事件驱动的语言，应用于客户端

 *基于对象：js里面提供好一些对象直接使用

 *事件驱动：响应事件（比如说鼠标滑动）

 *客户端：浏览器

 *javascript实现网页简单的动态的效果

 

 *三个特点

 *交互性

 *安全性：javascript不可以访问本地磁盘的文件

 *跨平台性：只有浏览器支持javascript就可以运行javascript的代码

 *Java和JavaScript的区别

 *不是一家公司

 *javaScript基于对象，java是面向对象

 *java运行需要虚拟机，javaScript直接使用浏览器

 *js是弱类型语言，java是强类型语言

   *比如在java中int i=10但是int m=”10“是不正确的

   *在js里面就没有这样的限制，var a=10，var a="10" var a=true;

 *js的组成（三部分）

 *第一部分：ECMAScript

  *ECMA：欧洲计算机协会

  *由这个组织制定的js规范（包括语句，语法）

 *第二部分：BOM：浏览器对象模型

 *第三部分：DOM：文档对象模型

2.js和html两种结合方式

 *第一种使用html的标签<script type="text/javascript">js的代码</script>

 *代码

 <script type="text/javascript">

  alert("df");

 </script>

 *第二种

  **首先要创建js文件

  **<script type="text/javascript" src="js文件路径"></script>

  **就不要在script标签里面写js，因为不会执行

  **<script type="text/javascript" src="js文件路径"/>这种写法找不到js文件

3.js的数据类型和变量声明

 *java 里面基本数据类型byte short int long float double char boolean  

 

 提供了方法typeof（变量名称）：查看变量的类型

 *在js里面定义变量，都使用一个关键字var

 

 js原始类型（五个）

 **string

  var str="dsf";

 **number

  var str=1

 **boolean

  var str=true;false

 **null :表示对象引用为空，空对象

  **var date=null：//new Date();

 **undifined :定义变量，但是变量没有赋值 var m=

 *js的注释

 ** 和java里面的单行注释和多行注释一样的

 **单行注释//

 **多行注释/* */

4.js的语句

 *java里面的语句

 **循环 for while do-while

 **判断语句 if（）{}else if（）{}else{}

 **switch 语句，在jdk1.7开始支持string类型

  **swich（m）{

  case 1:

   break;

  case 2:

   break;

  }

 *js的判断语句

  **//if语句

  var i=100；

  if（i==10）{

  alert("i==10");

        }else{

  aler("i!=10");

  }

 

 * switch语句

  ** //switch语句

  var m = 50;

  switch(m) {

   case 3:

    alert("m==3");

    break;

   case 5:

    alert("m==5");

    sbreak;

   default:

    alert("other");

  }

 

 * 循环语句 for

  ** //for循环语句

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

   alert(i);

  }

  ** i++和++i区别

 *引入：向页面输出内容

  **document.write（"aa"）;

  **向页面输出html代码

5.使用js语句实现99乘法表

*  document.write("<table border='1' border='blue'>")

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

 document.write("<tr>");

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

  document.write("<td>");

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

  document.write("</td>");

  }

 document,writer("</tr>");

   }

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

6.js的运算符

 *数字运算不区分整数和小数

  var m=123/10000*10000; 结果：123；

 *字符串的操作

  //字符串的运算

  var str="123";

  document.write(str+1);//1231

  document.write(str-1);//122

 *如果字符串不是一个数字，相减操作，显示为NAN，表示不是一个数字

 *boolean类型的运算

  **如果值是true，把值当成1；

  **如果是false，把值当成2；

  //boolean 类型加减

  boolean  flag=true;

  document.write(flag+1);//2

  boolean falg=false;

  focument.write(flag+1);//1

 ==和===区别

  *==比较的是值，和类型无关

  *===比较的是类型和值

7.js的数组

 *java里面定义数组 String[] arr={"aa","cc"}

 *js的数组三种定义方法

 *第一种方式：var arr1=[1,2,3,"5",true];

 *第二种方式：使用到一个内置对象Array

  var arr2=new Array(3);

  **定义数组名称是aar2，数组的长度是3；

  arr2[0]="11";

  arr2[1]="22";

 *第三种方式：使用到一个内置对象Array

  var arr3=new Array(2,34,4)

  **定义数组名称是arr3，数组里面的元素是4，5，6

 *在js里面有一个属性length；表示数组的长度

  **document.write("length:"+arr2.length);

 *js里面的数组的长度是可变的

  *比如定义一个数组的是长度是3，但是赋值时候可以随便写下标的值

  *数组的长度是最大的下标+1

8.js的函数

 *在java里面定义方法

 **public void/int 方法名（参数列表）{

  方法体

  返回值

  }

 public void get1(int a){}

 **js里面定义函数有三种方式

第一种方式：需要一个关键字function

function 方法名（参数列表）{

方法体和方法值

}

function add1（a,b）{

}

第二种方法（动态函数）直接使用function的关键字

var add2=new Function （"参数列表"，“方法体”）

var argument="a,b"

var method1="var sum;sum=a+b;return sum;"

var add1=new Function(argument,method1);

第三题（匿名函数）：直接使用function的关键字

var add3=function(参数列表){

方法体和返回值

}

var add2=function（m,n）{

return m+n;

}

9.重载

什么是重载：方法名称相同，参数列表不同

js里面不存在重载，但是执行过程

10.全局变量和局部变量

全局变量：在javascript定义了就是在所有的javascript便签里面都可以使用

局部变量：在方法里面定义一个变量，这个变量只有在方法内使用

11.script标签放在什么位置

获取输入项里面的值：

script最好放到</body>后面，

因为html是从上到下加载的，如果把script标签放在head里面，还没有加载到输入框所以无法得到，所以这个值肯定取不到

12.elipse和myelipse的区别

elipse是免费开发工具

myelipse是一个收费的插件

js的应用

1.js的string对象

属性：length ，字符串的长度

方法

与html相关的方法

bold（）：字体加粗

fontcolor（）：设置字体颜色

link（）把字符串设置成为超链接

sub（）下标

sup（）上标

与java相似的方法

charAt（）；返回指定位置的字符

字符的位置从零开始。使用这个方法使用，如果位置超过了字符串，显示空字符串

var str="abcd";

document.write(str.charAt（4）);

concat（）；连接字符串

var str1=“dsf”；

document.write(str.concat(str1));

indexof();

var str2="abc";

document.write(str2.indexof("a"));//0

检索字符串，有值是返回位置，如果不存在返回-1

substr()方法 和 substring()方法

都需要两个参数

var str3="abcdef";

document.write(str3.substr(1,3)); 

 //bcd 第一个参数：从那个位置开始 第二个参数：从哪个参数开始向后取几位字符  从b开始取3位

document.write(str3.substring(1,3));

//bc 第一个参数：从那个参数开始，第二个参数：到哪个参数结束但是不包含它  包含头不包含尾

2.string的Array对象

*创建数组

var arr1=[1,2,3];

var arr2=new Array(4);

var arr3=new Array(5,6,7);

属性：length，数组的长度

var arr1=[1,2,3,4];

document.write(arr1.length);

方法：

concat()方法

var arr2=[6,7,8];

document.write(arr1.concat(arr2));

join()方法

根据指定的分配符进行分割

var arr3=["AA","BB","cc"];

document.write(arr3);

document,write(arr3.join("-"));//把逗号换成“-”；

push()方法：向数组的末尾添加元素，返回添加之后的长度

var arr4=["tom",“jack”,"mary"];

document.write("length"+arr4.push("ww"));//4

document.write(arr4);

添加数组的时候会把数组当作一个整体加进去

var arr5=["ad","asd","asdad"];

document.write(arr4.push(arr5));//4

pop()方法：删除并返回最后一个元素

var arr7=["asdd","ad","sad"];

document.write(arr7);//asdd,ad,sad

document.write(srr7.pop()); //sad

document.write(arr7);//asdd,ad

reverse();颠倒数组中元素的顺序

var arr8=[10,20,30];

document.write(arr8);//10,20,30

socument.write(arr8.reverse());//30,20,10

3.js的Date对象

创建Date对象 var date=new Date();

var date=new Date();

document.write(date);//Fri May 22 10:31:41 UTO 

toLocaleString(); 把时间转化成本地的格式的时间

document.write(date.toLocaleString());

getFullYear()  得到当前年的方法

getYear();得到的是两位数

document.write(date.getFullYear());

得到当前月 getMonth() 从Date返回月份（0-11）

得到准确的月份是+1

document.write(date.getMonth()+1);

得到当前的星期getDay() 从Date对象返回一周的某一天（0-6）

得到星期日是0

得到当前的天 getDate();从Date对象返回一个月的某一天（1-31）

document.write(date.getDate());

得到当前的小时 getHours（）

得到当前的分钟 getMinutes（）

得到当前的秒 getSeconds（）

得到毫秒数 getTime();返回1970年1月1日至今的毫秒数

docment.write(date.getTime());

用在页面缓存，防止页面缓存

4.js的Math对象

在Math里面的方法是静态方法，直接使用Math

var a=10.9

ceil(x)向上

document.write(Math.ceil(a));  //11

floor(x)向下

document.write(Math.floor(a));  //10

round(x)四舍五入

document.write(Math.round(a));  //10

random()表示0.0到1.0的值

Math.random(Math.ceil(Math.random*10));//随机取1到10的数

5.js的全局函数

方法不属于任何一个对象，这些方法使用

eval();比如字符串是一个js代码，可以直接执行

var　str="alert('dsf')";

//alert(str);

eval(str);

encodeURI（）:对字符串进行编码

decodeURI();对编码之后的字符串进行解码

var str1="ads测试";

var encode1= encodeURI(str1);

document.write(encode);//abs%E%R%....

var decode= decodeURI(encode1);

document.write(decode);

isNaN()判断是否是数字

如果不是数字返回是true

如果是数字返回是false；

var aa="abc";

alert（isNaN(aa));true

var bb=12；

alert（isNaN(aa)）；flase；

parseInt();转换成数字

var bb=“234”；

document.write(bb+1);//2341字符串的拼接

document.write(parseInt(bb)+1);//235

6.js的函数重载

js不存在函数的重载

function add1(a,b){

return a+b;

}

function add1(a,b,c){

return a+b+c;

}

function add1(a,b,c,d){

return a+b+c+d;

}

add1(1,2);//NaN

add1(1,2,3,);//NaN

add1(1,2,3,4);//10

会调用最近的方法

7.js的BOM对象

bom browser object model ,浏览器对象模型

bom里面提供一些对象，使用这些对象可以操作

1.navigator:得到浏览器的信息

document.write(navigator.appName);//浏览器的名称

2.screen：得到屏幕信息

document.write(screen.width+"  "+screen.height);//当前屏幕的信息

3.history：得到请求地址的历史

创建三个页面，

function back(){

//history.back();

history.go(-1);上一个

}

function next(){

//history.forward();

history.go(1);

}

<input type="button" value="上一个" onclick="back();">

<input type="button" value="上一个" onclick="next();">

4.location：href 第一个功能： 得到当前请求的地址。第二个功能：设置请求地址， 

第一个功能：  document.write(location.href);

第二个功能：

在表单输入项里面，button <input type="button" value="href" onclick="js方法">

在button上面的属性onclick ;表示鼠标点击事件

 <input type="button" value="href" onclick="href1();">

<script text="java/javascript">

function href1(){

location.href="hello.html";

}

</script>

5.window：窗口对象，是一个顶层对象

alert();在页面弹框

confirm()；确认框

window.confirm("确认删除吗");

返回值true 和false

prompt（）方法输入框

open（）打开一个新窗口

<input type="button" value="open" onclick="open1()">

打开页面的地址，"" ,窗口属性

function open1(）{

window.open("hello.html","","width=200,height=100");

}

close：关闭窗口

两个重要的方法

setInterval("js代码","毫秒数")在一定的时间内，重复执行ｊｓ代码

 var id1=  setInterval("alert('123');",3000);//每三秒执行一次

setTimeout("js代码"，毫秒数)//就执行一次

 var id2=  setInterval("alert('as3');",3000);

clearInterval()取消这个操作

window.clearInterval(id1);

clearTimeout()取消这个Timeout操作

window.clearTimeout(id2);

8.js的DOM对象

document object model  文档对象模型

文档：标记型文档 html xml

对象：对象里面有属性和方法

使用js的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

如果想要对标记型文件进行操作，就要解析文件

首先需要把标记型文档里面的所有内容都封装成对象

标签，属性，文本内容都封装成对象。

dom解析过程

根据html的层级结构，在内存分配一个树形结构

树形结构：

只有一个根节点，在根节点下面有子节点，没有子节点的节点是叶子节点。

document对象：整个文档

element对象：标签对象（元素对象）

属性对象：

文本对象：

Node节点对象

是这些对象的父对象

9.DHTML的介绍

不是一门语言，是很多技术的简称

html：封装数据的作用

css：使用属性和属性值来添加样式

ECMAscript：专门js的语句和语法

dom：对我们的标记型文档进行操作

10.document对象

每一个载入浏览器的HTML

document对象代表整个文档

通过document对象可以得到html中标签对象

方法

1. getElementById（）；可以通过id得到标签的对象

返回值是对象，但是如果有多个一样的ID，只获取第一个ID值。

ID值是可重复。

所以它不是一个数组，因为它的获取值只有一个

如果想要标签里面的属性值，标签对象.属性名称

<input text="text" id="testid" value="asd">

var input1= document.getElementById("textid");

input1.value

2. getElementByName();通过name的值得到所有的标签，得到的就是一个数组

遍历数组地道一个标签对象，通过标签对象名称，属性名称，得到属性值

<input text="text" name="testname" value="asd1">

<input text="text" name="testname" value="asd2">
<input text="text" name="testname" value="asd3">

<input text="text" name="testname" value="asd4">

<input text="text" name="username" value="asd4">

var inputs1=document.getElementByName("testname");

alert(inputs1.value);

var inputs2=document.getElementByName("username")[0].value;;//只有一个得到的也是数组

3. getElementsByTagName();返回数组

<input text="text" name="testname" value="asd1">

<input text="text" name="testname" value="asd2">
<input text="text" name="testname" value="asd3">

<input text="text" name="testname" value="asd4">

<input text="text" name="username" value="asd4">

var inputs3= document.getElementsByTagName("input");

alert(inputs3.length);

for(var a=0;a<inputs.length;a++){

var inputs2=inputs[a];

inputs2.value

遍历数组地道一个标签对象，通过标签对象名称，属性名称，得到属性值

write向页面输入信息，或者html的代码

}