Java的JS学习

最新推荐文章于 2023-11-10 13:52:17 发布

Yuncoco

最新推荐文章于 2023-11-10 13:52:17 发布

阅读量294

点赞数

本文链接：https://blog.csdn.net/Yuncoco/article/details/90734818

版权

文章目录

一 JS的认识
二系统函数(global)
三简单对象
四数组
五 BOM浏览器对象模型

一 JS的认识

F12

1.1 JS的前世今生

js全称JavaScript,它是一个脚本编程语言！由于当年Java比较火,它改成JavaScript(火了)。有一个叫做网景通的公司，做了一套语言:javascript！花了8天时间把这门语言写了出来！
排错非常的难！！！

1.2 引入JS的三种方式

js引入有三种方式(内嵌,外部,外连)
script标签可以写在任意位置(一般写后面)
script必需是双标签
script有src的话,内部就不要再写代码了

1.2.1 直接在a标签中完成

<!--
	第一种js写法:行内写法
	a：超连接标签
	 href:跳转的路径
	 	http:代表要跳转的一个协议
	 	javascript(伪协议):代表我这里要执行javascript代码
	 		alert:代表弹出的意思
-->
<!--<a href="http://www.baidu.com">点我啊！！！</a>-->
<a href="javascript:alert(0);">点我啊！</a>

1.2.2 在script标签中完成

<script>
    alert(0);
</script>

1.2.3 外连式

创建一个js文件

alert(0)

引入相应的文件

<script src="js/index.js"></script>

1.3 JS的基本语法

1.3.1 变量的定义

定义变量都使用var
JS的变量是有类型的(number,string,boolean)
其它的一些常量
- NaN : 出现非数字
- Infinity:除数为0
- null:空(需要赋值)
- undefined:未定义(什么都不写)
变量可能重复定义(不建议)
变量的类型可以随意修改

	/**
	 * number：数字类型
	 * 
	 */
	var a = 10.67;
	//查询一个变量的类型
	console.debug(typeof a);
	
	var b= "haha";
	console.debug(typeof b);
	
//			console.debug("abc"*5); //NaN
//			console.debug(10/0); //Infinity

    var c;
    console.debug(c);

1.3.2 和Java不一样的地方

注意两等与三个等(全等于)
false,undefined,"" 都代表假(其它的都是真)
|| 判断后返回的是第一个为真的值
注意一个坑(判断不要写成=号了)

1.4 JS的函数

函数(面向过程,如C)就是方法(面向对象:如Java)

js函数语法
- 只需要function修饰(其它的都不管)
- 要返回直接return(没有写它会自动返回一个undefined)
- 接收参数直接写名称
- 调用函数只和函数名有关 函数名()

function 方法名([a,b,c,..]){
    //完成功能
}

匿名函数(没有名字的函数)

var say = function(){alert(0)};

1.5 全局变量与局部变量

和Java是完全一样的

全局变量的案例

var msg = "我是全局的";
function change(){
	msg = "我被修了！";
}
change();
console.debug(msg); //我是全局的

局部变量的案例

var msg = "我是全局的";
function change(){
	//定义了局部变量
	var msg = "我被修了！";
}
change();
console.debug(msg);

1.6 小结

函数就是方法(面向对象)
函数的语法: functoin 函数名([a,b,...]){方法体}
匿名函数 var fun01 = function(){}
全局与局部变量和Java一样

二系统函数(global)

isNaN() -> 判断是否不是数字

//1.isNaN -> 判断一个值是否不是数字
//   不是数字就返回true，是数字就返回false
console.debug(isNaN(7)); //false
console.debug(isNaN("小张"));  //true

parseInt() -> 解析一个值,并返回相应数字
- 只会返回整数
- 会解析字符串前面部分的数字

//2.parseInt:解析一个值，返回相应的数字格式
//  只转前面的数字问题部分
var name = "25.456";
console.debug(typeof name); //string
var num = parseInt(name);
console.debug(typeof num);  //number
console.debug(num)

eval() -> 计算字符串,把这个字符串当脚本执行

//3.eval:计算字符串
// 比如说这个代码是我从其它地方读取出来的，而读取的值只能是字符串，那我怎么来执行这个代码？
//var s  = "alert(0);";
var a = 10;
var b = 20;
var fh = ""; //-,*,/
var result = eval(a + fh + b);
console.debug(result);

三简单对象

3.1 js对象

3.1.1 创建对象

// 面向对象:创建一个类
//  首字母大写：代表一个类
// 它是一个类，是一个函数，也是一个构造器
function Person(){}

// 这个对象的属性与方法是可以随便添加的
var p = new Person();

3.1.2 添加属性与方法

// 面向对象:创建一个类
//  首字母大写：代表一个类
// 它是一个类，是一个函数，也是一个构造器
function Person(){}

// 这个对象的属性与方法是可以随便添加的
var p = new Person();
p.name = "高书记";
p.age = 45;
p.sex = true;

p.say = function(){
	alert(0)
}

console.debug(p);
p.say();

3.1.3 this

/**
 * 这个this是指向一个对象
 * 		this:谁调用,this就指向谁
 */
function User(name,age){
	this.name = name;
	this.age = age;
	this.say = function(){
		alert(this.name);
	}
}

var u1 = new User("李书记",22);
u1.say();

var u2 = new User("王八蛋",45);
u2.say();

3.1.4 值传递与引用传递

和Java中是一致的

普通的值就是值传递

//普通的值就是值传递
//1.定义一个全局变量
var num1 = 15;
//2.准备一个方法
function change(num2){
	num2 = 20;
}
//3.调用方法
change(num1);
console.debug(num1); //15

对象就是引用传递

//对象是引用传递
//1.定义一个对象
function Person(name,age){
	this.name = name;
	this.age = age;
}
var p1 = new Person("吕皮皮",34);
//2.准备一个方法
function change(person){
	person.name = "莫大师";
}
//3.调用方法
change(p1);
console.debug(p1); //{name:"莫大师",age:34}

3.2 本地对象

Object

一切皆对象,我们的所有对象都是Object

Array:数组

Boolean:用于做判断

var flag = new Boolean(true);
var flag = true; -> 建议使用

Date:日期时间

//创建一个日期对象
var date = new Date();
console.debug(date);
console.debug(date.getFullYear()); //年  2019
console.debug(date.getMonth()); //月 4 (从 Date 对象返回月份 (0 ~ 11))
console.debug(date.getDate()); //日 15
console.debug(date.getDay()); //星期(0是星期天)

Math : 数据计算

提供了一大堆数学中用到的方法(正弦,对数,…)
ceil():天花板(向上舍入)
floor():地板(向下舍入)
round():四舍五入
random():随机数

//Math:数字对象
// ceil:天花板(向上舍入)
console.debug(Math.ceil(5.6)); //6
console.debug(Math.ceil(5.1)); //6
console.debug(Math.ceil(5.01)); //6

// ceil:地板(向下舍入)
console.debug(Math.floor(5.6)); //5
console.debug(Math.floor(5.1)); //5
console.debug(Math.floor(5.01)); //5

// round：四舍五入
console.debug(Math.round(5.6)); //6
console.debug(Math.round(5.1)); //5
console.debug(Math.round(5.01)); //5


//random() 返回 0 ~ 1 之间的随机数。 
for(var i=0;i<10;i++){
	//Math.random() ：随机数
	//Math.random() * 10) : 0到9.x的值
	//console.debug(Math.random() * 10);
	console.debug(parseInt(Math.random() * 10));
}

String:字符串

length:长度
substr(起始位置,截取长度):截取字符串
substring(起始位置,结束位置):截取字符串
split(分割符):把字符串根据分割串变成数组

var str = 'abcdefg';
console.debug(str);
//1.length:获取字符串的长度
console.debug(str.length);
//2.substr(第几个位置,截取的长度):
console.debug(str.substr(2,3)); //cde
//3.substring(第几个位置开始,到哪个位置结束)
console.debug(str.substring(2,4)); //cd


var names = "张三丰,李四民,王麻子";
console.debug(names);
console.debug(names.split(",")); //Array(3) [ "张三丰", "李四民", "王麻子" ]

Global:全局对象(已经学过)

isNaN(),parseInt(),eval()

四数组

4.1 数组的声明

注意：同一个数组里面，可以装各种类型

直接new出来 new Array();

//方式一：定义数组
var arr = new Array();
arr[0] ="哈哈";
arr[1] = 123;
arr[2] = true;
arr[10] = "老子天下第一";
console.debug(arr);

new出来后确定长度 new Array(5)

//方式二：定义数组(确定长度)
var arr = new Array(5);
arr[0] = "哈哈";
arr[10] = "有这么厉害嘛?";
console.debug(arr);

定义[] -> 建议使用

//方式三:定义数组
var arr = ["a","345"];
arr[5] = "xxxx";
console.debug(arr);

4.2 数组的方法调用

length:数组的长度
join:把数组变成一个字符串 arr.join(",")
splice():对数组进行增删改

/**
 * 第一个参数:起始位置
 * 第二个参数:删除的个数
 * 第三个参数(后面):添加的值
 */
arr.splice(1,1,"大哥");

4.3 遍历数组

一般还是普通的for循环
for…in
- 遍历数组拿到的是下标
- 遍历对象拿到的是属性

	//方式一：定义数组
	var arr = ["a","c","b","e"];
	//循环拿到咱们的值
//  for(var i=0;i<arr.length;i++){
//		console.debug(arr[i]);
//	}

	//循环数组的时候, key是下标
	for(var key in arr){
		console.debug(arr[key]);
	}
	
	
	var obj = {};
	obj.name = "张三";
	//obj["name"] = "李四";
	obj.age = 45;
	
	//console.debug(obj["name"]);
	
	//怎么拿到这个对象的所有属性
	//循环对象的时候, key是属性
	for(var key in obj){
		console.debug(key);
		console.debug(obj[key]);
	}

4.4 prototype

使您有能力向对象添加属性和方法
在类上加上这个属性或者方法后,这个类的所有对象都会有这个能力

Date.prototype.format = function(){
	return this.getFullYear() +"-" + this.getMonth() +"-" + this.getDate();
}

五 BOM浏览器对象模型

5.1 什么是BOM

BOM是browser object model的缩写，简称浏览器对象模型，这个BOM有如下内容:
使用面向对象的思想来抽象浏览器相关组件。
打开一个窗口就是一个window对象
窗口里面使用location表示地址栏
窗口的历史记录使用history来表示
浏览器的信息使用navigator来表示
窗口里面的内容使用document来表示
窗口中的框架使用framss来表示

5.2 Window对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//window是咱们的顶层对象
			//console.debug(window);
			//alert:弹出框(window可以不写的)
			//window.alert("王小八");
			
			//confirm:确认框 -> 返回一个boolean值(确定:true,取消:false)
			//var result = window.confirm("你真的要删除我嘛？");
			//var result = confirm("你真的要删除我嘛？");
			//console.debug(result);
			
			/**
			 * prompt：输入框
			 * 	第一个参数:提示要输入什么
			 *  第二个参数:输入框中一个默认值
			 */
			//var msg = window.prompt("评价","你们真的做得很好哦！");
			//var msg = prompt("评价","你们真的做得很好哦！");
			//console.debug(msg);
		</script>
	</head>
	<body>
		
		<a href="http://www.baidu.com" onclick="javascript:return confirm('你真的要离开我嘛？');">百度来了</a>

	</body>
</html>

window.open

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我是中国人</title>
		<script type="text/javascript">
			function myopen(){
				//open:打开一个新的窗口
				window.open("http://www.itsource.cn","_blank","toolbar=no, location=no, directories=no, status=no,menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=400, height=400");
			}
		</script>
	</head>
	<body>
		
		<button onclick="myopen()">点我啊</button>

	</body>
</html>

5.3 history(历史对象-了解)

history.go(index)函数，在浏览器历史记录中跳转，正数为前跳，负数为后跳
history.back()函数，后跳;
history.forward()函数，前跳;
history.length属性，获得历史记录的长度；

5.4 location(位置对象)

window对象的location属性,保护了该窗口所装载文档的地址:location包含的常用属性:
1.hostname:文档所在地址的主机名
2.href:文档所在地址的URL地址
3.host:wend所在地址的主机地址
4.port:文档所在地址的服务端端口
5.pathname:文档所在地址的文件地址
6.protocol:装载该文档使用的协议

var loc = window.location;
for(var name in loc){
console.debug(name,loc[name]);
}

5.5 navigator(浏览器的信息对象-了解)

属性名称说明
appCodeName 产品名称
appName 应用名称
appVersion 版本号
cookieEnabled 是否允许使用cookie
language 语言
oscpu 操作系统名称
platform 操作系统平台
product 产品代号或名称，比如Gecko
productSub 产品发布日期20100701
userAgent 客户端详细信息,比如：Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.11) Gecko/20100701 Firefox/3.5.1

5.6 document对象

document对象：能反映当前页面的各种属性。
document对象的常用属性
title:显示文章的标题。
body：获取body元素节点。
bgColor:显示页面的背景色。
fgColor:显示页面的前景色。
document对象的常用方法：
write():在页面中输出文本。
writeln():在页面中输出文本，并自动换行(多一个换行符,看不出来)。

DOM_获取页面中的元素.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li name="wawa">大力娃</li>
			<li name="wawa" id="eyeWa">眼镜娃</li>
		</ul>
	
	
		<ul>
			<li>备哥</li>
			<li>关哥</li>
		</ul>
	
		<script type="text/javascript">
			//1.通过id去获取页面中的某一个元素(id是唯一的，只能拿到一个元素)
			var eyeWa  = document.getElementById("eyeWa");
			console.debug(eyeWa);
			//2.通过name去获取元素(获取的是一个数组)
			var wawa = document.getElementsByName("wawa");
			console.debug(wawa);
			//3.通过标签的名称获取元素
			var lis = document.getElementsByTagName("li");
			console.debug(lis);
		</script>
	</body>
</html>

DOM_获取dom的高度与宽度.html

<body>
		<div style="height: 100px;width: 100px; background: red;"></div>
	
		<script type="text/javascript">
			console.debug(document.body);
			//获取body的宽度(body中默认还有内边距)
			console.debug(document.body.clientWidth);
			//获取body的高度(body中的元素总共的高度)
			console.debug(document.body.clientHeight);
			
			//获到页面的宽度
			console.debug(document.documentElement.clientWidth);
			//获到页面的高度
			console.debug(document.documentElement.clientHeight);
		</script>
	</body>

DOM_元素获取.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul id="gourd">
			<li>大力娃</li>
			<li>眼睛娃</li>
			<li>金刚娃</li>
			<li id="waterWa">水娃</li>
			<li>火娃</li>
		</ul>
	
		<script type="text/javascript">
			
			//获取父亲
			var gourd = document.getElementById("gourd");
			//判断这个父亲是否有儿子
			//console.debug(gourd.hasChildNodes());
			//拿到第一个儿子
			console.debug(gourd.firstChild);
			//拿到最后一个儿子
			console.debug(gourd.lastChild)
			//拿到所有儿子
			console.debug(gourd.childNodes);
			
			console.debug("----------------------------");
			var waterWa = document.getElementById("waterWa");
			console.debug(waterWa);
			//获取到父节子
			console.debug(waterWa.parentNode);
			//获取到上一个兄弟(哥哥)
			console.debug(waterWa.previousSibling);
			//获取到下一个兄弟(弟弟)
			console.debug(waterWa.nextSibling);
			
			
		</script>
	</body>
</html>

DOM_属性的获取.html

<body>
		<img id="myImg" alt="没有图片" src="img/kt.jpg" haha="哈哈哈" />
	
		<script type="text/javascript">
			
			//attribute
			//1.拿到img元素
			var myImg = document.getElementById("myImg");
			//2.拿到img元素的属性 -> 这种方式只能获取到html标签本身支持的属性
			//console.debug(myImg.src);
			//3.修改img元素的属性
			//myImg.src = "img/2.jpg";
			
			//下面的这种操作属性的方式支持所有属性(本身，自定义)
			//获取到相应的属性节点(对象)
			console.debug(myImg.getAttributeNode("haha"));
			//获取到相应的属性值
			console.debug(myImg.getAttribute("haha"));
			//修改属性的值
			myImg.setAttribute("haha","呵呵");
		</script>
	</body>

DOM_文本的获取.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<div id="mydiv">
			<h2>我是一个中国好男儿！！！</h2>
		</div>
	
		<script type="text/javascript">
			
			var mydiv = document.getElementById("mydiv");
			//console.debug(mydiv.firstChild);
			//innerHTML是可以获取到所有信息(包含html标签)
			console.debug(mydiv.innerHTML);
			//innerText只获取文本
			console.debug(mydiv.innerText);
			
			//修改相应的值,里需加的html标签会起作用
			mydiv.innerHTML = "<h2>天下最大就是你</h2>";
			//修改相应的值,里面的html标签会原封不动展示出来
			mydiv.innerText = "<h2>真的好好看啊！</h2>";
			
		</script>
	</body>
</html>

DOM_元素操作.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button onclick="addChild()">加一个儿子</button>
		<button onclick="deleteChild()">干掉一个儿子</button>
		<ul id="gourd">
			<li>大力娃</li>
			<li>眼睛娃</li>
			<li>金刚娃</li>
			<li id="waterWa">水娃</li>
			<li>火娃</li>
		</ul>
	
		<script type="text/javascript">
			
			function deleteChild(){
				//1.获取到要删除的元素 (它没有把自己删除掉的功能)
				var waterWa = document.getElementById("waterWa");
				//2.拿到它的父亲,再让它的父亲干掉它
				waterWa.parentNode.removeChild(waterWa);
			}
			
			function addChild(){
				//通过js代表创建一个li节点(在内存中)
				var li = document.createElement("li");
				li.innerHTML = "隐身娃";
				//找到你要放入的位置(拿到父元素)
				var gourd = document.getElementById("gourd");
				//把li元素放到父元素中去
				// append:追加  Child:儿子
				gourd.appendChild(li);
			}
			
			
		</script>
	</body>
</html>

5.7事件

事件_认识.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!--
			第一种添加事件的方式:直接在元素上写 on事件名
				优势:简单 ，兼容各种浏览器的
				缺点:事件不可消除，无法一个事件添加多个方法
		-->
		<button onclick="clickMe()">点我有惊喜</button>
		
		
		<button id="mybtn">点我真的有惊喜</button>
		
		<script type="text/javascript">
			
			/**
			 * 第二种添加事件的方法:拿到元素，单独设置onclick属性
			 * 		优势:简单 ，兼容各种浏览器的(耦合度低)
			 * 		缺点:无法一个事件添加多个方法
			 */	
			//拿到相应的元素
			var mybtn = document.getElementById("mybtn");	
			//给元素添加事件
			mybtn.onclick = function(){
				alert("给你99块钱！！！！");
			}
			
			/*
			function clickMe(){
				alert("给你99块钱！！！！");
			}
			
			function clickMe2(){
				alert("给你990块钱！！！！");
			}
			*/
		</script>
	</body>
</html>

添加事件的正确方案.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//window.onload：整个页面加载完成后要触发的事件
			window.onload = function(){
				var mybtn = document.getElementById("mybtn");
				/**
				 * 为这个按钮添加一个事件监听器
				 * 	Event：事件  Listener：监听
				 *  	第一个参数:监听的事件名称
				 * 		第一个参数:事件的功能
				 * 优点:可以添加多个事件,可以移除事件
				 * 缺点:有点麻烦，不兼容所有浏览器(IE5，6，7)
				 */
				
				//addEventListener：不支持IE5，6，7
				mybtn.addEventListener("click",function(){
					alert("我又成功的回来了");
				})

//				mybtn.attachEvent("onclick",function(){
//					alert("不是IE不欢迎！！！")
//				})
			}
			
		</script>
	</head>
	<body>
		<button id="mybtn">点我真的有惊喜</button>
	</body>
</html>

5.8 定时器

定时器_执行一次.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/**
			 * setTimeout:js中内置的一个定时器(多长时间后执行某段代码)
			 * 		参数1:执行的方法(函数)
			 * 		参数2:过多长时间后执行(单位是毫秒)
			 */
//			function jump(){
//				alert(0);
//			}
//			setTimeout(jump,2000);
			setTimeout(function(){
				window.location.href = "https://www.baidu.com";
			},5000)
		</script>
	</head>
	<body>
		<h1>亲，5秒钟之后会跳转到主页面！！</h1>
	</body>
</html>

定时器_周期.html

亲， 5秒钟之后会跳转到主页面！！

	<script type="text/javascript">
		
		var myspan = document.getElementById("myspan");
		/**
		 * setInterval：周期性执行某个方法
		 * 	参数1：执行的方法
		 *  参数2：间隔的时间
		 */
		var num = 5;
		setInterval(function(){
			myspan.innerHTML = --num;
			if(num==0){
				location.href = "https://www.baidu.com";
			}
		},1000)
		
	</script>
</body>

定时器_炸弹.html

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		亲，<span id="myspan" style="font-size: 30px; color: red;">10</span>秒就完蛋
	
		<script type="text/javascript">
			
			var myspan = document.getElementById("myspan");
			var num = 10;
			//执行这个定时器方法，它会返回一个定时器对象回来
			var timer = setInterval(function(){
				myspan.innerHTML = --num;
				if(num==0){
					alert("炸弹爆炸了！ bong,bong,bong....");
					//clear:清除(清空)
					clearInterval(timer);
				}
			},1000)
			
		</script>
	</body>
</html>

Yuncoco

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java的JS学习

文章目录一 JS的认识1.1 JS的前世今生1.2 引入JS的三种方式1.2.1 直接在a标签中完成1.2.2 在script标签中完成1.2.3 外连式1.3 JS的基本语法1.3.1 变量的定义1.3.2 和Java不一样的地方1.4 JS的函数1.5 全局变量与局部变量1.6 小结二系统函数(global)三简单对象3.1 js对象3.1.1 创建对象3.1.2 添加属性与方法3.1.3...
复制链接

扫一扫