Javascript核心技术的基础语法

￡神魔★判官ぃ 2024-04-20 11:25 60阅读 0赞

## Javascript核心技术的基础语法 ##

### 一、什么是javascript ###

> Javascript是基于对象和事件驱动的脚本语言，主要是嵌入到HTML中，应用在客户端，动态操作网页元素，也可以作用于服务端。  
> 特点：  
> 交互性（表单校验，信息提示，动态数据图表，ajax异步提交，解析服务端响应数据等等）  
> 安全性（不可以直接访问本地硬盘）  
> 跨平台性（由浏览器解析执行，和平台无关）

### 二、Javascript vs Java ###

> JavaScript只需浏览器解析就可以执行，而java需要先编译成字节码文件，然后通过JVM来执行。  
> JavaScript 是一种弱类型语言，java是强类型语言。
> 
> 一个完整 JavaScript实现由以下3个部分组成
> 
> 1.核心技术：ECMAscript
> 
> 2.文档对象模型：DOM
> 
> 3.浏览器对象模型：BOM

### 三、javascript版的HelloWorld ###

> HTML 中的脚本必须位于 标签之间。
> 
> 脚本可被放置在 HTML 页面的 和 部分中

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			
    			//弹框
    			//alert("HelloWorld...1");
    			
    			//控制台
    			console.log("HelloWorld...1");
    		</script>
    	</head>
    	<body>
    		
    		<script type="text/javascript">
    			
    			//弹框
    			//alert("HelloWorld...2");
    			
    			//控制台
    			console.log("HelloWorld...2");
    		</script>
    	</body>
    </html>

### 四、定义变量 ###

> 弱类型 对比Java定义变量的区别

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>.
    		
    		<script type="text/javascript">
    			
    			var v = "abc";//v1 -- string类型
    			console.log(v);
    			
    			v = 123;
    			console.log(v);//v1 -- number类型
    		</script>
    	</body>
    </html>

### 五、基本数据类型 ###

#### 1.JavaScript 数字 ####

> JavaScript 只有一种数字类型。数字可以带小数点，也可以不带
> 
> var x1=34.00; //使用小数点来写
> 
> var x2=34; //不使用小数点来写

#### 2.JavaScript 字符串 ####

> 字符串是存储字符（比如 “Bill Gates”）的变量。
> 
> 字符串可以是引号中的任意文本。您可以使用单引号或双引号
> 
> var carname=“Bill Gates”;
> 
> var carname=‘Bill Gates’;
> 
> 单引号和双引号支持互相包含

#### 3.JavaScript 布尔 ####

> 布尔（逻辑）只能有两个值：true 或 false。
> 
> var x=true
> 
> var y=false

#### 4.undefined无定义 ####

> 访问一个不存在的变量或使用已声明但未赋值的变量，都会得到一个值undefined，undefined类型的值只有一个undefined

#### 5.Null空 ####

> 被赋予null值的变量通常认为已经定义了，只是不代表任何东西。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<script type="text/javascript">
    			
    			// number类型
    			var v1 = 123;
    			console.log(v1);
    			var v2 = 123.123;
    			console.log(v2);
    			
    			//string类型
    			var v3 = 'abc';
    			console.log(v3);
    			var v4 = "abc";
    			console.log(v4);
    			
    			//boolean类型
    			var v5 = true;
    			console.log(v5);
    			var v6 = false;
    			console.log(v6);
    			
    			//undefined类型
    			var v7 ;
    			console.log(v7);
    			var v8 = undefined;
    			console.log(v8);
    			
    			//null类型
    			var v9 = null;
    			console.log(v9);
    			
    		</script>
    	</body>
    </html>

### 六、基本数据类型的特殊点 ###

> 数字类型  
> 各种数字的结果都是number  
> typeof 123
> 
> Infinity  
> 用来代表超过了javascript处理范围的数值。  
> 1e308
> 
> 两个正无穷大相加会是一个什么结果？  
> 正负相加—NaN
> 
> 字符串  
> 字符串转换问题，字符串和数字类型进行数学运算的时候，除了加法运算以外，其他都会转换为数字类型
> 
> 布尔类型  
> 做逻辑的判断  
> 在javascript中，除了以下值，其他都是true  
> 空字符串“”  
> null  
> undefined  
> 0  
> NaN  
> false
> 
> 注意：NaN == NaN吗？如何正确判断是否为NaN  
> 比较运算符：  
> == vs ===  
> 通过typeof对比undefined和null的区别

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<script type="text/javascript">
    			
    			// number类型的特殊点
    			//Infinity -- 无穷大
    			console.log(Infinity + (-Infinity));//NaN - Not a Number
    			
    			//string类型的特殊点
    			//两个字符串除了+是拼接，其余的都是做运算
    		     var str1 = "10";
    		     var str2 = "5";
    		     console.log(str1 + str2);//105
    		     console.log(str1 - str2);//5
    		     console.log(str1 * str2);//50
    		     console.log(str1 / str2);//2
    		     console.log(str1 % str2);//0
    		
    			//boolean类型的特殊点
    			//0、""、undefined、null都认为是false	
    			
    			if (null) {
          
    				console.log("ture");
    			} else{
          
    				
    				console.log("false");
    			}
    			
    			//typeof -- 获取变量所属类型
    			console.log(typeof 123);//number
    			console.log(typeof "123");//string
    			console.log(typeof true);//boolean
    			
    			//undefined vs null
    			var v1 = undefined;
    			var v2 = null;//js认为v2是一个对象
    			console.log(typeof v1);//undefined
    			console.log(typeof v2);//object
    			
    			//== vs ===
    			//== 判断值
    			//=== 既判断值还判断类型
    			var v3 = 123;
    			var v4 = "123";
    			console.log(v3 == v4);//true
    			console.log(v3 === v4);//false
    		</script>
    	</body>
    </html>

### 七、数组 ###

> 创建一个数组
> 
> var arr = \[1,2,3\];
> 
> 更新数组的元素
> 
> 添加数组的元素
> 
> 删除数组的元素（delete arr\[1\],注意，此处只是将该元素留空，数组的长度并不会发生变化）
> 
> 数组的数组
> 
> var a = \[\[1,2,3\],\[4,5,6\]\];
> 
> 关注与Java不同的特性即可

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<script type="text/javascript">
    			
    			var arr = ["曹操","于禁 ","夏侯惇"];
    			
    			//设置指定下标上的元素
    			arr[2] = "曹丕";
    			
    			//添加元素
    			arr[3] = "曹植";
    			arr[4] = "吕布";
    			arr[10] = "貂蝉";
    			
    			//删除元素
    			delete arr[4];
    			
    			//循环数组 -- for循环
    			for(var i = 0;i<arr.length;i++){
          
    				console.log(arr[i]);//获取指定下标上的元素
    			}
    			
    			console.log("------------")
    			
    			//循环数组 -- for-in
    			//注意：遍历有效下标
    			for(var index in arr){
          
    				console.log(arr[index]);
    			}
    			
    			
    		</script>
    		
    		
    	</body>
    </html>

### 八、流程控制语句 ###

> If else  
> For  
> For-in(遍历数组时，跟Java是否一样)  
> While  
> Do while  
> break 语句用于跳出循环。  
> continue 用于跳过循环中的一个迭代

#### 1.求1-100之间的偶数之和 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			var sum = 0;
    			for(var i = 1;i<=100;i++){
          
    				if(i%2==0){
          
    					sum += i;
    				}
    			}
    			console.log(sum);
    			
    		</script>
    	</body>
    </html>

#### 2.我的梦想:第一个月存3000，每年递增1000，问多少个月后可以存到20万元 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			var allMoney = 0;
    			var money = 3000;
    			var month = 0;
    			while(allMoney<200000){
          
    				allMoney+=money;
    				month++;
    				if(month % 12 == 0){
          
    					money += 1000;
    				}
    			}
    			
    			console.log(month);
    		</script>
    	</body>
    </html>

//3.打印图形
        	//	*
    		//	**
    		//	***
    		//	****
    		//	*****

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			
    			for(var i =0;i<5;i++){
          
    				for(var j=0;j<=i;j++){
          
    					document.write("*");
    				}
    				document.write("<br/>");
    			}
    		
    //			document.write("<pre>第一个write"); 
    //			document.writeln("第一个writln"); 
    //			document.write("第二个write"); 
    //			document.writeln("第二个writln</pre>");
    			
    		</script>
    	</body>
    </html>

### 九、函数 ###

> JavaScript 函数语法  
> 1.函数就是包裹在花括号中的代码块，前面使用了关键词 function：  
> function functionname()\{  
> 这里是要执行的代码  
> \}  
> 当调用该函数时，会执行函数内的代码。
> 
> 2.调用带参数的函数  
> 在调用函数时，您可以向其传递值，这些值被称为参数。  
> 这些参数可以在函数中使用。  
> 您可以发送任意多的参数，由逗号 (,) 分隔：  
> myFunction(argument1,argument2)  
> 当您声明函数时，请把参数作为变量来声明：  
> function myFunction(var1,var2)\{  
> 这里是要执行的代码  
> \}
> 
> 3.带有返回值的函数  
> 有时，我们会希望函数将值返回调用它的地方。  
> 通过使用 return 语句就可以实现。  
> 在使用 return 语句时，函数会停止执行，并返回指定的值。  
> 语法  
> function myFunction()\{  
> var x=5;  
> return x;  
> \}  
> 上面的函数会返回值 5。
> 
> 4.案例：  
> 我们以实现一个求和函数为例来讲解基本的应用  
> 掌握javascript函数传参的特性  
> 掌握javascript的重载问题  
> 实现重载 arguments
> 
> 函数也是数据  
> 函数也是一种数据，我们可以把函数赋值给一个变量  
> var add = function(a,b,c)\{  
> return a+b+c;  
> \}

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			/**
    			 * 函数：相当于Java中的方法
    			 */
    			
    			//无参数无返回值的方法
    //			function fun01(){
          
    //				alert("无参数无返回值的方法");
    //			}
    //			fun01();
    			
    			//带参数的方法
    //			function fun02(a,b){
          
    //				var result = a+b;
    //				alert("带参数的方法 " + result);
    //			}
    //			fun02(10,20);
    			
    			
    			//带返回值的方法
    //			function fun03(a,b){
          
    //				return a+b;
    //			}
    //			var sum = fun03(10,20);
    //			sum = fun03(sum,30);
    //			alert(sum);
    
    			//JS中重载
    			//注意：JS中没有重载
    			function add(a,b){
          
    				return a+b;
    			}
    			function add(a,b,c){
          
    				return a+b+c;
    			}
    			
    			var sum = add(10,20);
    			alert(sum);
    		</script>
    	</body>
    </html>

### 十、系统提供的预定义函数 ###

> parseInt()：试图将其收到的任何输入值转换成整数类型，转换失败则返回NaN  
> parseFloat()：同上类似  
> isNaN(xxx)：判断是否为非数字  
> isFinite(xxxx)：判断输入的是否是一个既非Infinity也非NaN的数字  
> eval()：会将其输入的字符串当作javascript代码来执行

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			
    			//将字符串转型成整数
    			var num1 = parseInt("1000.123");
    			console.log(num1);
    			
    			//将字符串转换为小数
    			var num2 = parseFloat("1000.123");
    			console.log(num2);
    			
    			//判断字符串是否是非数字
    			console.log(isNaN("abc"));//true
    			
    			//判断字符串是否是数字
    			console.log(isFinite("123"));//true
    			
    			//将字符串认为是一段JS代码去运行
    			eval("alert('用良心做教育');");
    
    		</script>
    	</body>
    </html>