javaScript

Only Ai Ming

于 2024-07-24 14:54:02 发布

阅读量584

点赞数 12

分类专栏： java学习文章标签： javascript

本文链接：https://blog.csdn.net/qq_64782704/article/details/140617923

版权

java学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一. javaScript概述

javaScript是由美国网景公司开发的一种脚本语言,起初叫LiveScript,和java一样也是一种面向对象的语言,后面和Sun公司合作,改名为javaScript

脚本语言:不用编译,靠解释器解释就能运行的语言 eg:SQL,HTML,CSS,python等

javaScript和HTML,CSS的关系

HTML是结构,CSS是样式,javaScript是行为

二. 基本语法

1. 脚本写在哪里

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

用于导入外部的.js文件

2. 变量和数据类型

javaScript是一种弱数据类型的语言,所有数据类型的变量都用关键字var声明,你给它赋什么值,它的数据类型就是什么

2.1 数值类型

alert()	让浏览器弹出一个对话框
typeof()	返回某个变量的数据类型

数值类型分为整数和浮点数

var a = 10;
var b = 10.5;
alert(typeof(a)); // nnumber
alert(typeof(b)); // number

2.2 字符串类型

var a = "abc";
var b = 'abc';
alert(a); //String
alert(b); //String

javaScript中字符串既可以用单引号,也可以用双引号

2.3 布尔类型

var a = true;
var b = false;
alert(a==b) //false

2.4 undefined类型

当一个变量没有被赋值时,我们认为它是undefined类型,即不确定的类型

var a;
alert(a); //undefined

2.5 对象类型

因为javaScript也是面向对象的语言,所以javaScript中也有对象Object类型,也能创建一个对象

var date = new Date();
alert(date.getFullYear()); //获取年份

三. 运算符和控制语句

因为javaScript和java有很多相似的语法,所以这里只说几个需要注意的地方

1. 运算符

1.1 算术运算符

加法:

1. 做加法运算

2. 字符串的拼接

var a = "10"
var b = 5;
 var c = 10;
var d = "a";
alert(a+b); //字符串连接
alert(b+c); //加法

其他算术运算符:

1. 做算数运算

2. 如果是和字符串做算术运算,如果该字符串是由纯数字组成,那么可以与其做算术运算,否则,返回NaN(not a number)

var a = "10"
var b = 5;
 var c = 10;
var d = "a";
alert(c-b); //5 减法
alert(a-b); // 5 字符串(数字)-数值=数值
alert(c-d); //NAN not a number 如果字符串不能转换为数值 返回NaN,其他算数符也是一样的

1.2 比较运算符

==: 判断两个数的值是否相等

===(全等): 判断两个数的值和类型是否相等,都相等返回true,否则返回false

var a = "10";
var b = 5;
var c = 10;
var d = "a";

alert(a==c);//true 只比较值是否相等

alert(a===c);//false 全等 值和类型

其他运算符和java用法相同,不再介绍

2. 控制语句

javaScript和java所有的控制语句,循环,选择等用法都相同,不再介绍

四. 函数

4.1 函数的定义

javaScript通过function关键字来定义一个函数,格式如下

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

function:定义函数的关键字

functionName:函数名

[arguments]:参数列表,javaScript是弱类型语言,所以不用指定参数类型,也不用var关键字

javaScript statements:函数体

[return expression] 返回值,可有可无

注意:函数在定义时,无论是否有返回值,都不用指定返回值类型,函数只有被调用了才会执行

/*
定义了一个求和函数
*/

function test(a,b)
{
	return a+b;
}

4.2 全局函数

全局函数:浏览器中定义好的,我们可以直接调用的函数

alert()	在浏览器中弹出一个弹框,显示字符串
parseInt()	将括号里的内容转为整数,如果是字符串,以字母开头,返回NaN,否则只将字符串前面的数字部分转为整数
parseFloat	将括号里的内容转为浮点数,如果是字符串,以字母开头,返回NaN,否则只将字符串前面的数字部分转为浮点数
typeof()	返回括号里内容的数据类型
eval()	将括号里的字符串按照javaScript脚本的方式执行,可直接计算某个字符串表达式的值

五. 内置对象

javaScript中提供了一些内置的对象,我们可以直接调用该对象中的方法

5.1 字符串

length属性	返回字符串的长度
charAt(n)	获取对应位置的字符
indexOf(char)	返回指定char首次出现的位置,找不到返回-1
lastIndexOf(char)	跟 indexOf() 相似，不过是从后边开始找,找不到返回-1
substring(start,end)	截取开始位置到结束位置的字符串,不包含结束位置
substr(start,length)	从开始位置截取length个字符
split(分隔符字符)	根据给定的符号分割字符串,得到一个数组

5.2 数组

javaScript中的数组不像传统意义上的数组要求那么严格,它里面可以存储任意数据类型的数据,这是因为javaScript是弱类型的语言,并且它的数组可以跳跃的赋值,即使前面有空间没有被用到

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<script>
		// 声明数组
		var a = new Array();
		a[0] = 1;
		a[1] = "ab";
		a[2] = true;
		a[4] = 3; //a[3]没有被用到,此时数组长度为5
		
		var b = new Array(1,2,true,"abc");
		
		var c = [1,2,3,true,"abc"];
		a[5] = 9;
		console.log(a);


        // 数组遍历

        var a = [1,2,3,true,"abc"];
		for(var i = 0;i<a.length;i++)
		{
			console.log(a[i]);
		}

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

join("字符串")	根据给定的字符串将数组中的内容拼接成一个新的字符串
reverse()	数组逆序
sort(比较函数名)	对数组进行排序,但是需要自己传入一个比较函数

5.3 日期

new Date()	构造函数,返回当前的日期和时间
getFullYear()	返回四位数字年份
getDate()	返回一个月中的某一天 (1 ~ 31)
getMonth()	返回月份 (0 ~ 11),记得手动+1
getDay()	获取星期(0~6)
getHours()	返回 Date 对象的小时 (0 ~ 23)
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<script>
		
		var date = new Date();
		console.log(date); //Wed Jul 24 2024 11:40:26 GMT+0800 (中国标准时间)
		console.log(date.getFullYear()); //2024
		console.log(date.getMonth()+1); //7
		console.log(date.getDate()); // 24
		console.log(date.getDay());//3
		console.log(date.getHours());// 11 小时
		console.log(date.getMinutes());// 44 分钟
		console.log(date.getSeconds());//59 秒
	</script>
	
	<body>
	</body>
</html>

5.4 Math

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()	当鼠标从标签上移开时触发
onchange()	当内容改变且失去鼠标焦点时触发

七. HTML_DOM对象

我们如何根据javaScript去操作网页中的标签呢?在javaScript中认为每一个HTML标签都是一个对象,被称为HTML_DOM对象,我们在函数中要想操作该标签,可以通过一些方法先获得该标签的对象,之后就可以对该标签进行操作

7.1 通过id属性获取对象

在网页加载完毕后javaScript会生成一个document对象,里面有一个getElementById("id属性")方法,可以通过id属性获取到该标签的对象

getElementById("id属性")

通过id获取到对应的标签对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/*
			我们现在通过html标签事件触发javaScript函数了,
			需要在javaScript函数对网页的标签进行操作
			
			如何在javaScript中操作网页中的标签,
			javaScript认为网页中的每个标签都是一个对象,在js中把这一类标签对象称为html dom对象
			
			如何在javaScript中获得网页中的标签对象?
			在网页加载完毕后,在js中生成一个document对象(表示整个html文档)
			里面提供了一个方法 getElementById();
			*/
		   function test(){
			   var tobj1 = document.getElementById("txt1");
			   var tobj2 = document.getElementById("txt2");
			   
			   //操作标签对象的属性值
			   tobj2.value = tobj1.value;
			   tobj1.value = "";
			   //tobj1.type = "radio";
		   }
		</script>
	</head>
	<body>
		<input type="text" id="txt1" value=""/>
		<input type="text" id="txt2" value=""/>
		<input type="button" onclick="test()" value="测试"/>
	</body>
</html>

7.2 批量操作HTML_DOM对象

注意:以下方法,会获取到所有该标签的对象,得到的是一个对象的集合

7.2.1 通过标签名获取对象

在网页加载完毕后javaScript会生成一个document对象,里面有一个getElementsByTagName("标签名")方法,可以通过标签名获取到该类的对象的集合

getElementsByTagName("标签名")

通过标签名获取到对应的对象

7.2.2 通过name属性获取对象

在网页加载完毕后javaScript会生成一个document对象,里面有一个getElementsByName("name 属性名")方法,可以通过name属性名获取到该类的对象的集合

getElementsByName("name 属性名")

通过name属性获取到对应的对象

7.2.3 通过Class 属性获取对象

在网页加载完毕后javaScript会生成一个document对象,里面有一个getElementsByClassName("Class 属性名")方法,可以通过Class属性名获取到该类的对象的集合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function test()
			{
				//document.getElementsByName("name 属性名");
				//document.getElementsByTagName("标签名");
				// document.getElementsByClassName("Class 属性名");

				//var divobjs = document.getElementsByTagName("div"); //通过标签名匹配返回的是一个标签对象的集合,是一个集合对象,即使只有一个标签
				//var objs = document.getElementsByClassName("box");
				var objs =document.getElementsByName("a");
				for (var i = 0; i < objs.length; i++) {
					objs[i].innerHTML = "你好";
					objs[i].style.width = "200px";
				}
			}
		</script>
	</head>
	<body>
		<div class="box" name="a" style="background-color: aqua; width:100px; height:100px;"></div></br>
		<div class="box" name="a" style="background-color: aqua; width:100px; height:100px;"></div></br>
		<div class="box" name="a" style="background-color: aqua; width:100px; height:100px;"></div>
		<input type="button" onclick="test()" value="测试"/>
	</body>
</html>

八. 计时

javaScript可以让代码在一定的时间间隔后在执行,而不是在被调用后立即执行,我们称之为计时事件

setTimeout(“函数”,”时间”)	在程序运行的指定时间后在执行某个函数
clearTimeout(setTimeout的返回值)	取消setTimeout(),setTimeout有一个返回值
setInterval(“函数”,”时间”)	每隔指定时间重复调用某个函数
clearInterval(setInterval的返回值)	取消setInterval(),setInterval有一个返回值

Only Ai Ming

关注

12
点赞
踩
17

收藏

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

javaScript是由美国网景公司开发的一种脚本语言,起初叫LiveScript,和java一样也是一种面向对象的语言,后面和Sun公司合作,改名为javaScript不用编译,靠解释器解释就能运行的语言 eg:SQL,HTML,CSS,python等javaScript和HTML,CSS的关系HTML是结构,CSS是样式,javaScript是行为javaScript通过function关键字来定义一个函数,格式如下function:定义函数的关键字functionName:函数名。
复制链接

扫一扫