26.Java与JavaWeb（三）【Java学习笔记Hatter】Java开发工程师
JavaScript
1.概述
（1）是基于对象和事件驱动的语言，应用于客户端。
基于对象：提供了很多对象可直接拿过来用
事件驱动：html做网站静态效果，JavaScript动态效果
客户端：指浏览器.
（2）特点：
①交互性：信息的动态交互
②安全性：js不能访问本地磁盘的文件
③跨平台性：只要能够支持js的浏览器，都可以运行
（3）js与Java的区别
①Java是sun公司，现在是oracle；js是网景公司
②Java是面向对象，js是基于对象
③Java是强类型的语言，js是若类型的语言
如：在Java中，int i="10" ×
在JavaScript中，var i=10; var m="10"; √
④Java需要先编译为字节码文件，再执行。而js只需要解析就能够执行
（4）JavaScript组成
①ecmascript：js基本语法
②BOM：浏览器对象模型
③ROM：文档对象模型
2.js与html的结合方式
（1）使用一个标签
<scripe type="text/javascript">
js代码;
</script>
alter()向页面弹出一个框，显示内容
（2）使用script标签，引入一个外部的js文件
创建一个js文件，写js代码：
alert("abcdefg");
html文件引入js文件：
<html>
<head>
<title>js2</title>
</head>
<body>
<script type="text/javascript" src="JS2.js"></script>
</body>
</html>
注意：使用第二种方式的时候，就不需要再script标签里写js代码，也不会执行。
3.js的原始类型与声明变量
定义变量都是有关键字var
原始类型：5个
（1）string：字符串：var str="abc";
（2）number：数字型：var m=123;
（3）boolean：true和false：var flag=true;
（4）null：获取对象的引用，null，表示对象引用为空，所有对象的引用也是object
var date=new Date();
（5）undifined
定义一个变量，没有赋值。
var a;
typeof(变量名称);查看当前变量的类型
4.js的语句
（1）if判断语句
例：
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var a=10;
if(a==5){
alert("5");
}else{
alert("6");
}
</script>
</body>
</html>
（2）switch语句（Java里面支持的数据类型，string都支持）
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var b=3;
switch(b){
case 3 :
alert("3");
break;
case 6:
alert("6");
break;
default:
alert("other");
</script>
</body>
</html>
（3）循环语句for while do-while
<body>
<script type="text/javascript">
var i=5;
/*while循环
*/
while(i>1){
alert(i);
i--;
}
/*for循环
*/
for(var m=0;m<=5;m++)
{
alert(m);
}
</script>
</body>
4.js的运算符
在js里面不区分整数和小数
（1）字符串操作
<body>
<script type="text/javascript">
var str="abc";--这个时候会提示NaN：表示不是一个数字
alert(str+1);---结果是3451
alert(str-1);-相减时，执行减法的运算。
</script>
</body>
（2）boolean类型
<body>
<script type="text/javascript">
var flag=true;--flag等于1
alert(flag+1);
var flag=false;--flag等于0
alert(flag+1);
</script>
</body>
（3）==与===区别
==：比较的只是值
===：比较的是值和类型
（4）把内容显示在页面上，直接向页面输出的语句
document.write("<hr/>");
document.write("aaa");
例：9×9乘法表
循环9行，每行里面循环列
<html>
<head>
<title>9×9乘法表</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
document.write("<table>");
//循环行9
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里是双引号，若设置标签的属性需要使用单引号
5.js的数组
定义方式（三种）
（1）var arr=[1,2,3,"4",true];
（2）使用内置对象Array
var arr=new Array[4];
arr[0]="1"--赋值
（3）使用内置对象Array
var arr=new Array（3.4.5）
length获取到数组的长度，数组的长度
6.js的函数
三种方式
（1）使用到一个关键字function
function 方法名（参数列表）{
方法体；
返回值可有可无；
}
function add(a,b,c){
var sum=a+b+c;
return sum;
}
alert(add(3,4,5));
（2）匿名函数
var 起的名字 function (参数列表){
方法体与返回值
}
<body>
<script type="text/javascript">
var add =function (a,b){
alert(a+b);
}
add(3,4);
</script>
</body>
（3）使用到js里面的一个内置对象：Function(不常用)
动态函数
var add=new Function("参数列表","方法体与返回值");
<body>
<script type="text/javascript">
var add=new Function("x,y","var sum;sum=x+y;return sum");
alert(add(3,4));
</script>
</body>
7.js的全局变量与局部变量
全局变量：在script标签里定义一个变量，这个变量在页面中js部分都可以使用
例：
<body>
<script type="text/javascript">
var a=10;
alert("在方法外部调用a："+a);
function test1(){
alert("在方法内部调用a："+a);
}
test1();
</script>
<script type="text/javascript">
alert("在另外一个script标签使用："+a);
</script>
</body>
局部变量：在方法内部定义一个变量，只能在方法内部使用
若是在方法的外部调用这个变量，提示出错
例：
<body>
<script type="text/javascript">
function test(){
var a=10;
alert("在方法内部："+a);
}
test();
alert("在方法外部："+a);
</script>
</body>
script标签的位置存放原则：建议将script标签放在</body>之后，若现在有这样一个需求：
在js里需要获取到input里的值，若把script标签放到head里面，就会出现问题。
html解析是从上到下解析的，script标签放到 的是head里，直接在里面去input里面的值，因为页面还没有解析到input一行，肯定是取不到的。
1914篇文章
