JavaScript介绍:
1.Javascript语言诞生主要是完成页面的数据验证。
2.它运行在客户端,需要运行浏览器来解析执行JavaScript代码。
3.JS是Netscape网景公司的产品,最早取名为LiveScript;为了吸引更多java程序员。更名为javascript。
4.JS是弱类型,Java是强类型。
JavaScript特点:
1.交互性(它可以做的就是信息的动态交互)
2.安全性(不允许直接访问本地硬盘)
3.跨平台性(只要是可以解释Js的浏览器都可以执行,和平台无关)
JavaScript和html代码的结合方式
第一种方式
只需要在head 标签中,或者在body标签中, 使用script 标签 来书写JavaScript代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- script 里面就是js代码 --> <script type="text/javascript"> // alert 是 js的警告框函数 // 它可以接收任意类型的参数,你给它传什么,它就弹出来什么 alert("js hello"); </script> </head> <body> </body> </html>
第二种方式
使用Script 标签引入 单独的JavaScript代码文件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- script标签可以用来定义js代码,也可以用来引入单独的js文件 src属性 设置需要引入的js的文件路径(相对路径或绝对路径) 一个script标签只能做一件事情 。要么用来定义js代码,要么用来引入js文件 --> <script type="text/javascript" src="1.js"></script> <script type="text/javascript"> alert(2222); </script> </head> <body> </body> </html>
变量
什么是变量?
变量是可以存放某些值的内存的命名。
javaScript的变量类型:
数值类型: number int short long float double byte
字符串类型: string
对象类型: object
布尔类型: boolean
函数类型: function
javascript里特殊的值:
undefined 未定义 所有未赋初始化的变量,默认值都是undefiend
null 空值
NAN not a number 非数值,非数字(做非法算术运算时,就会返回NAN)
JS中的定义变量格式:
var 变量名;
var 变量名 = 值;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var i ; // alert(i);// undefiend i = 12 ; // typeof是一个函数。可以取变量的数据类型 // alert( typeof(i) );// number i = "this is good boy!"; alert( typeof(i) );//string </script> </head> <body> </body> </html>
关系(比较)运算
等于: ==
全等于: ===
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var a = 12; var b = "12"; // js中的等于,只是简单的做字面值的比较 // alert( a == b );// true // 全等于,除了做字面值的比较之外,还会检查两个变量的数据类型 alert( a === b );//false </script> </head> <body> </body> </html>
逻辑运算
且运算: &&
或运算: ||
取反运算: !
0 、null、 undefined、””(空串) 都认为是 false;
&& 与运算。
有两种情况:
第一种:当表达式全为真的时候。返回最后一个表达式的值。
第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值
|| 或运算
第一种情况:当表达式全为假时,返回最后一个表达式的值
第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值
并且 && 与运算 和 ||或运算 有短路。
短路就是说,当这个&&或||运算有结果了之后 。后面的表达式不再执行
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> // 0 、null、 undefined、””(空串) 都认为是 false; // var a = 0; // if ( a ) { // alert("零为真"); // } else { // alert("零为假"); // } // var b = null; // if ( b ) { // alert("null为真"); // } else { // alert("null为假"); // } // var c = undefined; // if ( c ) { // alert("undefined为真"); // } else { // alert("undefined为假"); // } // var d = ""; // if ( d ) { // alert("空串为真"); // } else { // alert("空串为假"); // } var a = "abc"; var b = true; var d = false; var c = null; // && 与运算。 // 有两种情况: // 第一种:当表达式全为真的时候。返回最后一个表达式的值。 // alert( b && a );//abc // alert( a && b );//true // 第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值 // alert( d && c ); // false // alert( a && c ); // null // || 或运算 // 第一种情况:当表达式全为假时,返回最后一个表达式的值 // alert( d || c ); // null // alert( c || d ); // false // 第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值 // alert( b || c ); // true // alert( d || a ); // abc </script> </head>
数组
数组定义方式
Js 中 数组的定义:
格式:
var 数组名 = []; // 定义一个空数组
var 数组名 = [ 值1,值2,值3 ]; // 定义数组同时赋初始值
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> // Js 中 数组的定义: // 格式: // var 数组名 = []; // 定义一个空数组 var arr = []; // alert( arr.length ); //0 arr[0] = 12; // 通过数组下标给元素赋值 // alert( arr[0] );//12 // alert( arr.length );//1 // js的数组在通过下载赋值的时候,会自动的根据最大下标 做扩容操作。 arr[2] = "abc"; // alert( arr.length ); //3 // alert( arr[1] ); //undefined // 数组的遍历 // for (var i = 0; i < arr.length; i++) { // alert( arr[i] ); // } // var 数组名 = [ 值1,值2,值3 ]; // 定义数组同时赋初始值 var arr2 = [12,"abc",true]; // alert(arr2.length); // 3 arr2[9] = 12; alert(arr2.length); </script> </head>
函数:
函数的二种定义方式
函数的第一种定义方式,使用function关键字进行定义函数。
格式如下:
function 函数名(形参列表){
函数体
}
如何访问函数:
函数名( 实参列表 );
如何定义带有返回值的函数?
答:只需要在函数体内直接使用return语句返回值即可。
<script type="text/javascript"> // 格式如下: // function 函数名(形参列表){ // 函数体 // } // 无参函数定义 // function fun(){ // alert("无参函数被调用了"); // } // 有参函数 // function fun2( a , b ){ // alert("有参函数被调用 a=>" + a + ",b=>" + b); // } // 带有返回值的函数定义 function sum( num1, num2 ){ return num1 + num2; } // 如何访问函数: 函数名( 实参列表 ); // alert( sum("abc",100) ); </script>
函数的第二种定义方式是:
var 函数名 = function(参数列表){函数体}
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var fun = function(num){ alert("函数第二种定义方式 : " + num); } fun(123); </script> </head>
注:在Java中函数允许重载。但是在Js中函数的重载会直接覆盖掉上一次的定义
<script type="text/javascript"> function fun(a,b){ alert(a); alert(b); alert("有参函数被调用"); } function fun(){ alert("无参函数被调用"); } fun(12,"abc",true); </script>
函数的 arguments 隐形参数(只在function函数内)
可变长参数:public void fun( int a , Object … args )……
args就是可变长参数
它本身是一个数组。
js中函数自带有一个隐形参数arguments ,基本上使用跟java的可变长参数一样。
都是用来接收任意多个参数。它的使用跟数组一样。
<script type="text/javascript"> function fun(a,b){ alert(a); alert(b); alert("有参函数被调用"); } function fun(pa,pb){ alert( arguments.length );//3 alert( arguments[0] );//12 alert( arguments[1] );//abc alert( arguments[2] );//true alert("====================="); alert( pa );//12 alert( pb );//abc alert("无参函数被调用"); } // fun(12,"abc",true); //需求:现在需要有一个方法,可以计算传递进来的所有参数(只相加数字)相加的和并返回 function sum(){ var result = 0; for (var i = 0; i < arguments.length; i++) { if ( typeof(arguments[i]) == "number" ) { result += arguments[i]; } } return result; } alert( sum(100,"abc",100,1000) ); </script>