1、 JavaScript介绍
Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行JavaScript代码。
Js是Netscape网景公司的产品,最早取名为LiveScript;为了吸引更多java程序员。更名为JavaScripto
Js是弱类型,Java是强类型。
弱类型就是类型可变。
强类型,就是定义变量的时候。类型已确定。而且不可变。
inti=12;
vari; i=12;
数值型
i="abc1
字符串类型|
特点:
1.交互性(它可以做的就是信息的动态交互)
2.安全性(不允许直接访问本地硬盘)
3.跨平台性(只要是可以解释s的浏览器都可以执行,和平台无关)
2、 JavaScript和html代码的结合方式
2.1、第一种方式
只需要在head标签中,或者在body标签中,使用script标签来书写JavaScript代码
工
01-helllo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //alert是javascript语言提供的一个警告型函数。 //它可以接受任意类型的参数 ,这个参数就是警告框提示信息 alert("hello javascript"); </script> </head> <body> </body> </html>
2.2、第二种方式
使用script标签引入单独的JavaScript代码文件
1.js
alert("1125 hello!")
02-helllo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 现在需要使用script引入外部的js文件来执行 src属性专门用来引入结束文件路径(可以使相对路径,也可以是绝对路径) script标签可以用来定义结束代码,也可以用来引入js文件 但是,两个功能二选一使用,不能同时使用两个功能 --> <script type="text/javascript" src="1.js"></script> <script type="text/javascript">alert("国哥可以帅了")</script> </head> <body> </body> </html>
3、变量
什么是变量?
变量是可以存放某些值的内存的命名。
javascrpt的变量类型:
数值类型:number
字符串类型:string
对象类型:object
布尔类型:boolean
函数类型:function
JavaScript里特殊的值: undefined
未定义,所有js变量未赋于初始值的时候,默认值都是undefined.
null 空值
NAN 全称是:Not a Number。非数字。非数值。
JS中的定义变量格式:
var 变量名 ;
var 变量名=值;
03-变量.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变量</title> <script type="text/javaScript"> var i; alert(i);//undefined i=12; //typeof是javascript语言提供的一个函数 // alert(typeof (i));//number //它可以取数据的类型返回 alert(typeof (i));//number i="abc"; alert(typeof (i));//String var a=12; var b="abc"; alert(a*b);//NAN 非数字 </script> </head> <body> </body> </html>
4、关系(比较)运算
等于:==
等于是简单的做字面值的比较
全等于:===
除了做字面值的比较之外,还会比较两个变量的数据类型
04-关系运算.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var a="12"; var b=12; alert(a==b);//true alert(a===b);//false </script> </head> <body> </body> </html>
5、逻辑运算
且运算: &&
或运算: ||
取反运算: !
在Jascript语言中,所有的变量,都可以做为一个boolean类型的变量使用
0、null、 undefined、"空串)都认为是false;
&& 与运算。
有两种情况:
第一种:当表达式全为真的时候。返回最后一个表达式的值。
第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值
|| 或运算
第一种情况:当表达式全为假时,返回最后一个表达式的值
第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值
并且8&与运算和||或运算有短路。
短路就是说,当这个&&或||运算有结果了之后。后面的表达式不再执行
var a = "abc"; var b = true; var d = false; var c = null;
05-逻辑运算.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /*在java语言中所有的变量都可以作为一个boolean类型去运算 0 、null、""(空串)都是false*/ // var a=0; // if (a){ // alert("0为真"); // }else { // alert("0为假"); // } // 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(a&&b);//true // alert(b&&c);//abc // alert(a&&d);//false // alert(a&&c);//null alert(a&&d&&c);//false /* ||或运算 有两中情况 第一种:当表达式全为假时,返回最后一个表达式的值 第二中:当表达式中,有一个为真,返回第一个为真的值 */ // alert(d||c);//null // alert(c||d);//false alert(a||c);//abc alert(b||c);//true </script> </head> <body> </body> </html>
6、数组
数组定义方式
JS中数组的定义:
格式:
var数组名=[];//空数组
var数组名=[1,‘abc’ true];//定义数组同时赋值元素
06-数组.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var arr=[true];//定义一个空数组 // alert(arr.length);//0 arr[0]=12; // alert(arr[0]);//12 // alert(arr.length);//1 //javaScript语言中的数组,只要我们通过数组下标赋值,就会自动个数组作扩容操作 arr[2]="abc"; // alert(arr.length);//3 alert(arr[1]);//undefined //数组的遍历 for (var i=0;i<arr.length;i++){ alert(arr[i]); } </script> </head> <body> </body> </html>
7、函数
7.1、函数的二种定义方式
第一种,可以使用function关键字来定义函数。 使用的格式如下:
function 函数名(形参列表){ 函数体 }
在JavaScript语言中,如何定义带有返回值的函数?
只需要在还数体内直接使用return语句返回值即可!
07-函数的第一种定义方式.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //定义一个无参函数 function fun() { alert("无参函数fun()被调用了") } //函数调用才会执行 // fun(); function fun2(a, b) { alert("有参函数fun()被调用了 a=>"+a+"b=>"+b); } // fun2(12,"abc"); //定义带有返回值的函数 function sum(num1,num2) { var result=num1+num2; return result; } alert(sum(100,50)) </script> </head> <body> </body> </html>
函数的第二种定义方式。
格式如下
var 函数名 =function (形参列表){ 函数体 }
08-函数的第二种定义方式.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var fun=function () { alert("无参函数") } // fun(); var fun2=function (a,b) { alert("有参函数a="+a+"b="+b); } fun2(1,2); var fun3=function (num1,num2) { return num1+num2; } alert(fun3(100,200)); </script> </head> <body> </body> </html>
注:在Java中函数允许重载。但是在JS中函数的重载会直接覆盖掉上一次的定义
09-js不允许重载.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function fun() { alert("无参函数fun()"); } function fun(a,b) { alert("有参函数fun(a,b)"); } fun(); </script> </head> <body> </body> </html>
7.2、函数的arguments隐形参数(只在function函数内)
就是在function函数中不需要定义,但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。 隐形参数特别像java基础的可变长参数一样。
public void fun (object…args);
可变长参数其他是一个数组。
那么js中的隐形参数也跟java的可变长参数一样。操作类似数组。
10-隐形参数arguments.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function fun(a) { // alert(arguments.length);//查看参数个数 alert(a); for (var i=0;i<arguments.length;i++){ alert(arguments[i]); } alert("无参函数fun()"); } // fun(1,"ad",true); //需求:定义一个函数,返回所有参数的和 function sum(num1,num2) { var result=0; for(var i=0;i<arguments.length;i++){ if(typeof (arguments[i]) =="number") result+=arguments[i]; } return result ; } alert(sum(1,2,3,4,"abc",5,6,7,8,9));//10abc56789 </script> </head> <body> </body> </html>