JavaScript

最新推荐文章于 2025-07-07 21:48:52 发布

sql12345678911

最新推荐文章于 2025-07-07 21:48:52 发布

阅读量705

点赞数 12

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/sql12345678911/article/details/147835420

一，JavaScript概述

1.历史：

JavaScript最早是由美国网景公司开发的
   用于在网页中，为网页添加动态功能的
   原名叫做livescript，
   后来sun公司与网景公司合作，改名为JavaScript
   Java是一种运行在服务器端的，是后端程序，Java要编译才能执行
   JavaScript运行在网页，是前端语言，不需要编译，直接右浏览器解释运行

2.JavaScript概述

脚本语言：不需要编译（sql，html，css，js，python），直接由模拟中解释器（引擎）来解释执行

   JavaScript是一种直译式的脚本语言，为网页添加各种动态功能，可以直接对网页中的标签属性值，css属性值进行修改

   html是网页骨架
   css是皮肤
   JavaScript是动作，可以动态的改变页面的功能

   特点：
       虽然是面向对象的语言，但是初级使用仍然是面向过程的用法，会提供对象

       JavaScript是一种弱类型语言，（c，java都是强类型语言）
           a = "abc";（定义时，前面不需要加定义的类型名称，可以直接定义）
           b;

二，基本语法：

1.脚本位置

JavaScript脚本写在一组<script>标签中，此标签可以放在head中或body中，一般习惯放在head中，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件

2.变量

（1）使用let或var关键字来声明变量

eg：
let name
var name

（2）声明变量的同时可以对其赋值

eg：
let name = "zhangsan"
var name = "lisi"

注：在声明变量的时候如果没有进行赋值，则该变量为undefined,是一个特殊的原始数据状态,表示一个变量已声明但未被赋值的状态

3.数据类型

JavaScript中支持的数据类型由

（1）数值型（number）

其中包括整数型和浮点数型

（2）布尔型（boolean）

即逻辑值，true或false

（3）字符串类型

由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串）

（4）undefined类型

（5）object类型

4.运算符

+可以进行“加法”与“连接”运算，如果2个运算符中的一个是字符串，javascript就将另一个转换成字符串，然后将2个运算数连接起来。

给定 y = 5，下面的表格解释了算数运算符：

给定 x = 10和 y = 5，下面的表格解释了赋值运算符：

给定 x = 5，下面的表格解释了比较运算符

给定 x = 6以及 y = 3，下表解释了逻辑运算符

条件运算符（三目运算）：

语法：var result = （条件表达式）？结果一：结果2

当条件成立时返回？后结果，否则返回：后结果

5.控制语句

第一种是选择结构

（1）单一选择结构（if）

（2）二路选择结构（if/else）

（3）多路选择结构（switch）

第二种类型的程序控制语句是循环结构

（1）由计数器控制的循环（for）

（2）在循环的开头测试表达式（while）

（3）在循环的末尾测试的表达式（do/while）

（4）break，continue

三，函数

1.定义函数

函数定义的基本语法：

function functionName([arguments]){
    javascript statements
    [return expression]
}

function：表示函数定义的关键字；

functionName：表示函数名；

arguments：表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空；

statements：表示实现函数功能的函数体；

return expression：表示函数将返回expression的值，同样是可选的语句

eg：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/* 
			 函数声明：
			 function functionName([arguments]){
				javascript statements
				[return expression]
			 }
			 */
			/* 无参函数 */
			// function test(){
			// 	console.log("test()");
			// }
			
			/* 
			 有参数的函数
			 */
			// function test(a,b,c){
			// 	console.log(a,b,c);
			// }
			// test(1,21,3);
			
			function add(a,b){
				return a+b
			}
			let res = add("555",25)
			console.log(res)
			
		</script>
	</head>
	<body>
		<input type="button" value="按钮" onclick="test()"/>
	</body>
</html>

consle.log（）在控制台输出log内的成员

2.函数的调用

由函数调用

<script type="text/javascript">
function fun(){
    alert(“test”);
}
fun();//函数名调用
    function fun2(){
    fun();//在其他函数中调用
}
</script>

3.全局函数

parselnt（arg）把括号内的内容转换成整数之后的值，如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回"NaN"

parseFloat（arg）把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分转换成浮点数，如果以字母开头，则返回"NaN"

typeof（arg）返回arg值的数据类型

eval（arg）可运算某个字符串

4.内置对象-String字符串

属性：

length 用法：返回该字符串的长度

方法：

charAt（n）：返回该字符串位于第n个字符

indexOf(char)：返回指定char首次出现的位置.

lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.

substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位置到end位置的前一位置的一段.

substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段.

split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。

5.内置对象-Array数组

方法1:

let <数组名> = new Array();
使用此方法定义了一个空数组,通过下方方式向数组添加元素
<数组名>[下标] = 值;

示例:

  let arr = new Array();
        //    赋值方式1 新建一个空数组,对数组进行传值
            arr[0] = 1;
            arr[1] = true;
            arr[2] = "abc";
            console.log(arr);

方法2:

在定义数组的时候直接初始化数组:

let <数组名> = new Array(<元素1>,<元素2>,<元素3>....)

示例:

//在新建数组时进行传值
let arr = new Array(1,2,3,true,"abc");
arr[5] = 6;//数组传值
arr[6] = 7;

方式3:

let <数组名> = [<元素1>,<元素2>,<元素3>...];

let arr = new Array();
arr = [1,2,3,true,"abc"];
let str1 = arr.join(",")//将字符串转化为数组
console.log(str1);

示例:

其中arr.join(",")是数组中的方法将数组转化为字符串,将元素通过(,)符号进行分割

属性:
length : 数组的长度,即数组里有多个元素.

方法:
join(<分隔符>): 返回一个字符串,该字符串把数组中的各个元素串起来,使用<分割符>置于元素与元素之间.
reverse() :使数组中的元素顺序反过来.如果对数组[1,2,3]使用这个方法,它将使数组变成:[3,2,1]
sort() :使数组中的元素按照一定的顺序排列.如果不指定<方法函数>,则按字母顺序序排列
在对数字排序需要调用排序函数
function sortNumber(a,b){
return a-b;
}

示例:

// 对数组中的数字进行排序
let arr =[12,2,1,14];
arr.sort(numberSort);
                
//我们写一个方法传入sort方法进行排序,sort方法会通过我们写的方法对数字进行排序
function numberSort(a,b){
    return a-b;
}

注意: 不能对数字直接进行排序,直接排序数组,sort方法只会对数字的首个数字进行排序,需要我们传入一个方法对数字进行排序

6.内置对象-Date

获取日期:

new Date() 返回当日的日期和时间
getFullYear() 返回四位数字年份
getDate() 返回一个月中的某一天(1-31)
getMonth() 返回月份(0-11)
getDay() 返回一周中的某一天 (0-6)
getHours() 返回Date对象的小时(0-23)
getMinutes() 返回Date对象的分钟(0-59)
getSecond() 返回Date对象的秒数(0-59)

7.内置对象-Math

Math 对象，提供对数据的数学计算。
属性
        PI 返回π（3.1415926535...)。
方法
        Math.abs(x) 绝对值计算；
        Math.pow(x,y) 数的幂；x的y次幂
        Math.sqrt(x) 计算平方根；
        Math.ceil(x) 对一个数进行上舍入
        Math.floor(x) 对一个数进行下舍入
        Math.round(x) 把一个数四舍五入为最接近的整数
        Math.random() 返回 0 ~ 1 之间的随机数
        Math.max(x,y) 返回 x 和 y 中的最大值
        Math.min(x,y) 返回 x 和 y 中的最小值

以下代码为对所有的内置对象的示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/* 
			 字符串对象
			 */
			/* let str = "ab:cde:fg"
			console.log(str.length)
			console.log(str.indexOf("c"))
			console.log(str.charAt(3))
			console.log(str.substring(1,3))//substring（开始位置，结束位置）
			console.log(str.substr(1,3))//substr（开始位置，截取长度）
			
			let arr = str.split(":");
			console.log(arr) */
			
			/* 
			 数组对象
			 */
			/* let arr = new Array();
			arr[0] = 1;
			arr[1] = true;
			arr[2] = "abc" */
			
			/* let arr = new Array(1,2,3,true,"abc")
				arr[5] = 6;
				arr[6] = 7; */
			// let arr = [1,2,3,true,"abc"]
			// console.log(arr)
			// console.log(arr.join("").length )将数组转换为字符串
			// arr.reverse()数组逆置
			// console.log(arr)
			
			
			// let arr = ["e","a","d","f","x","c","b"]
			// let arr = [19,5,8,3,7,1,4,5]
			// arr.sort(numberSort)//将自定义排序的函数传入到sort（）中		
			// function numberSort(a,b){
			// 	return a-b;
			// }
			// console.log(arr)  小于0  大于0  等于0
			
			//日期对象
			let date = new Date();
			console.log(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"    "
					+date.getHours()+"："+date.getMinutes()+"："+date.getSeconds())
			console.log(date.toLocaleString())
		</script>
	</head>
	<body>
	</body>
</html>

四.事件

事件是属于标签中的内容,不同的标签拥有不同的事件,通过事件可以触发js中的函数来完成某个具体的函数,多个标签在触发事件后调用同一个函数

onclick: 鼠标左键点击事件
ondblclick: 鼠标左键双击事件

onblur: 失焦事件当输入框失去鼠标焦点时触发针对输入框
onfocus: 聚焦事件当鼠标获得鼠标焦点时触发
这两个事件常用于文本输入框

onmouseover: 鼠标悬浮事件当鼠标移入到标签上时会触发
onmouseout: 鼠标离开事件当鼠标从标签上离开时触发

onchange: 当失去鼠标焦点并且内容改变时触发
onload: 当网页内容加载完毕后自动触发 (常用于body标签添加该事件)

在body标签添加onload事件调用函数与直接调用函数的区别:

直接调用函数时,由于浏览器是从上往下加载html代码,不能在所有标签加载完毕后处理事件
而使用onload事件可以在所有标签加载完毕后处理该事件,不需要考虑函数的顺序

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            let i = 1;
            function text(){
                console.log("函数被执行了"+(i++)+"次")
            }
            // text(); 直接调用时,浏览器从上往下加载,不能在所有标签加载完毕后处理事此函数
        </script>
    </head>
    <body onload="text()">
        <div id="div1">1111</div>
         <input  type="button" value="按钮" onclick="text()"/>
         <div onclick="text()" style="background-color: aqua;">点击</div>
         <input type="button" value="双击按钮" ondblclick="text()" />
         
         <hr />
         <input type="text" onblur="text()"/><!--当问框失去焦点时触发该事件-->
         <input type="text" onfocus="text()"/><!-- 当文本框获得焦点时触发该事件 -->
         
          <div  onmouseover="text()" style="background-color: aqua;">鼠标移入事件</div>
          <hr />
           <div  onmouseout="text()" style="background-color: aqua;">鼠标移出事件</div>
           
           <input type="text" onchange="text()"/>
    </body>
</html>

五，Html DOM

1.概念

DOM是Document Object Model文档对象（网页中的标签）模型的缩写.

通过html dom，可用javaScript操作html文档的所有标签.

2.查找元素

DOM (document object model) 文档对象模型（指的就是网页中的标签）
           JavaScript在对网页进行操作时，认为网页中的每个标签都是一个独一无二的对象
           所以，我们需要JavaScript要对某一个标签进行操作，那么就需要现在JavaScript中多的此标签
           然后就可以对标签的属性，css样式，标签体中的内容进行操作
           要操作标签，先得到标签
           document对象，表示当前html文档，当网页内容加载完成后，自动生成

有四种方式来做到这种事

getElementByid（"标签id"）
getElementsByTagName("标签名")返回的是一个标签对象的集合，是一个集合对象，即使只有一个对象
getElementsByClassName("class属性名")
getElementsByName("name属性名")

3.改变HTML

Html dom允许JavaScript改变标签的属性

格式:
document.getElementById(“username").value=“new value";
document.getElementById("image").src=“new.jpg";
示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
             function oper(){
                 //根据标签的id值获得标签对象
                 let tobj1 = document.getElementById("t1");
                 let tobj2 = document.getElementById("t2");
                 //2.对标签对象中的属性进行操作
                 tobj2.value = tobj1.value;//使id为t2的标签的value属性改为t1标签value属性
                 tobj1.value = "";//改变id为t1标签value属性值为空字符
             }
        </script>
    </head>
    <body>
         <input id="t1" type="text" value="123"/>
         <input id="t2" type="text" value=""/>
         <input type="button" value="操作" onclick="oper()"/>
    </body>
</html>

4.改变CSS

html dom允许 javaScript改变html标签的样式

语法格式：
document.getElementById("id").style.property=new style;

示例;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/* 
			 DOM (document object model)  文档对象模型（指的就是网页中的标签）
			 JavaScript在对网页进行操作时，认为网页中的每个标签都是一个独一无二的对象
			 所以，我们需要JavaScript要对某一个标签进行操作，那么就需要现在JavaScript中多的此标签
			 然后就可以对标签的属性，css样式，标签体中的内容进行操作
			 要操作标签，先得到标签
			 document对象，表示当前html文档，当网页内容加载完成后，自动生成
			 */
			//操作函数
			function oper(){
				//1根据标签的id值获得标签对象
				let tobj1 = document.getElementById("t1");
				let tobj2 = document.getElementById("t2");
				//2。对标签对象中的属性进行操作
					tobj2.value = tobj1.value;
					tobj1.type = "radio";
			}
			
			//改变body背景颜色
			function changeBgColor(color){
				let bodyobj = document.getElementById("bodyid")
					bodyobj.bgColor = color
			}
			/* 
			 一个按钮可切换三个颜色，第一次点击显示红色，点击背景颜色变成红色，之后按钮上的字变为蓝色
			 */
			let i= 0
			function oper1(){
				let bobj = document.getElementById("bid")
				let arr = ["红色","蓝色","绿色"]
				let arr1 = ['red','blue','green']
					bobj.value = arr[((i++)+1)%3]
					console.log(i)
				changeBgColor(arr1[(i-1)%3])
					console.log(i)
			}
		</script>
	</head>
	<body id = "bodyid" bgcolor="">
		<input id="t1" value=""/>
		<input id="t2" value=""/>
		<input type="button" value="操作" onclick="oper()"/>
		<hr />
		<input type="button" value="红色" onclick="changeBgColor('red')"/>
		<input type="button" value="蓝色" onclick="changeBgColor('blue')"/>
		<input type="button" value="绿色" onclick="changeBgColor('green')"/>
		<hr />
		<input type="button" id=bid value="红色" onclick="oper1()" />
	</body>
</html>

六，计时

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

方法:
setTimeout(“函数”,”时间”)未来的某时执行代码
clearTimeout()取消setTimeout()
setInterval(“函数”,”时间”)每隔指定时间重复调用
clearInterval()取消setInterval()

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		function test(){
			console.log("函数执行了")
		}	
		
		// let n = setTimeout("test()",5000);//开启一个计时器，让定时器在延迟指定的事件后调用指定的函数，只执行一次
				setInterval("test()",2000)//开启一个计时器，每隔指定时间执行一次
		function closetime(){
			clearTimeout(n)//关闭指定计时器
			console.log(n)
		}
		</script>
	</head>
	<body>
		<input type="button" value="关闭计时器" onclick="closetime()"/>
	</body>
</html>