javaScript基础

小小深

于 2024-08-15 21:47:44 发布

阅读量325

点赞数 11

分类专栏： web 文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/2302_78527593/article/details/141231528

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.javaScript概述

1.历史

● JavaScript是由Netscape公司（美国网景公司）开发的一种脚本语言。

● Netscape公司将这种脚本语言命名为LiveScript，与java一样,也是面向对象的语言,而且无需编译，可由浏览器直接解释运行。

● Netscape公司见LiveScript大有发展前途，而SUN公司( java)也觉得可以利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript。

2.功能

JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能（javaScript 可以操作网页内容），不需要编译可直接通过浏览器解释运行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

3.JavaScript与html,css关系

JavaScript 是一种基于对象和事件驱动并具有安全性的解释性语言，其目的就是增强Web客户交互。弥补了HTML的缺陷。

二.基本语法

脚本写在哪里？

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

第一个JavaScript程序

<html>
   <head>
     <script type="text/javascript">
        alert(“hello javaScript”);
     </script>
   </head>
<body>
</body>
</html>

alert(); 提示对话框

1.变量

● 声明变量用 var 关键字

var name;

● 声明变量的同时对其赋值

var test="THIS IS A BOOK";

2. 数据类型

JavaScript支持的数据类型

● 1、数值型(number)：

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

● 2、布尔型(boolean)：

即逻辑值，true或flase。

● 3、字符串型：

由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。

（使用单引号来输入包含引号的字符串。）

● 4: undefined类型不明确类型

● 5: Object类型

3.控制语句

第一种是选择结构

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的值，同样是可选的的语句。

2.调用函数

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

3.全局函数

• parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN” 。

• parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN” 。

• typeof (arg)返回arg值的数据类型。

• eval(arg) 可运算某个字符串。

四.内置对象

1.String字符串

属性

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

方法

charAt(n) ：返回该字符串位于第 n 位的单个字符 .

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

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

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

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

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

例如： '1&2&345&678'.split('&') 返回数组： 1,2,345,678 。

2.Array数组

数组的定义方法：

var < 数组名 > = new Array();

这样就定义了一个空数组。以后要添加数组元素，就用：

< 数组名 >[ 下标 ] = 值 ;

如果想在定义数组的时候直接初始化数据，请用：

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

还可以

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

属性

length ：数组的长度，即数组里有多少个元素

方法

join(< 分隔符 >) ：返回一个字符串，该字符串把数组中的各个元素串起来，用 < 分隔符> 置于元素与元素之间。

reverse() 使数组中的元素顺序反过来。如果对数组 [1, 2, 3] 使用这个方法，它将使数组变成：[3, 2, 1] 。

sort() ：使数组中的元素按照一定的顺序排列。如果不指定 < 方法函数 > ，则按字母顺序排列。

对数字排序需要调用排序函数。

function sortNumber(a,b){

return a - b;

}

3. Date

获取日期

new Date() 返回当日的日期和时间

getFullYear() 返回四位数字年份

getDate() 返回一个月中的某一天 (1 ~ 31)

getMonth() 返回月份 (0 ~ 11)

getDay() 返回一周中的某一天 (0 ~ 6)

getHours() 返回 Date 对象的小时 (0 ~ 23)

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)

getSeconds() 返回 Date 对象的秒数 (0 ~ 59))

4.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 中的最小值

五.事件

一些常用的事件 :

onclick() 鼠标点击时；

onblur() 标签失去焦点 ;

onfocus() 标签获得焦点 ;

onmouseover() 鼠标被移到某标签之上 ;

onmouseout 鼠标从某标签移开 ;

onload() 是在网页加载完毕后触发相应的的事件处理程序 ;

onchange() 是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function text(){
				console.log("事件触发了");//(console.log相当于java中是sout输出,需要在控制台查看) 
			}
		</script>
	</head>
	<body onload="text()">
		<!-- 
		     onclick 鼠标点击触发事件
			 onfocus 当标签获得鼠标焦点时,触发事件(只触发一次)
			 onblur 当标签失去焦点时就触发
			 onmouseover 当鼠标移入标签时就触发
			 onmouseout 当鼠标从标签离开时就触发
			 onload 当网页加载完毕后触发
			 onchange 当内容改变且失去鼠标焦点时触发
		 -->
		<input onchange="text()" />
		
	</body>
</html>

六.HTML DOM

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

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

1.查找元素

通常，通过 JavaScript，您需要操作 HTML 标签。

为了做到这件事情，您必须首先找到该标签。

要操作，先得到

有四种方法来做这件事：

通过 id 找到 HTML 标签

document.getElementById(“id");

通过标签名找到 HTML 标签

document.getElementsByTagName("p");

通过类名找到 HTML 标签

document.getElementsByClassName("p");

通过name找到 HTML 标签

document.getElementsByName(“name");

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function text(){
				var obj1=document.getElementById("txt1");
				var obj2=document.getElementById("txt2");
				obj2.value=obj1.value;
				obj1.value="";
				
			}
		</script>
	</head>
	<body>
		<input type="text" id="txt1" value=""/>
		<input type="text" id="txt2" value=""/>
		<input type="button" value="测试" onclick="text()"/>
	</body>
</html>

2.改变 HTML

Html dom允许javaScript 改变html标签的内容。

改变 HTML 标签的属性

document.getElementById(“username").value=“new value";
document.getElementById("image").src=“new.jpg";

修改 HTML 内容的最简单的方法时使用 innerHTML 属性

document.getElementById(“div”).innerHTML=new HTML

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function text(){
				var boxobj1=document.getElementById("box1");
				var boxobj2=document.getElementById("box2");
				//boxobj2.innerText=boxobj1.innerText;
				boxobj2.innerHTML=boxobj1.innerHTML;
			}
		</script>
	</head>
	<body>
		<div id="box1">jjjjjjj <b>ssss</b>
		</div>
		<div id="box2"></div>
		<input type="button" value="测试" onclick="text()"/>
	</body>
</html>

3.改变 CSS

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

语法：

document.getElementById("id").style.property=new style;

例：

document.getElementById("p2").style.backgroundImage="url(bg.jpg)";

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function text(){
				var boxobj=document.getElementById("box1");
				boxobj.style.width='100px';
				boxobj.style.height= '100px';
				boxobj.style.backgroundColor='red';
				
			}
		</script>
	</head>
	<body>
		<div id="box1" style="background-color: aqua;"> jjj</div>
	
		
		<input type="button" value="测试" onclick="text()"/>
	</body>
</html>

七.计时

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

方法 :

setTimeout(“ 函数 ”,” 时间 ”) 未来的某时执行代码

clearTimeout() 取消 setTimeout()

setInterval(“ 函数 ”,” 时间 ”) 每隔指定时间重复调用

clearInterval() 取消 setInterval()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function hello(){
				console.log("hello");//(console.log相当于java中是sout输出,需要在控制台查看) 
			}
			var t;
			function startime(){
				t=setInterval("hello()",1000)
			}
			function stoptime(){
				clearInterval(t);
			}
		</script>
	</head>
	<body>
		<input type="button" value="开始" onclick="startime()"/>
		<input type="button" value="停止" onclick="stoptime()"/>
	</body>
</html>

八.例子-电子表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="width: 300px;background-color: aqua;color: white;text-align: center;" id="box"></div>
	</body>
		<script>
			function showtime(){
				var data=new Date();
				var divobj=document.getElementById("box");
				divobj.innerText=data.getFullYear()+"年"+(data.getMonth()+1)+"月"+data.getDate()+"日"+data.getHours()+"时"+data.getMinutes()+"分"+data.getSeconds()+"秒";
				
			}
			showtime();
			setInterval("showtime()",1000);
		</script>
</html>

小小深

关注

11
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
javaScript基础

●JavaScript是由Netscape公司（美国网景公司）开发的一种脚本语言。●Netscape公司将这种脚本语言命名为LiveScript，与java一样,也是面向对象的语言,而且无需编译，可由浏览器直接解释运行。●Netscape公司见LiveScript大有发展前途，而SUN公司( java)也觉得可以利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript。
复制链接

扫一扫

专栏目录