js基本语法

痛定思痛。 2024-04-17 23:15 57阅读 0赞

#### js可以存在的位置 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>hello</title>
    		
    		
    		
    		
    		
    		
    	</head>
    	
    	<body>
    		
    		<p onclick="alert('点我干啥')">点我</p>
    		
    	</body>
    </html>

#### 变量的声明 ####

js 中变量的声明 弱语言 不用声明数据类型  
都是使用关键字 var 来声明变量

var a = 12; //数字 
    		var b = "张三";
    		var c = new Date();
    		console.log(a); // 控制台打印
    		console.log(b); // 控制台打印
    		console.log(c); // 控制台打印
    		
    		var d;
    		console.log(d);// 定义了变量没有赋值是 undefined
    		
    		// 全局变量 
    		var  num = 100;
    		
    		//定义一个方法 
    		function test(){
        
    			//局部变量  
    			var num = 200;
    			console.log(num);
    		}

#### js中数据类型 ####

js中 有6个 数据类型  
1.undefined 定义了变量 没有赋值  
2.null 赋值为null  
3.boolean 数据类型 只有 : true 和 false  
4.string 字符类型 “” ‘’ 可以双引号 可以单引号  
5.number 数字类型 (整数/小数/ NaN(not a number) / 无穷大)

var n1 = 12;
    		var n2 = 3.14;
    		
    		// 把字符串转成 数字
    		var n3 = parseInt("abc123"); // 不能转  结果NaN 赋值给变量n3 
    		var n4 = n1 / 0; // 无穷大

6.obj类型 对象 常见的对象 Date Array …

#### 内置函数 typeof 和 installof 一样的类型判断 ####

console.log(typeof obj1);
    		console.log(typeof str1);
    		console.log(typeof n2);

#### 数据类型转换 ####

// 数据转成  number 类型
    		
    		var a = false;
    		console.log(Number(a)); //false  转成 0 true 转成1
    		
    		var b = "1234"; // 可以直接转成 数字 10进制
    	
    	    // 可以不转成字符串 
    
            // 转成boolean 值 
    		// false：false、””、0、NaN、null、undefined， 转为false

// 自动类型转换 
    		var a = true; 
    		// 加法元素  true 转了 1 之后相加 
    		console.log(a + a + a);
    		
    		// true + 字符串 把 true转成了 "true"
    		console.log(a + "hello");
    		
    		// "123" 和  123 进行判断  他会自动类型转换 
    		if("123" == 123){
         // 字符转成数字 判断 
    			console.log("自动类型转换...");
    		}
    		
    		// false - > 0
    		console.log(false + 2);
    		var a = null;
    		if(!a){
        
    			console.log("null 转成了 false")
    		}
    		
    		var b;
    		if(!b){
        
    			console.log("undefined  转成了 false")
    		}

#### === 与 ==的区别 ####

// === 判断类型  在比较值  
    
    		var a = "123";
    		var b = 123;
    
    		if(a === b) {
        
    			console.log("a和b一样");
    		} else {
        
    			console.log("a和b不一样一样");
    		}
    
    		// == 会自动转换 在比较值   如果是数字 默认调用number 再比较值
    		if(a == b) {
         
    			console.log("a和b值一样");
    		} else {
        
    			console.log("a和b值不一样");
    		}

#### this 介绍 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<script>
    			
    			var age = 20;
    			
    			// this对象是当前的 调用对象    windom对象 
    			console.log(this.age);
    			// 通过对象调用属性  window 
    			console.log(window.age);
    			
    			function test(){
         
    				var age = 40;
    				// this 是window 对象  this.age 是window的属性  
    				console.log(age);
    			}
    
               // 那个对象调用 test  window 对象调用的test  
               test();
    			
    		</script>
    		
    	</body>
    </html>

#### js中数组 ####

//数组的创建 
    		// 方式1  new Array();
    		var arr1 = new Array();
    		arr1[0] = "深圳";
    		arr1[1] = "广州";
    		arr1[2] = "武汉";
    		
    		// 方式2  创建的时候 给长度 
    		var arr2 = new Array(5);
    		
    		// 方式3  可以直接给数组的内容 (java 中静态赋值 )
            var  arr3 = ["马化腾","雷军","李彦宏","马云"];
    	    //打印长度 
    	    console.log(arr1.length); 
    	    //取值 
    	    console.log(arr1[0]);
    	    
    	    // 创建的时候给长度 
    	    console.log(arr2.length);
    		
    		   //打印长度 
    	    console.log(arr3.length); 
    	    //取值 
    	    console.log(arr3[1]);
    	    
    	    // 和java 不一样 js 中数组长度是 可变的 
    	    arr1[3] = "上海";  //数组的长度改变了 
    	    arr1[4] = 23;  // 数组可以添加不同类型的 元素 
    	    console.log(arr1.length); // 长度是 5  
    	    console.log(arr1[4]); //  获取的是 23

#### js的数组的方法 ####

// concat() 合并两个数组 
    			var a1 = ["a", "b"];
    			var a2 = ["java", "android"];
    
    			console.log(a1.concat(a2));
    
    			// join() 方法将数组的所有元素组成一个字符串
    
    			console.log(a1.join());
    
    			// sort() 排序 
    			var nums = [23, 10, 5, 12];
    
    			function sortNumber(a, b) {
        
    				return a - b
    			}
                // 把内容转成 字符串 要自己写 排序笔记规则 
                
                //sortNumber()  执行这个函数 
                
                //sortNumber  把函数对象 作为一个参数 使用 
                // sort() 要自己写排序规则 
    			nums.sort(sortNumber);
    			console.log(nums);
    			
    			var num2 = ["34","2","5","10"];
    			//按照数值的大小对数字进行排序，要实现这一点，就必须使用一个排序函数：
    			// 如果要排序 要实现自己的 排序函数
    			console.log(num2.sort());
    			
    			console.log("遍历....");
    			// 遍历
    			for(var i = 0;i < num2.length ; i ++ ){
        
    				console.log(num2[i]);
    			}

#### 函数 ####

/**
    		 *  语法 : 
    		 *    function 定义函数的关键字 
    		 *    function 函数名(参数列表){
    		 * 	      // 方法体 
    		 *    }
    		 */
    		// 定义 一个 没有参数的函数 
    		function fun1() {
        
    			console.log("我是fun1 函数...")
    		}
    
    		//定义 一个有参数的函数  js 变量的声明 都是var 类型 
    		// 函数参数列表中可以省略
    		function fun2(a, b) {
        
    			console.log(a + b);
    		}
       
            // 有返回值的函数 
            function fun3(a,b){
        
            	return a + b;
            }
    
    		//函数的调用   函数名(); 
    		fun1();
    		
    		// 调用函数传参
    		fun2(2,3);
    		
    		// 调用有返回值的函数
    		var result =fun3(3,10);
    		console.log(result);

//定义一个函数 
    		//  = 右边是 函数的一个实例 
    		// = 左边 是变量 
    		// 函数值赋值到变量  变量是函数对象引用  
    		var fun1 = function(){
        
    			console.log("函数1");
    		}
    		
    		//函数的调用 方法名();
            fun1();		
            // 判断类型  类型是 function (function 是 obj的一种)
            console.log(typeof fun1); 
    		
    		console.log(fun1); // 函数的具体实现 
    		
    		// 可以把 函数作为 一个参数进行传递 
    		
    		//  a 是个 参数
    		//  obj 可以传递一个 函数
    	    function test01(a,obj){
        
    	    	obj(a);
    	    }
    	    
    	    //调用test01() 方法 
    	    
    	    var a = "我是参数 ....";
    	    
    	    var fun1 = function(a){
        
    	    	console.log(a);
    	    }
    	    
    	    test01(a,fun1);

#### 内置函数 ####

//使用eval(String str)来执行javascript代码
    			eval('var a = 20;'); // 可以解析json 
    			console.log(a);
    			
    			// 数据类型转换 
    			var b = parseInt("23");
    			console.log(b);
    			var c = "agc";
    			console.log(isNaN(c));

#### 事件 ####

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    
    	<style>
    		div {
         
    			width: 100px;
    			height: 100px;
    			background-color: red;
    		}
    	</style>
    
    	<body onload="myLoad()">
    		
    		
    		<button ondblclick="shuangJi()"> 双击 点我 </button>
    
    		<div onmouseover="enter()" onmouseout="leave()"></div>
    
    		
    		输入内容 :<input onblur="myBlur(this)" name="aa" />
    
    		<select onchange="myChange(this)">
    
    			<option value="上海">
    				上海
    			</option>
    			<option value="北京">
    				北京
    			</option>
    			<option value="天津">
    				天津
    			</option>
    
    		</select>
    
    		<script>
    			
    			function myLoad(){
         
    				
    				alert("加载初始化数据...");
    				
    			}
    			
    			function myChange(obj){
         
    				
    				// select  选中的值  value
    				//      选中的下标  selectedIndex
    				console.log(obj.value + "-->" + obj.selectedIndex);
    				
    			}
    			
    			
    			function myFocus() {
         
    
    				alert("获取焦点");
    
    			}
    
    			function myBlur(obj) {
         
    				// obj.value 或群input 对象输入的值 
    				alert("失去焦点" + obj.value);
    			}
    
    			function enter() {
         
    				console.log("进来了");
    			}
    
    			function leave() {
         
    				console.log("离开了...");
    			}
    
    			function dianWo() {
         
    				alert("别点我");
    			}
    
    			function shuangJi() {
         
    				alert("双击");
    			}
    		</script>
    	</body>
    
    </html>

#### event对象 ####

<body>
    		
    		<div onmousemove="funMouseMove(event)">
    
    		</div>
    
    		<script>
    			function funMouseMove(event) {
         
    				var eve = event || window.event;
    				var x = eve.x || eve.pageX;
    				var y = eve.y || eve.pageY;
    				console.log(x + "---" + y);
    			}
    		</script>
    
    	</body>

#### date对象 ####

// date 对象初始化 
    			var date = new Date();
    			console.log(date);
    			
    			// date类型的方法
    			console.log(date.getYear());
    			console.log(date.getMonth());
    			console.log(date.getDate());
    //			console.log(date.getDay()); // 周几
    			console.log(date.getHours());
    			console.log(date.getMinutes());
    			console.log(date.getMinutes());
    			
    			// 转成 本地的时间 的字符串 
    			console.log(date.toLocaleDateString())

#### math对象 ####

// math 类 
    			
    			console.log(Math.abs(-8)); //绝对值 
    			
    			console.log(Math.sqrt(9)); //开方  
    			
    			console.log(Math.ceil(4.8)); //  5  对数进行上舍入
    			console.log(Math.floor(3.8)); // 3  向下取整
    			
    			// 随机数 
    			Math.random(); // 返回值是  [0,1)
    			
    			// 随机 0 - 5 ; 
    			Math.random() * 6; // 【0-5.99999】
    		
    //			for(var i = 0 ; i<=10;i++){
        
    //					var num = Math.floor(Math.random() * 6);
    //				console.log(num);
    //			}
    //			
    			// 随机数  5 -10 
    			// 随机 0 - 5  之后再 加  5 
    			for(var i = 0 ; i<=10;i++){
        
    			    var num = Math.floor(Math.random() * 6) + 5;
    				console.log(num);
    			}

#### 字符串对象 ####

//方式1  字符类型 
    			var str1 = "hello";
    
    			// 方式2  new String(); obj类型 
    			var str2 = new String("hello");
    
    			//  字符串的方法 
    			console.log(str1.charAt(2));
    
    			// 从 2 开始 截取 截取2 个 
    			console.log(str1.substr(2, 2));
    
    			// 从 1截取 开始 到 5
    			console.log(str1.substring(1, 5));
    			
    			//转成大写   大写 
    			console.log(str1.toUpperCase()); 
    			
    			//长度 
    			console.log(str1.length);
    			console.log(str1.concat("aaa"));