javascript基础回顾（简要演示）

最新推荐文章于 2024-01-02 00:14:53 发布

HiTMT

最新推荐文章于 2024-01-02 00:14:53 发布

阅读量212

点赞数

文章标签： javaScript JS

本文链接：https://blog.csdn.net/HiTMT/article/details/100663901

版权

导航目录

◉ 概述

javascript是一种脚本语言，是基于对象和事件的脚本语言。
特点：动态（声明变量时无需指定变量类型）、
弱类型（变量赋值不受类型约束，可以给变量赋值任意类型值）
javascript包括：
ECMAscript（基本语法）（由ECMA(欧洲计算机制造联合会)制定标准
DOM（文档对象模型）（由W3C(万维网联盟)制定标准）
BOM（浏览器对象模型）（每个浏览器都有自己的属性和样式）
javascript主要用途之一就是在HTML页面中控制页面元素的变化、处理数据等。

◉ 在html文档中使用javascript的方式（在哪写JS代码？）

1、在html引用js文件，javascript代码写在js文件中（项目中最常用的方式）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引用js文件 -->
		<script src="js/example.js"></script>
	</head>
	<body></body>
</html>

2、在<script></script>中写代码（简便的使用方式）

<script>	//可选属性“ type="text/javascript" ”
	alert('Hello world!');
</script>

3、在HTML的标签中，在负责事件处理的属性里写代码

<div onclick="alert('我被点击了');" ></div>

◉ 变量

声明变量

使用“var”关键字声明变量

var num = 10;

全局变量
声明在所有函数之外的变量。全局变量可被声明语句后面的所有javascript语句使用，包括函数内。
局部变量
在函数内部声明的变量（和c++、java不同，放在大括号{ }中声明的变量仍然可以被大括号的外部访问，只有在在函数内部声明的变量才无法被函数外部访问）

◉ 基本数据类型

Number、String、Boolean、Undefined、Null
以下代码将在控制台打印显示出变量的类型：

var num = 10;
var str = '';
var bool = true;
var unde;
var nu=null;
console.log('num -> '+ typeof num);
console.log('str -> '+ typeof str);
console.log('bool -> '+ typeof bool);
console.log('unde -> '+ typeof unde);
console.log('nu = '+ nu);

执行结果如下：
在这里插入图片描述

◉ 运算符

运算符类型
算数运算符	+	-	*	/	%	++	--
赋值运算符	=	+=	-=	*=	/=	%=
比较运算符	==	===	!=	!==	>	<	>=	<=
位运算符	&	\|	~	^	<<	>>
逻辑运算符	&&	\|\|	!
字符串运算符	+	+=
条件运算符	? :

◉ 控制语句

分支

◇ if 、else

if(10>12){
	alert('10>12');
}else if(10>11){
	alert('10>11');
}else{
	alert('剩余情况');
}

◇ switch 、case 、default

var x=1;
switch (x){
	case 1:
	case 2:
		console.log('是1或2');
	case 10:
		console.log('是10或1或2');
		break;		//跳出switch，不再执行后面的switch内的语句
	case 11:
		console.log('肯定是11');
		break;
	default:
		console.log('其余情况');
		break;
}
switch(true){	//这是使用逻辑表达式的用法
	case x<4:
		console.log('x<4');
		break;
	case x<7:
		console.log('4<x<7');
		break;
	default:
		console.log('其余情况');
		break;
}

◇ && 的短路操作

10>2 && console.log( '条件通过' );

解释：如果 && 前面的逻辑表达式为false，则 && 后面的语句将不会被执行；可作为简易的 if 语句使用。

循环

◇ for ( ; ; ) {}

for(var i=0;i<10;i++){
	console.log('数数：'+ i);
}

◇ for ( in ) {}

var arr=[1,2,3,4]
for(var i in arr){		//遍历数组
	console.log(arr[i]);
}
var obj={
	name:'han',
	age:19,
	say:function(){
		console.log('说话');
	}
}
for(var p in obj){		//遍历对象成员
	console.log( p +'='+ obj[p] );
}

◇ while () {}

var count=10;
while(count-- > 0){
	console.log( '我会被重复执行'+count+'次' );
}

◇ do {} while();

var arr=['我还能数数吗？',1,2,3]
var i=0;
do{
	console.log(arr[i]);
}while(++i < arr.length);

◉ 函数

函数声明

函数名以英文字母或$开头，函数名不能是关键字。

funtion fn(){
	console.log( '函数名：fn' );		// { } 内是函数体（执行内容）
}
var f = function(){
	console.log( '函数名：f' );
		//console.log()的作用：在控制台输出 “函数名：f”
}

函数调用

fn();
f();

函数参数

function printString(str){		//str是形参（名）
	console.log(str);
}
printString( '我是实参' );		// '我是参数'是实参（值）

函数返回值

var sum = function(a, b){
	return a+b;		//关键字"return"的作用：结束函数并返回一个值
}
console.log(sum(1,2));		//调用sum(1,2)将获得返回值“3”

如果函数没有return语句或return后面没有指定返回值，那么函数也会返回一个“undefined”的值，以表示未定义返回值。

函数传递

函数名可以被当成一个变量传递

function f1(){
	alert('f');
}
function f2(f){
	f();
}
f2(f1);

◉ 对象

声明对象

通过构造方法创建对象

var obj = new Object();

通过大括号{}直接声明

var obj = {
	name:'张三',	//成员属性
	age:18,
	'height':180,	//逗号分隔对象的成员
	say:function(){		//成员方法
		console.log('我'+age+'岁了');
	},
	'2019-log':'$%#&*&^&%^$',	//''通过引号可使用非规方式命名属性或方法
	'怪名#:':function(){
		console.log('怪名');
	}
}

访问对象成员

alert( obj.name );
obj.say();
//或者
alert( obj['2019-log'] );
obj['怪名#:']();

向对象添加属性或方法

obj.phone='18766666666';	//添加属性
obj.sing=function(){		//添加方法
	console.log('唱歌');
}

删除对象的属性或方法

delete obj.name;	//删除属性
delete obj.say;		//删除方法

打印对象的成员信息

console.log(obj);

遍历对象的成员

遍历对象的成员名称（包含属性和方法）

for(var item in obj){	//item将会获得各个成员的名称，item即为String类型
	document.write(item +'<br>');
}

遍历对象的成员值

for(var item in obj){
	document.write(obj[item] +'<br>');
}

若只想遍历对象的成员属性值，需要判断obj的成员是否为函数类型，用 typeof 获取成员类型

for(var item in obj){
	if(typeof obj[item] != 'function'){
		document.write(item+': '+obj[item]+'<br>');
	}
}

◉ 数组

声明数组

var arr = [1,2,3,4,5];

访问数组

console.log( arr[0] );

遍历数组

for(var i=0;i<arr.length;i++){
	console.log(arr[i]);
}
//或者
for(var i in arr){
	console.log(arr[i]);
}

数组的常用属性

length：数组的长度

var len = arr[0].length ;

数组的常用方法

push：在数组末尾添加一个元素，并返回数组的长度

var length = arr.push(3);

pop：删除数组末尾的元素，并返回该末尾元素

var lastEle = arr.pop();

splice：删除数组的一部分并返回该部分，并且可以在删除的位置再添加新元素

array.splice(开始删除的位置,删除的元素数量,要添加的元素1/数组1,…,元素n/数组n)
备注：数组参数会被拆解为各个元素后再插入到array数组中。

var arr=[1,8,9,4];
var oldName=arr.splice(1,2,[2,3]);
console.log(oldName+"\n"+arr);

	splice的巧用

//删除倒数第n个元素
arr.splice(-2);
//只插入元素
arr.splice(2,0,[1,2,3]);

sort：数组排序

var arr=[1,8,3,4,'c','b'];
arr.sort();
console.log(arr);

indexOf：返回元素的下标索引，如果没有则返回-1。

var arr=[1,8,3,4,5,'y','b'];
console.log(arr.indexOf(y));

◉ 控制台常用的显示属性信息的方法

console.log()
console.dir() //显示成员名称和成员值

◉ DOM（document object model：文档对象模型）

DOM是一种基于树的API文档（DOM 树模型）

节点类型：文本节点、元素节点、属性节点
在 HTML DOM 中，所有事物都是节点。
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
根对象：document
直接获取页面文档的元素对象

document.getElementById();		//获取指定id的元素
document.getElementsByClassName();		//获取指定类的元素（包含多个）
document.getElementsByTagName();		//获取指定标签的元素（包含多个）

通过节点关系获取元素对象

var nav = document.getElementById('nav');		//nav变量接收获取到的元素对象
nav.children;		//获取子元素
nav.childNodes;		//获取子元素的文本节点
nav.parentNode;		//获取父元素（只能为元素节点）
nav.firstElementChild;		//获取第一个子元素

获取元素的代码顺序问题

获取元素的代码要位于元素的html代码之后才能读取，因为html文档是自上而下加载读入的。也可以在onload事件中写获取元素的代码，onload事件就是等待文档加载完成后执行的。

◉ 事件

三要素

绑定的元素、事件类型、事件的处理函数

常见鼠标事件

onclick（点击）、onmouseover（鼠标移入）、onmouseout（鼠标移出）、
onmousemove（鼠标移动）、onmousedown（鼠标按下）、onmouseup（鼠标弹起）

常见键盘事件

onkeydwon（键盘按下）、onkeyup（键盘弹起）

综合演示（demo）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#onmouseDemo{background-color: #ccf;}
		</style>
	</head>
	
	<body>
		<div id="onmouseDemo">鼠标的点击、移入、移出、移动、按下、弹起事件演示</div>
		<input type="text" id="onkeyDemo" placeholder="键盘的按下、弹起事件演示" />
		
		<script>
			var onmouseDemo=document.getElementById('onmouseDemo');
			var onkeyDemo=document.getElementById('onkeyDemo');
			//事件
			onmouseDemo.onclick=function(){
				console.log('鼠标点击了');
			}
			onmouseDemo.onmouseover=function(){
				console.log('鼠标移进来了');
			}
			onmouseDemo.onmouseout=function(){
				console.log('鼠标移出去了');
			}
			onmouseDemo.onmousemove=function(){
				console.log('鼠标在里面移动了');
			}
			onmouseDemo.onmousedown=function(){
				console.log('鼠标按下了');
			}
			onmouseDemo.onmouseup=function(){
				console.log('鼠标弹起了');
			}
			onkeyDemo.onkeydown=function(e){
				console.log('键盘按下了，按键的键值是：'+e.keyCode);
			}
			onkeyDemo.onkeyup=function(e){
				console.log('键盘弹起了，按键的键值是：'+e.keyCode);
			}
		</script>
	</body>
</html>

事件冒泡

最内部的元素会最先触发事件，然后不断调用父元素的同类型事件

事件委托

就是将子元素事件需要处理的事，通过事件冒泡的机制委托给父元素处理，好处是当有多个子元素需要对同类型事件做相似处理时，可以交由父元素统一处理，而不用给每一个子元素都绑定事件，减少了内存的消耗。

阻止事件冒泡

e.stopPropagation();

◉ BOM（browser object model：浏览器对象模型）

window对象（最根部的对象）

查看window对象成员信息

console.dir(window);

window是最根部的对象，不需要直接指明window对象就可以使用window的成员

var a=10;
window.alert(window.a);
//或者
alert(a);

window的常见方法

◇ alert() 消息对话框

alert('对话框');

◇ comfirm() 确认对话框

var isOk = comfirm('你确定吗？');

◇ close() 关闭当前窗口

window.close();

◇ open() 打开指定网址的新窗口

var newWin = open('http://www.baidu.com');		//获得新的窗口对象

◇ setInterval() 设置周期执行

setInterval()设置一个线程周期执行一个函数，返回值是一个数字id，用于关闭该周期活动

var id = setInterval(function(){
	document.write('2秒又过去了');
} , 2000);	//每2秒执行上述函数
//或者
function f(){
	document.write('2秒又过去了');
} 
var id = setInterval( f , 2000);	//每2秒执行 f 函数

◇ setTimeout() 设置延时执行

setInterval()设置一个线程延时执行一次指定函数，返回值是一个数字id，用于提前关闭该函数的执行

var id = setTimeout(function(){
	alert('3秒已过');
} , 3000);	//3秒后执行上述函数

◇ clearInterval() 清除一个周期执行活动

clearInterval(id);		//id是setInterval()时获取的返回值

◇ clearTimeout() 清除一个延时执行活动

clearTimeout(id);		//id是setTimeout()时获取的返回值

◇ onload() 页面加载完成的事件

用途之一：可用于确保javascript代码前置于页面元素时仍可以获取到页面元素对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			var e = document.getElementById('e');
			console.log(e);
		</script>
	</head>
	<body>
		<div id="e"></div>
	</body>
</html>

window的常见成员对象

◇ history （历史记录，控制上下页等）

history的常用方法：

back() 返回上一页
forward() 前进到下一页
go(number | URL) 跳转到历史记录的页面

◇ location （地址）

port 属性：端口号
href 属性：当前地址（URL）

◇ screen（屏幕）

width 属性：获得屏幕高度
height 属性：获得屏幕宽度
availWidth 属性：获得有效屏幕高度
availHeight 属性：获得有效屏幕宽度

◇ navigator（导航器）

userAgent 属性：返回由客户机发送服务器的 user-agent 头部的值，包含了各种客户机的信息，如：操作系统、浏览器信息等。
appVersion 属性：返回浏览器的平台和版本信息。

◇ document（文档对象）

HTML文档对象，就是DOM（文档对象模型）的根对象 document，具体内容上面已经介绍。

◉ 常用的通用对象

Math
- abs(x)：获得 x 的绝对值
- pow(x,y)：获得 x 的 y 次幂。
- ceil(x)：获得 x 向上取整的值
- floor(x)：获得 x 向下取整的值
- round(x)：获得 x 四舍五入的值
- random()：获得 0~1 之间的随机数

◉ 常用的通用构造函数（类似于“类”的构造函数）

Date()

创建一个Date对象，将获得一个包含当前时间信息的Date对象

var d = new Date();
console.log(d);	//打印显示时间信息
console.dir(d);	//打印显示 d 对象的成员信息

◇ Date 的运算

Date对象之间可以做减法运算，运算结果的单位为毫秒。

console.log(new Date(2019,9,21) - new Date(2008,1,1)));

◇ Date 的常用方法

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回从1970 年 1 月 1 日到当前时间的总毫秒数。

HiTMT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript基础回顾（简要演示）

javascript是一种脚本语言，面向对象和事件的脚本语言//声明变量var num = 10;//基本数据类型//Number、String、Boolean、Undefined、Null例子：var flag = true;console.log( typeof flag ); //在控制台打印变量“flag”变量的基本数据类型...
复制链接

扫一扫