JavaScript简单介绍【接上day02(一)】
1、JavaScript的简介
* 是基于对象和事件驱动的语言，应用与客户端。
- 基于对象:提供的对象可直接拿过来使用
- 事件驱动:html做网站静态效果，JavaScript动态效果
- 客户端: 专门指的是浏览器
* JavaScrip的特点
(1)交互性:信息的动态交互
(2)安全性:js不能访问本地磁盘
(3)跨平台性：支持JavaScript的浏览器都可运行
* JavaScrip和Java的区别
(1)Java是sun公司，被oracle收购；js是网景公司
(2)JavaScript是基于对象，Java是面向对象
(3)Java是强类型的语言，JavaScript是弱类型的语言
- java int i = 10;
- js var i = 10; var m = "10";
(4)JavaScript只需要解析就可以执行，而Java需要先编译成字节码文件在执行
* JavaScrip组成(三部分)
(1)ECMAScript
- ECMA:欧洲计算机协会
- 有ECMA组织制定的js的语法，语句...
(2)BOM
- broswer object model:浏览器对象模型
(3)DOM
- document object model:文档对象模型
2、js和html结合方式(两种)
第一种
- 使用一个标签
<script type="text/javascript">
JavaScript代码;
</script>
e-image
第二种
- 使用script标签，引入一个外部的js文件
<script type="text/javascript" src="JavaScript文件路径" ></script>
**** 使用第二种就不需要再script标签里写代码，不会被执行
e-image
3、js的原始类型和声明变量
java：byte short int long float double char boolean
** js原始类型(五个)
- string:字符串
*** var str = "abc";
- number:数字类型
*** var m = 132;
- boolean:true or false
*** var flag = true;
- null
*** var date = new Date();
** 获取对象的引用,null表示对象引用为空，所有对象的引用也是object
- undifined
*** 定义一个变量没有被赋值
** var aa;
** typeof(变量名称);查看变量数据类型
e-code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js的数据类型</title> 6 </head> 7 <body> 8 </body> 9 <script type="text/javascript"> 10 // 定义一个字符串 11 var str="132"; 12 //alert(str); 13 14 // 定义数字 15 var mm=123; 16 //alert(mm); 17 18 // 定义boolean 19 var flag=true; 20 alert(typeof(flag)); 21 </script> 22 </html>
4、js语句
** if判断语句
** switch语句
** 循环语句 for while do-while
e-code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 </body> 9 <script type="text/javascript"> 10 // if语句 11 /*var a = 7; 12 if (a == 5) { 13 alert(a); 14 } else{ 15 alert("6"); 16 }*/ 17 18 // switch语句 19 /*var b=8; 20 switch (b){ 21 case 5: 22 alert(b); 23 break; 24 case 8: 25 alert(b); 26 break; 27 default: 28 alert("other"); 29 }*/ 30 31 // while循环 32 /*var i = 5; 33 while (i>1){ 34 alert(i); 35 i--; 36 }*/ 37 38 //for循环 39 for (var i=0;i<=3;i++) { 40 alert(i); 41 } 42 43 </script> 44 </html>
5、js的运算符
** 不区分整数和小数
// j/1000*1000 在Java里得到结果0
// 在js里不区分整数和小数，123/1000=0.123*1000=123
var j = 123;
alert(j/1000*1000);
** 字符串相加减操作
var str = "123"
** 相加时做字符串连接操作
** 相减时做减法运算
// 字符串的操作
var str="abc";// 提示NaN(表示不是一个数字)
alert(str+1);// 跟Java里一样，
alert(str-1);// 相减时，执行减法运算
** boolean操作
*** 设置成true，相当于这个值是1
*** 设置成false，相当于这个值是0
var flag = true;
alert(flag+1); // 2
var flag1 = false;
alert(flag1+1);// 1
** == 和 === 区别
== 比较只是值
=== 比较值和类型
var a="5";
if (a === "5") {
alert(a);
} else{
alert("other");
}
** 引入知识
直接向页面输出的语句(可把内容显示在页面上)
document.write("aaaa");
document.write("<br/>");
document.write("bbbb");
document.write("<hr/>");
** 可以向页面输出固定值和html代码
e-code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 </body> 9 <script type="text/javascript"> 10 var j = 123; 11 alert(j/1000*1000); 12 // j/1000*1000 在Java里得到结果0 13 // 在js里不区分整数和小数，123/1000=0.123*1000=123 14 15 16 // 字符串的操作 17 /*var str="abc";// 提示NaN(表示不是一个数字) 18 //alert(str+1);// 跟Java里一样， 19 alert(str-1);// 相减时，执行减法运算*/ 20 21 22 // boolean操作 23 /*var flag = true; // 等于1 24 alert(flag+1); 25 var flag1 = false; // 等于0 26 alert(flag1+1);*/ 27 28 29 // == 和 === 区别 30 /*var a="5"; 31 if (a === "5") { 32 alert(a); 33 } else{ 34 alert("other"); 35 }*/ 36 37 38 // document.write("aaaa"); 39 // document.write("<br/>"); 40 // document.write("bbbb"); 41 // document.write("<hr/>"); 42 43 </script> 44 </html>
6、练习 实现99乘法表输出到页面上
e-code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 </body> 9 <script type="text/javascript"> 10 document.write("<table border='1' bordercolor='blue'>"); 11 // 循环行 12 for (var i=1;i<=9;i++) { 13 document.write("<tr>"); 14 // 循环列 15 for (var j=1;j<=i;j++) { 16 document.write("<td>"); 17 // 运算 18 document.write(j+"*"+i+"="+i*j); 19 document.write("</td>"); 20 } 21 document.write("</tr>"); 22 } 23 document.write("</table>") 24 </script> 25 </html>
e-image
7、js数组
* 定义数组方式(三种)
第一种:var arr=[1,2,3]; var arr=[1,"2",true];
第二种:使用内置对象 Array对象
var arr1 = new Array(3);//定义长度为3的数组
arr1[0]="a";
arr1[1]="b";
arr1[2]="c";
第三种:使用内置对象 Array
var arr2 = new Array(2,4,5);//定义数组并直接赋元素
* 测试数组长度:length => alert(arr2.length);
* 数组可存放不同数据类型的数据
e-code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 </body> 9 <script type="text/javascript"> 10 // 定义数组第一种方式 11 /*var arr=[1,2,"3"]; 12 alert(arr);*/ 13 14 // 定义数组第二种方式 15 var arr1 = new Array(3); 16 arr1[0]="a"; 17 arr1[1]="b"; 18 arr1[2]="c"; 19 //alert(arr1); 20 21 // 第三种方式定义数组 22 var arr2 = new Array(2,4,5); 23 alert(arr2); 24 alert(arr2.length); 25 </script> 26 </html>
8、js函数(三种方式)
**** 函数的参数列表里不需要写var，直接写参数名称
第一种:
*** 使用关键字function
*** function 方法名(参数列表){
方法体;
返回值;//可有可无(根据实际需求)
}
e-image
// 定义一个有参的方法,实现两个数相加
e-image
//有返回值得效果
e-image
第二种:
*** 匿名函数
var add = function(参数列表){
方法体和返回值;
}
e-image
第三种:(用的少，了解)
*** 使用到js里面的一个内置对象 Function
var add = new function("参数列表","方法体和返回值");
**** -code
// 第三种方式创建
var add4 = new Function("x,y","var sum;sum=x+y;return sum;");
alert(add4(3,5));
-------------------------------------------------------------
e-image
9、js全局变量和局部变量
** 全局变量:在script标签里定义一个变量，这个变量在页面中js部分都可以使用
- 在方法外部使用，在方法内部使用，在另一个script标签使用
e-code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 </body> 9 <script type="text/javascript"> 10 var a=2018; 11 alert("在方法体外部调用a:"+a); 12 function test() { 13 alert("在方法体内部调用a:"+a) 14 } 15 test(); 16 </script> 17 <script type="text/javascript"> 18 alert("在另一个script标签使用:"+a) 19 </script> 20 </html>
** 局部变量:在方法内部定义一个变量，只能在方法内部使用
- 如果在方法外部调用这个变量，提示出错
- SCRIPT5009:"n"未定义
- IE自带调试工具，ie8及其上的版本。F12
e-code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 </body> 9 <script type="text/javascript"> 10 function test () { 11 var n=10; 12 alert("在方法内部:"+n); 13 } 14 test(); 15 alert("方法外部:"+n);//报错，并没有I定义 16 </script> 17 </html>
10、函数的重载
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 </body> 9 <script type="text/javascript"> 10 function add (a,b) { 11 return a+b; 12 } 13 function add (a,b,c) { 14 return a+b+c; 15 } 16 function add (a,b,c,d) { 17 return a+b+c+d; 18 } 19 20 alert(add(2,2));// NaN 21 alert(add(3,2,2));// NaN 22 alert(add(2,3,4,2));// 11 23 24 </script> 25 </html>