JS、、、-CSDN博客

本文链接：https://blog.csdn.net/m0_59841000/article/details/120141935

本文详细介绍了JavaScript的基础知识，包括JS概述、基础数据类型、变量、运算符、循环与分支结构、数组、函数以及对象的使用。通过实例展示了如何声明和使用变量、运算符、数组、函数以及对象，同时涵盖了DOM技术和JSON对象的转换。这些内容是理解JavaScript编程的关键，对于前端开发人员尤其重要。

摘要由CSDN通过智能技术生成

一、JS基础语法

1.JS概述

HTML 定义网页的内容 H5
CSS 规定网页的布局 CSS3
JavaScript 实现网站的交互 ES6

特点：

(1)JS是一门直译式的语言，直接执行的就是源代码.

是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.

(2)JS是一门弱类型的语言,没有严格的数据类型.

优势：

(1)良好的交互性

(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)

(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)

只要有浏览器的地方都能执行JS

2.基础数据类型

包括:number/string/boolean/null/undefined

(1) 数值类型-number

在JS中，数值类型只有一种，就是浮点型。

在JS中，需要时会自动的进行数据类型的转换，比如：在显示和处理的时候，浮点型和整型会自动的转换。

(2) 字符串类型-string

在JS中，字符串是基本数据类型。

在JS中，字符串直接量是通过单引号或者双引号引起来。

(3) 布尔类型-boolean

值为true或者是false；

(4) undefined

值只有一个就是undefined。表示变量没有初始化值。

(5) null

值也只有一个，就是null。表示空值或者不存在的对象。

3.复杂数据类型

函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）

4.JS变量

js是弱类型语言，所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。

javascript没有类似采用静态语言类型，如java的变量类型是编译期就确定的；而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型，这点比较灵活。这也是双刃剑，编译期就难以检查出其赋值的错误。
(1) 在JS中是通过 var 关键字来声明一个变量

(2) 在JS中声明的变量是不区分类型的，可以指向任意的数据类型。

5.JS运算符

JS中的运算符和Java中的运算符大致相同

算术运算符: +，-，*，/，%，++，–

赋值运算符: =，+=，-=，*=，/=，%=

比较运算符: ，!=，=，!==，>，>=，<，<=

位运算符: & ， |

逻辑运算符: && ，||

前置逻辑运算符: ! (not)

三元运算符: ? :

6.测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js的基础语法</title>
		<!-- script在HTML网页中嵌入JS代码 -->
		<script>
			//2.JS的运算符
				//typeof运算符获取数据的类型
				var i = 10;
				console.log(typeof i);//number,控制台输出的日志,f12
				i = 'hello';
				console.log(typeof i);
				console.log(typeof i + 'abc');
			
				//比两个数里的最大值
				var e = 3;
				var f = 5;
				var g = e > f ? e: f ;
				alert(g);
				//比三个数里的最大值
				var h = 8;
				// g = g > h ? g : h ;
				// g = e > f ? e大 : f大 ;
				g = e > f ? (e > h ? e : h) : (f > h ? f : h) ;
				alert(g);
				
				var c = 10 ;
				var d = '10' ;
				alert(c==d);//true
				alert(c===d);//false,比值和类型
				alert(c!=d);//false
				alert(c!==d);//true
			
				var b = 10;
				alert(b+1);//11
				alert(b-2);//8
				alert(b*1.6);//16
				alert(b/3);//3.333
				alert(b%3);//1
				//自增自减
				//alert(b++);//10
				//alert(++b);//11
				// b = b++ ;
				// alert(b+"====");//10
				
				//java面试题:以下两行代码有区别吗?
				// byte b = 1;
				// b = b * 2 ; // 错误,需要强转
				// b *= 2 ; //正确,复合赋值运算符会自动类型转换
				b = b * 2 ; 
				b *= 2 ;
				
				
				
				
			// 1.JS的变量: 变量类型 变量名=变量值
				var a = 5;
				//修改a的类型
				a = 1.5;
				a = "hello js" ;
				a = 'hello js2' ;
				a = true ;
				alert(a);
			
				
				
		</script>
	</head>
	<body>
		
	</body>
</html>

二、JS语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS的语句</title>
		<script>
			// 2. JS的循环结构:for while
			//练习:while 计算1个亿一天花一半,花多少天
			var days = 0;//定义变量,记录天数
			var money = 100000000 ;//定义变量,记录钱
			while( money > 1 ){
				money /= 2 ; //照着一半花
				days++ ; //天数++
			}
			console.log('1个亿总共花了'+days+'天');
			
			//练习:for计算1~100里的奇数个数
			var count = 0;//定义变量,记录个数
			for(var i = 1 ; i<=100 ; i++){
				if(i % 2 == 1){//奇数
					count++ ;//遇到奇数就加1
				}
			}
			console.log('奇数个数是:'+count);
			
			//练习:for计算1~100里的偶数和
			var sum = 0;//定义变量,记录和
			for(var i=1 ; i<=100 ;i++){
				if( i % 2 == 0 ){//偶数
					sum = sum + i ; 
				}
			}
			console.log('偶数和是:'+sum);
			
			
			// 1. JS的分支结构:
			//switch...case 
				//练习:根据变量的值,提示今天星期几
				var week = 1 ;
				switch(week){
					case 1 : console.log('今天星期1');break;
					case 2 : console.log('今天星期2');break;
					case 3 : console.log('今天星期3');break;
					case 4 : console.log('今天星期4');break;
					case 5 : console.log('今天星期5');break;
					case 6 : console.log('今天星期6');break;
					case 7 : console.log('今天星期7');break;
				}
			//if...else
				//练习: 80~100(包括80，也包括100)		优秀 
						// 60~80(包括60，但不包括80)		中等
						// 0~60(包括0，但不包括60)		不及格
						// 其他值						输入有误
				var score = 78 ;
				if(score>=80 && score<=100){
					console.log('优秀');
				}else if(score>=60 && score<80){
					console.log('中等');
				}else if(score>=0 && score<60){
					console.log('不及格');
				}else{
					console.log('输入有误');
				}
				
			
				const m = 10 ;//const定义常量,必须被初始化,而且不能改值
				// m  = 1.1;
				console.log(m);
				
				var a = 10;
				if( a > 5 ){
					console.log('ok');
				}else{
					console.log('no ok');
				}
			
			
		</script>
	</head>
	<body>
	</body>
</html>

三，JS数组

JS数组用于在单个的变量中存储多个值(其实就是一个容器)。

JS中的数组可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS的数组</title>
		<script>
			// 1.创建js数组: 数据类型丰富,长度可变
			//第二种方式: 推荐!!
				var b = [] ;
				console.log(b.length);
				b = [10,1.1,'jack',true,null] ;
				console.log(b.length);
				b[3]=99;
				console.log(b);
			//遍历数组:i表示下标,b.length是数组的长度
				for(var i = 0 ; i < b.length ; i++ ){
					console.log(b[i]);//根据下标获取数据
				}
			//java里的foreach:  for(Object o : b){
			//js里的for..in
				for(var o in b){
					console.log(b[o]);//o是下标,根据下标获取数据
				}
				
			//第一种方式:
				var a = new Array();
				console.log(a);
				console.log(a.length);//获取数组的长度
				//修改长度并存入各种类型的数据
				a = new Array(10,1.1,'jack',true,null);
				console.log(a);
				
				a[99]=100;
				console.log(a.length);//100
				console.log(a);
		</script>
	</head>
	<body>
	</body>
</html>

四.JS函数

函数就是一个具有功能的代码块, 可以反复调用

函数就是包裹在花括号中的代码块，前面使用了关键词 function

方式一：通过function关键字声明函数

声明：function 函数名称([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);
案例：
function a(){ //无参函数定义
	var a = [1,2,3,4,5]; //定义数组
	var sum =0; //定义变量
	for (var i = 0; i <a.length; i++) {
		if(a[i]%2==0){
			sum+=a[i];
		}
	}
	alert(sum);
}
a();//函数调用
function b(x,y){//定义含参函数
	alert(x+y);
}
b(1,"2");//函数调用
b(1,2);//函数调用

方式二：通过函数直接量声明函数

声明：var 函数名称 = function([参数列表]){ 函数体 }
调用: 函数名称([参数列表]);
案例：
// fn2();  //这种方式定义的函数还未加载就调用,会报错.方式1没问题
var fn2 = function(){ //定义无参函数
	alert(100);
}
fn2();  //函数调用

var fn3 = function(x,y){  //定义含参函数
	alert(x*y);
}
fn3(0.32,100);//函数调用
fn2("王海涛");参数个数不匹配，王海涛undefined
var e = function(x,y){ //定义有返回值含参函数
	return x-y;
}
alert("函数返回值:::"+ e(1.1,10.9) ); //函数调用

注意: 在JS中调用函数时, 传递的参数个数如果与声明的参数个数不相同, 也不会报错。

但是最好按声明的个数来传递, 因为个数不符, 可能会引发一些问题！！！

测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js函数</title>
		<script>
			//统计1~100里4的整数倍数的和
			//方式1: 
			//1. 定义js函数
				function test1(){
					var sum = 0 ;//定义变量,记录总和
					for(var i=1;i<=100;i++){
						if(i % 4 == 0){//4的整数倍
							sum = sum + i ; //求和
						}
					}
					return sum ;//把算完的和返回给调用者
				}
			//2.调用函数
				var a = test1();
				console.log(a);	
				
			//方式2:
			//1.定义函数
				var test2 = function(){
					console.log(100);
				}
				var test3 = function(){
					return 666; //返回值,交给调用者保存
				}
				var test4 = function(a,b,c){//参数列表等着调用者传入具体的值
					return a+b+c;
				}
			//2.调用函数
				var tt = test4(1,2,3);
				console.log(tt);
				
				var t = test3();
				console.log(t);
				
				test2();
				
		</script>
	</head>
	<body>
	</body>
</html>

五.JS对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS的对象</title>
		<script>
			//2. js的自定义对象
			//方式2: {name: 'jack', age: 20}
				//练习:创建新的js对象
				var car = {
					//绑定属性 k:v
					color : 'red' ,
					price : 9.9 ,
					//绑定函数
					run : function(a,b){
						console.log(a+b);
					},
					stop : function(x,y,z){
						return x+y+z ;//返回给调用者
					}
				}
				//调用属性
				console.log(car.color + car.price);
				//调用函数
				var res = car.stop(1,2,3);
				console.log(res);
				car.run(1,2);
				console.log(car);
				
				var teacher = {
					//绑定属性
					name : 'jack',
					age : 20 ,
					//绑定函数
					run : function(){
						console.log(100);
					},
					eat : function(){
						console.log(200);
					}
				}
				teacher.eat();//调用函数
				teacher.run();
				console.log( teacher.name );//调用属性的值可以打印或修改
			
			//方式1:
				function Student(){}//声明对象
				var s = new Student();//创建对象
				//绑定属性
				s.name='蔡徐坤';
				s.hobby='唱跳rap';
				//绑定函数
				s.sing=function(){
					console.log("solo...");
				}
				console.log(s);
				s.sing();
			
				function Person(){}//声明对象
				var p = new Person();//创建对象
				//动态的给对象绑定属性
				p.name = 'jack';
				p.age = 20;
				//动态的给对象绑定函数
				p.eat = function(){
					console.log(100);
				} 
				console.log(p);
				p.eat();//调用函数
				
			//1.js的内置对象
				//document对象,JSON对象...重点后面讲
				//window对象的常用功能--了解
				// window.alert('123');//弹出框
				// window.confirm('请选择');//确认框
				// window.prompt('请输入');//输入框
				// window.document //获取document文档对象
				// //string对象的常用功能--了解
				// alert('123'.length);//求字符串的长度
				// alert('123'.concat("hello"));//拼接字符串
				// //number对象的常用功能--了解
				// alert(3.3333.toFixed(2));//约束小数位数,参数是小数的位数
				// var a = parseInt('100')+1 ;//把字符串转成数字
				// alert(a);//101
		</script>
	</head>
	<body>
	</body>
</html>

六.DOM技术

1.概述

全称是文档对象模型.用来利用document对象提供的各种属性和方法,方便快速的定位网页中的所有元素

2.document对象

1, 获取对象: window.document
2, 常用的方法:
按照id的值获取元素: getElementById(id属性的值)–只会获取到一个元素
按照name的值获取元素: getElementsByName(name属性的值)–获取到多个元素 , 存入数组
按照class的值获取元素: getElementsByClassName(class属性的值)–获取到多个元素 , 存入数组
按照标签名的值获取元素: getElementsByTagName(标签的名字)–获取到多个元素 , 存入数组
直接向网页输出: write()
3, 常用的属性:
title–返回网页的标题
id–设置或返回元素的id
innerHTML–设置或返回元素的内容

3.测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 DOM技术</title>
		<!-- 
			DOM: document object model 文档对象模型,用来利用js的技术快速的操作元素 
			利用核心对象document提供的API完成
		-->
		
	</head>
	<body>
		<!-- onclick给元素设置鼠标点击事件,调用指定函数test1() -->
		<div onclick="test1()">我是div1</div>
		<div name="n1">我是div2</div>
		<div class="c1">我是div3</div>
		<span id="d1">我是span1</span>
		<span name="n1">我是span2</span>
		<a href="#" class="c1">点我</a>
		<script>
			// 1. 定义函数--当点击我是div1时触发
			function test1(){
				//需求3:输出第二个class="c1"的元素内容
				var data2 = document.getElementsByClassName("c1")[1].innerText;
				console.log(data2);
				//修改元素内容
				// document.getElementsByClassName("c1")[1].innerText='<p>我是p1</p>';//不解析标签
				document.getElementsByClassName("c1")[1].innerHTML='<p>我是p1</p>';//解析
				//修改元素的样式css变字的颜色
				document.getElementById("d1").style.color='red' ;
				
				//需求2:输出第一个name="n1"的元素内容
				//document.getElementsByName根据name属性获取到多个元素,存入数组
				//[0]按照下标,获取到数组里的第一个元素
				var data = document.getElementsByName("n1")[0].innerText ;
				console.log(data);
				//也可以选中元素后,直接修改内容
				document.getElementsByName("n1")[0].innerHTML='<h1>我又变了...</h1>' ;
			//document对象提供的innerHTML和innerText属性的区别?前者可以解析HTML代码
				
				
				//需求1:输出了id=d1的元素内容
				var a = document.getElementById("d1");//获取id=d1的元素
				console.log(a);//输出了整个元素
				console.log(a.innerHTML);//获取元素的内容
				a.innerHTML='我变了....';//修改元素的内容
			}
		</script>
	</body>
</html>

七.JSON

7.1概述

是一个字符串,用来完成前后端数据交互的格式.
是一种轻量级的数据交换格式,而且数据格式看起来很简洁
JSON对象: 可以把 json字符串和 js对象互转
1, json字符串转成 js对象: 方便的通过对象,调用属性函数
JSON.parse(json字符串) :接受一个json字符串作为参数,返回 js对象
2, js对象转成 json字符串: 方便对字符串操作(拼接,长度,截取…)
JSON.stringify(js对象) : 接受一个js对象,返回一个 json字符串

7.2测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JSON对象</title>
		<!-- JSON对象用来完成  js对象和json字符串的 互转 -->
		<script>
			//定义函数,点击div1时触发
			function test1(){
				// 1. json字符串,对象的写法
				var a ='{"name":"jack","age":"20"}';
				// 2. json字符串,数组的写法
			var b ='[{"name":"tony","age":"20"},{"name":"rose","age":"30"}]';
				//3. JSON对象
				//3.1 json字符串的转成js对象:目的是方便的调用对象封装的属性
					var jsobj = JSON.parse(a);//json字符串的转成js对象
					console.log(jsobj);//{name: 'jack', age: '20'}
					console.log(jsobj.name);//获取对象里name属性的值
					console.log(jsobj.age);//获取对象里age属性的值
					//需求: 利用dom技术,把解析到的name属性的值,展示在id="d2"位置
					document.getElementById("d2").innerHTML=jsobj.name ;
				//练习:
					var jsobj2 = JSON.parse(b);//json字符串的转成js对象
					console.log(jsobj2);//类似于数组结构
					console.log(jsobj2[1].name);//获取到数组里第二个对象的name属性的值
					console.log(jsobj2[0].age);//获取到数组里第一个对象的age属性的值
					//需求: 利用dom技术,把解析到的20,展示在id="d3"位置
					document.getElementById("d3").innerHTML = jsobj2[0].age ;
				//3.2 js对象转成json字符串:目的是方便的操作字符串,也可以发送给服务器
					//创建js对象
					var obj = { name:"jack" , age:20 } ;
					var jsonstr = JSON.stringify(obj);//js对象转成json字符串
					console.log(jsonstr);//得到json字符串
					console.log(jsonstr.length);//获取字符串的长度
					console.log(jsonstr.concat('hello'));//拼接字符串
			}
		</script>
	</head>
	<body>
		<div id="d1" onclick="test1()">我是div1,点我</div>
		<div id="d2">我是div2</div>
		<div id="d3">我是div3</div>
	</body>
</html>