JavaScrip总结（初学）

最新推荐文章于 2024-09-23 13:35:56 发布

青衫白衣98

最新推荐文章于 2024-09-23 13:35:56 发布

阅读量171

点赞数

分类专栏： JAVAWEB 文章标签： javascript js java

本文链接：https://blog.csdn.net/weixin_44630656/article/details/107793618

版权

JAVAWEB 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

JavaScrip总结

一、JavaScript语法
二、JavaScript内置对象
三、HTML BOM
- （一）Window 对象
- （二）Document对象

一、JavaScript语法

JavaScript与Java的区别：

JavaScript的程序代码直接嵌入HTML文件中；而Java程序代码写在Java源文件中；
JavaScript是弱类型语言，比如在使用变量前可以不声明变量而直接使用；Java是强制类型语言，比如在使用变量前必须先声明变量；
JavaScript的程序代码由客户端浏览器解释、执行；Java程序则必须先编译成class文件再由JVM执行

（一）函数

函数两种的定义方式：

第一种称为定义式，可以先调用再定义；第二种称为变量式，必须先定义再使用

//函数的定义
//方法一
function test(a){//注意参数列表不能使用var
	console.log(a);
}
test(100);

result = t(12);
console.log(result);
function t(a){
	return a;
}

//方法二
var i = 1
var tt = function(name){
	console.log(i + "正在学习....");
	i++;
}
tt("Jim");//Jim正在学习....

//两种方法声明的区别
//第一种可以先使用在声明，第二种只能先声明在使用

匿名函数

//匿名函数
(function(a){
	console.log(a);
})(1);

（二）自定义对象

自定义对象的五种方式：

直接创建方式

//方法一:直接创建
var student = new Object();
student.name = "Jim";
student.dohomework = function(){
	console.log(this.name +"正在学习....");
}
student.dohomework();//函数调用

对象初始化器方式

var student = {
	name:"Tim",
	age:"12",
	dohomework :function(){
		console.log(this.name +"正在学习....");
	},
	eat :function(){
		console.log(this.name +"正在吃饭....");
	}
}

student.dohomework();
student.name = "Lucy";
student.dohomework();

构造函数方式

function Student1(name){
	this.name = name;
	this.dohomework= function(){
		console.log(this.name+"正在学习....");
	}
}

var stu = new Student1("Lucy");
stu.dohomework();

prototype原型方式

function Student2(){			
}
Student2.prototype.name = "Kitty";
Student2.prototype.dohomework = function(){
	console.log(this.name+"正在学习....");
};

var student = new Student2();
student.dohomework();

混合的构造函数/原型方式

function Student3(name){
	this.name = name;
}
Student3.prototype.dohomework = function(){
	console.log(this.name+"正在学习....");
}
var student = new Student3("jobim");
student.dohomework();

（三）其他

数据类型

类型	定义
字符串	字符串类型数据需要使用单引号或双引号引起来
数字	JavaScript 只有一种数字类型，数字可以是整形也可以是小数还可以是科学（指数）计数法
布尔	JavaScript中布尔类型的数据只能是true 或 false
数组	数组下标从0开始，所以获取第一个元素的语法是：数组变量名[0]
对象	JavaScript中对象由大括号分隔；括号内部，对象的属性以属性名 : 属性值的形式来定义，属性之间由逗号分隔；获取属性值的方法有两种：对象变量名.属性名；对象变量名[“属性名”]
null	声明变量并为其赋值null
undefined	只声明了变量但是没有为变量赋值

var只是声明变量时的关键字，不是数据类型，浏览器根据具体数据自动识别数据类型
如果声明的变量没有赋值，则其值实际上是 undefined

//声明变量一律使用var关键字,var不是数据类型
var age = 12;//数字
var name = "jim";//字符串
var flag = true;//boolean
var names = ["Kate","Jim"];//数组类型
var obj = new Object();//对象
var abc;//仅声明，不赋值
var result = 1/2; 
//result 等于0.5
const a = 120;//const用于声明常量

对字符串和数字进行加法运算

var x=5+5;//10
var x="5"+"5";//55
var x=5+"5";//55
var x=5+5+"5";//105
var x="5"+5;//55
var x="5"+5+5;//555

== 与 ===

console.log(5 == "5");//true;
console.log(5 === "5");//false;===全等于，比较数值类型
console.log(5 === 5);//true;

for/in循环

var names = ["a","b","c"];
for(var index in names){
	console.log(index);//index表示的是下标
	console.log(names[index]);
}

二、JavaScript内置对象

（一）Array对象

创建方法：

var arr = new Array();//空数组
var arr = new Array(10);//创建一个长度为10的数组
var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
var arr = [];//空数组
var arr = [9,8,5,"java"];//创建数组直接实例化元素

属性和方法：

属性和方法	描述
length	数组长度
prototype	向对象添加属性和方法。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
pop()	删除并返回最后元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度
reverse()	反转数组
sort()	排序

（二）Data对象

创建方式：

var d = new Date();

属性和方法：

属性和方法	描述
prototype	向对象添加属性和方法。
getFullYear()	年
getMonth()	月 0-11
getDate()	日 1-31
getDay()	星期 0-6
getHours()	小时 (0 ~ 23)
getMinutes()	分钟 (0 ~ 59)
getSeconds()	秒数 (0 ~ 59)
getMilliseconds()	毫秒(0 ~ 999)
getTime()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数
toLocaleString()	获得本地时间格式的字符串

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;//月份从0开始
month = month<10?"0"+month:month;
var day = date.getDate();
var week = date.getDay();

week = "日一二三四五六".charAt(week);
week = "星期"+week;
var hour = date.getHours();
hour = hour<10?"0"+hour:hour;
var minute = date.getMinutes();
minute = minute<10?"0"+minute:minute;
var second = date.getSeconds();
second = second<10?"0"+second:second;

var result = year +"-"+month +"-"+day+" "+week+" "+hour+":"+minute+":"+second;

（三）Event对象

常用事件

常用事件	描述
onclick	点击事件
onchange	域内容被改变的事件
onfoucus	获得焦点的事件
onblur	失去焦点的事件
onmouseover	鼠标悬浮的事件
onmouseout	鼠标离开的事件
onload	加载完毕的事件

添加事件的方法：

方法一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//事件
			function test(){
				console.log("helloworld");
			}
		</script>
	</head>
	<body>
		<input type = "button" value = "按钮" onclick="test()" />
	</body>
</html>

方法二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type = "button" value = "按钮" />
		<script>
			//此方法必须放在id之后
			document.getElementById("button").onclick = function(){
				console.log("hello")
			}
		</script>
	</body>
</html>

3.方法三：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function test(){
				console.log("helloworld");
			}
			document.getElementById("tes").addEventListener("onmouseout",function(){
				console.log("hello");
			});
		</script>
	</head>
	<body>
		<div style="width:200px;height: 200px;border: 1px solid red;" id = "tes" ></div>
		
	</body>
</html>

三、HTML BOM

BOM：Browser Object Model，即浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

（一）Window 对象

alert()及confirm()

alert()：显示带有一段消息和一个确认按钮的警告框
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false

setInterval()及clearInterval()

setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
clearInterval()：取消由 setInterval() 设置的 timeout。

function t(){
	console.log(111);
}
var id = setInterval("t()",1000);
clearInterval(id);

setTimeout()和clearTimeout()

setTimeout()：在指定的毫秒数后调用函数或计算表达式。由 setTimeout() 返回的 ID 值可用作 clearTimeout() 方法的参数。
clearTimeout()：取消由 setTimeout() 方法设置的 timeout。

var id = setTimeout("t()",6000);
//在指定的毫秒数后调用函数或计算表达式。由 setTimeout() 返回的 ID 值可用作 clearTimeout() 方法的参数
clearTimeout(id);
//取消由 setTimeout() 方法设置的 timeout

（二）Document对象

Document对象方法

方法	描述
getElementById()	返回对拥有指定 id 的第一个对象的引用
getElementsByName()	返回带有指定名称的对象集合
getElementsByTagName()	返回带有指定标签名的对象集合
getElementsByClassName()	返回带有指定类名称的对象集合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "ttt" class = "z">
			<span>郑州大学</span>
		</div>
		<p class = "z">黄河</p>
		<p class = "z">黄河</p>
		<input type = "checkbox" name = "hobby" />
		<input type = "checkbox" name = "hobby" />
		<input type = "checkbox" name = "hobby" />
		
		<script>
			var element = document.getElementById("ttt");
			console.log(element);
			
			var element1 = document.getElementsByClassName("z");
			for(var i = 0;i<element1.length;i++){
				console.log(element1[i]);
			}
			console.log("#########");
			
			var element2 = document.getElementsByTagName("p");
			for(var i = 0;i<element2.length;i++){
				console.log(element2[i]);
			}
			console.log("#########");
			
			var element3 = document.getElementsByName("hobby");
			for(var i = 0;i<element3.length;i++){
				console.log(element3[i]);
			}
			
			function ttt(){
				var elementt = document.getElementById("user_name");
				console.log(elementt.value);
			}
		</script>	
	</body>
</html>