1.JavaScript的简介
***基于对象和事件驱动的语言,应用于客户端
----基于对象:提供很多的对象,可以直接拿过来使用
-----事件驱动:html是静态的网页,JavaScript实现动态网页
-----客户端:专门指的是浏览器
***JavaScript的特点
(1)交互性:信息的动态交互
(2)安全性:JavaScript不能访问本地磁盘的文件
(3)跨平台性:java利用jvm实现跨平台,支持js的浏览器都可以
*****java和JavaScript的区别(雷锋和雷峰塔)
(1)java是sun公司,现在是oracle
(2)js是基于对象,java是面向对象的
![](/qrcode.jpg)
(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 tyoe="text/javascript">
//向页面弹出来一个框
alert("aaaa");
</script>
第二种:
--使用script标签,引入一个外部js文件
*****创建一个js文件,写入js代码
<script tyoe="text/javascript" src="1.js">不要写js代码</script>
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中不区分整数和小数
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>
*****局部变量 :在方法内部定义的变量,只能在方法的内部使用
----局部变量只能在方法内部使用,如果在外部调用会报错
10.script标签的位置
******建议把script标签放在</body>的后面
*******如果现在有这样一个需求:
在js里面需要获取input里面的值,如果把script标签放到head里面会出现问题
html解析是从上到下解析的,script标签放到的是head里面,直接在里面取input里面的值,
因为页面还没有解析到input那一行,肯定取不到。
11.js的重载
****什么是重载?方法名形同,参数列表不同
---java里面有重载,肯定有
*****js里面是否有重载?