Java Web入门基础（js基础与Html结合）

90 阅读 0 评论 60 点赞

我是靠谱客的博主糟糕高山，最近开发中收集的这篇文章主要介绍Java Web入门基础（js基础与Html结合），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.JavaScript的简介

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

----基于对象：提供很多的对象，可以直接拿过来使用

-----事件驱动：html是静态的网页，JavaScript实现动态网页

-----客户端：专门指的是浏览器

***JavaScript的特点

（1）交互性：信息的动态交互

（2）安全性：JavaScript不能访问本地磁盘的文件

（3）跨平台性：java利用jvm实现跨平台，支持js的浏览器都可以

*****java和JavaScript的区别（雷锋和雷峰塔）

（1）java是sun公司，现在是oracle

（2）js是基于对象，java是面向对象的

（3）java是强类型的语言，js是若类型的语言

（4）js只需要解析就可以执行，而java需要先编译成字节码文件再执行

*****JavaScript的组成

三部分组成

（1）ECMAScript

---ECMA：欧洲计算机协会

---- ECMA组织定义js的语法

（2）BOM

---broswer object model：浏览器对象模型

（3）DOM

----document object model：文件对象模型

2.js和html的结合方式(两种)

第一种：

--使用一个标签<script type="text/javascript">js代码</script>

第二种：

--使用script标签，引入一个外部js文件

*****创建一个js文件，写入js代码

3.JavaScript的原始类型和声明变量

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

*****js定义变量用var(唯一关键字)

****js的原始数据类型（五个）：

--string：字符串

****var str="abc";

--number：数字类型

*****var m=123;

--boolean：true，false

****var flag=true;

--null

****var date=new Date();

****获取对象的引用，null表示对象引用为空，所有对象引用也是object

--undifined

***定义一个变量，没有赋值

****var aa；

****typeof(变量名称)：显示变量的数据类型

4.js的语句

****java里面的语句：

**if判断

**switch语句

**循环：for while do-while

*****js中的语句

**if判断

=是赋值 ==是判断


<script type="text/javascript">
var a=5;
if(a==5){
alert("5");
}else{
alert("6");
}
</script>

**switch语句

---java里面在jdk1.7开始支持string数据类型

---js里面都支持


<script type="text/javascript">
//switch
var b=60;
switch(b){
case 3:
alert("3");
break;
case 6:
alert("6");
break;
default:
alert("other");
}
</script>

**循环：for while do-while


<script type="text/javascript">
//循环while：
var i=5;
while(i>1){
alert(i);
i--;
}
</script>


<script type="text/javascript">
//for循环：
for(var mm=0;mm<=5;mm++){
alert(mm);
}
</script>

**js中的i++（先执行在++）和++i（先++再执行）和java一样

5.js的运算符

****+= ： x+=y；===》x=x+y

****js中不区分整数和小数

var j=123;

alert(j/1000*1000); //在java中是0，在js中是123

****字符串的相加相减操作

***相加的时候做字符串链接操作

***相减的时候做的是真正的减法，如果string是字符串的话会报NaN的错误

var str="456"; //如果str不是一串数字会提示NaN
//alert(str+1);//在java是4561，在js中还是4561

alert(str-1);//js中就直接-1了

*****boolean类型也可以操作

***如果设置成true，相当于这个值是1

***如果设置成false，相当于这个值是0

*****==和===的区别

** ==比较的只是值

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

*****引入的知识

*** 直接向页面输出的语句（可以直接输出到网页上面）

***document.write("aaa");

****可以向页面输出固定值和html代码

6.九九乘法表

<html>
<head>
<title>示例</title>
</head>
<body>
<script type="text/javascript">
document.write("<table border='1' bordercolor='red'>");
//循环行
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.write("</tr>");
}
document.write("</table>")
</script>
</body>
</html>

-----document.write()里面是双引号，如果设置标签的属性需要使用单引号

-----document.write()可以输出变量，还可以输出html代码

7.js的数组

****什么是数组：可以存多个值

----java数组：int[] arr={1,2,3};

js数组定义方式（三种）：

---第一种: var arr={1,2,3}; var arr1={1,2,"3"};

----第二种：使用内置Array对象

var arr1=new Array(5); //定义一个数组，数组的长度为5

arr1[0]="1"; //对数据进行赋值

-----第三种：使用内置对象Array

var arr2=new Array(3,4,5); //定义一个数组，把3，4，5传入进去


<script type="text/javascript">
//第二种
var arr1=new Array(3);
arr1[0]="a";
arr1[1]="b";
arr2[2]="c";
alert(arr1);
//第三种
var arr2=new Array(3,4,5);
alert(arr2);
</script>

***** 数组里面有一个属性：length获取数组的长度

var arr1=new Array(5); arr1.length为5；

*****js数组可以存储不同的数据类型

8.js的函数

****在java中定义方法

public +返回类类型+方法名称（参数列表）{

方法体；

返回值；

}

*****在js中定义函数（方法）有三种方法：

******函数的列表中不需要写var直接写变量名称

第一种方式：

****使用一个关键字：function

*****function 方法名（参数列表）{

方法体；

返回值可有可无；

}


<script type="text/javascript">
//使用function创建函数
function test(){
alert("qqqqq");
}
//调用方法
test();
//定义一个有参数的方法
function add1(a,b){
var sum=a+b;
alert(sum);
}
add1(2,3);
function add2(a,b,c){
var sum1=a+b+c;
return sum1;
}
alert(add2(2,3,4));
</script>

第二种方式：

******匿名函数

var add=function（参数列表）{

方法体和返回值；

}


<script type="text/javascript">
//第二种方式
//创建
var add3=function(m,n){
alert(m+n);
}
//调用
add3(1,2);
</script>

第三种方式（用的少）：

****使用js中的一个内置对象：Function

var add=new Function("参数列表"，"方法体和返回值");


<script type="text/javascript">
//第三种方式创建函数
var canshu="x,y";
var fangfati="var sum=x+y; return sum;"
var add4=new Function(canshu,fangfati);
alert(add4(1,2));
</script>

9.js的全局变量和局部变量

****全局变量：在script标签中定义一个变量，这个变量在页面中的js都可以使用

---可以在方法的内部使用，方法的内部使用，在另外一个script标签使用

<html>
<head>
<title>示例</title>
</head>
<body>
<script type="text/javascript">
var aa=10;
alert("在方法外部调用aa"+aa);
function test1(){
alert("在方法内部调用aa"+aa);
}
test1();
</script>
<script type="text/javascript">
alert("在另外一个script中使用aa"+aa);
</script>
</body>
</html>

*****局部变量：在方法内部定义的变量，只能在方法的内部使用

----局部变量只能在方法内部使用，如果在外部调用会报错