JavaScript学习（1）—— 基础语法

最新推荐文章于 2024-07-20 22:44:48 发布

原创最新推荐文章于 2024-07-20 22:44:48 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

HTML、CSS、JavaScript、jQuery 专栏收录该内容

11 篇文章

订阅专栏

这篇博客详细介绍了JavaScript的基本用法，包括如何在HTML中使用JS、变量的声明与类型转换、关系和逻辑运算、数组操作、函数定义与调用，以及对象的创建与使用。通过实例展示了JavaScript的核心概念，适合初学者入门学习。

一. 使用JavaScript

1. 直接在HTML页面中使用JavaScript

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		alert("hello");    <!--在这里编写JS语句 -->
  </script>
</head>
<body>
	HTML页面
</body>
</html>

2. 在HTML页面中引入js文件

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="test.js"></script>   <!--通过src属性引入js文件，可以是相对路径，也可以是绝对路径-->
</head>
<body>
	HTML页面
</body>
</html>

alert("hello");

二. 变量

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		var i;
		alert(i);   //undefined
		
		i = 12;
		alert(typeof(i));  //number
		
		i = "abc";
		alert(typeof(i));  //string
  </script>
</head>
<body>
	
</body>
</html>

三. 关系（比较）运算

<!DOCTYPE html>
<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  ===：除了简单的比较字面值，还会比较两个变量的数据类型
		
		var c = 13;
		alert(b < c); //true

  </script>
</head>
<body>
	
</body>
</html>

四. 逻辑运算

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		var a = "12";
		var b = true;
		var c = false;
		var d = null;
		
		// &&（且运算）：1.当表达式全为真时，返回最后一个表达式的值；2.当表达式中有一个为假时，返回第一个为假的表达式的值
		alert(a && b);  //true 
		alert(b && a);  //12
		alert(a && c);  //false
		alert(a && d && c); //null
		
		// ||（或运算）：1.当表达式全为假时，返回最后一个表达式的值；2.当表达式中有一个为真时，返回第一个为真的表达式的值
		alert(c || d);  //null
		alert(d || c);  //false
		alert(a || c);  //12
  </script>
</head>
<body>
	
</body>
</html>

五. 数组

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		var arr = [];  //定义一个空数组
		alert(arr.length);  //0
		
		arr[0] = 12;
		alert(arr[0]); //12
		alert(arr.length);  //1
		
		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>

六. 函数

1. 函数定义

① 第一种形式

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		//函数定义：无参函数
		function fun1(){
			alert("fun1函数");
		}
		
		//函数调用才会执行
		fun1();   
		
		//函数定义：有参函数
		function fun2(a, b){
			alert("fun2函数" + ",a=" + a + ",b=" + b);
		}
		
		//函数调用
		fun2(12, "abc");   
		
		//函数定义：带有返回值的函数
		function fun3(num1, num2){
			var sum = num1 + num2;
			return sum;
		}
		
		//函数调用
		alert(fun3(12, 13));
  </script>
</head>
<body>
	
</body>
</html>

② 第二种形式

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		//函数定义：无参函数
		var fun1 =  function(){
			alert("fun1函数");
		}
		
		fun1();
		
		//函数定义：有参函数
		var fun2 = function(a, b){
			alert("fun2函数" + ",a=" + a + ",b=" + b);
		}
		
		fun2(12, "abc");   
		
		//函数定义：带有返回值的函数
		var fun3 = function(num1, num2){
			var sum = num1 + num2;
			return sum;
		}
		
		alert(fun3(12, 13));
		
  </script>
</head>
<body>
	
</body>
</html>

2. 隐形参数

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		//函数定义：无参函数
		var fun =  function(){
			alert("fun函数");   //fun函数
			
			//可以看传入参数的个数
			alert(arguments.length);
			
			alert(arguments[0]);  //1
			alert(arguments[1]);  //abc
		}
		
		fun(1, "abc");   //会调用上面的fun函数，因为JS中有隐形参数		
  </script>
</head>
<body>
	
</body>
</html>

七. 对象

1.第一种形式

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		var person = new Object();  //定义对象: var 变量名 = new Object();
		person.name = "Tom";        //定义属性：变量名.属性名 = 值
		person.age = 20;
		
		person.fun = function(){   //定义函数：变量名.函数名 = function(){}
			alert("name = " + this.name + ", age = " + this.age);
		}
		
		alert(person.name);  //Tom
		person.fun();  //name = Tom, age = 20
  </script>
</head>
<body>
	
</body>
</html>

2.第二种形式（大括号形式）

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		//定义对象: var 变量名 = {};
		var person = {
			name : "Tom",        //定义属性：属性名 : 值 , (用逗号分隔)
			age : 20,
			fun : function(){   //定义函数：函数名 : function(){}
				alert("name = " + this.name + ", age = " + this.age);
			}
		};  
		
		alert(person.name);  //Tom
		person.fun();  //name = Tom, age = 20
  </script>
</head>
<body>
	
</body>
</html>