JavaScript学习

最新推荐文章于 2024-05-03 23:30:14 发布

小路飞~

最新推荐文章于 2024-05-03 23:30:14 发布

阅读量194

点赞数

分类专栏： web学习

本文链接：https://blog.csdn.net/qq1416412681/article/details/90259581

版权

web学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述
JavaScript简介：

<!-- 
语言简介
	1、语言分为解释型和编译型：js是解释型语言
	2、语言分为强类型和弱类型：js弱类型
	3、语言分为面向对象、面向过程、面向原型、面向函数：js是一个大杂烩
	
语法规范
	1、多条语句可以写在同一行，也可以写在多行，如果写在同一行，则必须用分号分割每一个语句
	2、行尾可以用分号，也可以不用分号
	3、注释：同java
 -->

1.HelloWorld

方式一：

<body>
	<!-- html事件注册：
			在标签上添加 onxxx事件 = "js脚本"
			缺点：和html耦合在一起
	 -->
	<button id="btnId" onclick="alert('hello javascript')">SayHello</button>
</body>

方式二：

<head>
<meta charset="UTF-8">
<title>HelloWorld空白</title>

<script>
	/* 
		javascript的执行：
			在浏览器中内嵌了javascript的解释引擎，被js引擎执行
			和html一起被浏览器解释执行：自上而下
			
		Dom事件注册：
			1、获取dom对象
			2、注册事件
	*
	*/
	window.onload /* 事件注册 */ = function(){ //匿名函数
	
		var btn = /* window. */document.getElementById('btnId');
		//alert(btn);//阻塞，用户不点击“确定”，页面会挂起
		console.log(btn);
		btn.onclick = function(){
			alert('hello js')
		}
	}

</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>

2.基本语法

（1）变量

声明：使用var关键字
使用： (js是弱类型语言)
var a;
a = 1;
a = “atguigu”;
a = true;
变量命名规范参考java命名规范
语句使用;结束

（2）基本数据类型及所对应的包装类

string -> String
number -> Number
boolean ->Boolean
null:
	var money = null;
	var username = document.getElementById('username');
	console.log(money);//null
	console.log(username);//null
undefined:
	var date;
	console.log(date);
	console.log(ggg);//这个b会报错  is not defined,因为从未定义

（3）对象
Js是基于对象的语言

<!-- 
	对象的分类：
		（1）内置对象（ECMA）：Object、Array、Date、String、Number、Boolean、Function
		（2）用户自定义对象：继承自Object（原型是Object）
		（3）宿主对象（W3C：浏览器DOM）：document、window	
 -->

创建方式1：var obj = new Object();
动态为对象分配属性和函数
obj.uname = “songsong”;
obj.info = function(){alert(“我叫：”+this.username)}
通过对象名.属性名/对象名.函数引用()可以获取属性值或执行函数。

创建方式2：{};
在创建时可以直接设置属性和函数
Var obj = {
	uname : ”liuyou”,
	age : 18,
	info : function(){alert( this.uname )}
	};

（4）运算符

==与===的区别：==是只比较内容，如果数据类型不一样，则会先转换成
数值在进行比较

特殊的情况：
	**console.log(null == false); //0 ==  0 但是结果是false
	//console.log(null == null);这个是true
	console.log(null == 0);//false
	console.log(NaN == NaN);//false**
3、if环境下的boolean运算
首先将()中的内容转换成boolean值
注意：
	非0即为true
	非空字符即为true
	null在布尔环境中会转换成fasle
	undefined在布尔环境中会转换成fasle

（5）函数-基本语法
1、函数的定义：无需定义返回值类型
function关键字函数名(参数列表){
函数体
}
2、函数的调用：
函数名()，可以在定义前调用，也可以在定以后调用。js解释引擎现将函数加载到内存中，然后从上到下解释执行
3、函数的参数
无需定义数据类型
4、函数的返回值
函数体内如果有return语句，那么返回值的数据类型就是return的数据类型
函数体内如果没有return语句，那么返回值是undefined
5、同名函数
js中没有函数的重载，后定义的函数覆盖先定义的函数
形式参数和实际参数的个数不一致的情况
1、实际参数少，多余的形参的值是undefined
2、实际参数多，多余的实际参数可以使用arguments数组获取
只要在函数中定义的变量，无论在哪定义，益率提升到函数的第一行
函数内不写var声明的变量。在全局范围内也可以被访问到，污染全局空间
（6）函数-声明式函数

/* 
		声明式函数的定义：
			将函当做变量定义
	*/
	
	var a = function(){/* 将匿名函数赋值给变量a，a就引用了匿名函数 */
		console.log('function a');
	};
	/* 
		声明式函数的调用：
			必须先定义，后调用
	*/
	a();

3.事件

	地雷
兵工厂生产完成	不会爆炸
埋设到指定地点	不会爆炸
触发引线	爆炸

	函数
声明	不会执行
绑定到指定控件上	不会执行
触发事件	执行

1.html事件

<script>

	//1、兵工厂制作地雷：函数声明
	function upperCase(){
		//根据id获取一个元素
		var usernameDom = document.getElementById('username');
		console.log(usernameDom);//调用tostring
		console.dir(usernameDom);//打印对象可调用的属性、事件和方法
		var username = usernameDom.value;
		usernameDom.value =  username.toUpperCase(); //string => String
	}
</script>

</head>
<body>

	<!-- 2、选择埋地雷的地点：选择注册函数的地点 -->
	大写转换：<input id="username" onchange="upperCase()"><!-- 3埋地雷：注册函数 -->
	
	<!-- 4、等待有人踩雷：等待有人触发被注册的事件 -->

</body>

2.dom事件
（1）

<body>
	大写转换：<input id="username">


	
	<!-- 先渲染dom，再查找dom -->
	<script>
	
		//1、选择埋地雷的地点：选择注册函数的地点
		var usernameDom = document.getElementById('username');
	
		//2、兵工厂制作地雷：函数声明
		var upperCase = function(){
			//根据id获取一个元素
			//当函数内定义局部变量时，局部变量覆盖同名的全局变量
			//当函数内没有和全局变量同名的局部变量时，直接使用全局变量
			//var usernameDom = document.getElementById('username');
			console.log(usernameDom);//调用tostring
			console.dir(usernameDom);//打印对象可调用的属性、事件和方法
			var username = usernameDom.value;
			usernameDom.value =  username.toUpperCase(); //string => String
		}
		
		//3埋地雷：注册函数
		usernameDom.onchange = upperCase
		
		//4、等待有人踩雷：等待有人触发被注册的事件
		
	</script>
</body>

（2）

<!-- 先渲染dom，再查找dom -->
<script>
	var init = function() {

		//1、选择埋地雷的地点：选择注册函数的地点
		var usernameDom = document.getElementById('username');

		//2、兵工厂制作地雷：函数声明
		var upperCase = function() {
			//根据id获取一个元素
			//当函数内定义局部变量时，局部变量覆盖同名的全局变量
			//当函数内没有和全局变量同名的局部变量时，直接使用全局变量
			//var usernameDom = document.getElementById('username');
			console.log(usernameDom);//调用tostring
			console.dir(usernameDom);//打印对象可调用的属性、事件和方法
			var username = usernameDom.value;
			usernameDom.value = username.toUpperCase(); //string => String
		}

		//3埋地雷：注册函数
		usernameDom.onchange = upperCase

		//4、等待有人踩雷：等待有人触发被注册的事件

	};
	
	//注册onload函数
	//window.onload = init();//错误：加圆括号直接触发函数的执行
	window.onload = init;//正确：不加圆括号是将init的引用赋值给onload事件
	
</script>

</head>
<!-- onload事件：当页面加载完成后再调用init()函数 -->
<!-- <body onload="init()"> -->
<body>
	大写转换：
	<input id="username">

</body>

3.事件对象

<script>
//arguments：参数列表
//event：事件对象
function showCoords(event){
	console.log(event);
	console.log('x坐标：' + event.clientX + ', y坐标：' + event.clientY);
}
</script>

</head>
<body onmousemove="showCoords(event)">
	<h1>事件对象</h1>
</body>

4.event

<script type="text/javascript">
	//借助window.onload事件,在这个页面加载完成后执行程序代码
	window.onload = function(){
		
	};
</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>

4.嵌入方式

借助HTML标签的事件属性

–结构与行为耦合，不推荐

	<button id="btnId" onclick="alert('hello')">SayHello</button>

head标签内

–无法获取body中的节点

<script type="text/javascript">

	alert('hello');
</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>

body标签后面

–不符合习惯

<body>
	<button id="btnId">SayHello</button>
	
	<!-- 嵌入方式3：在<body>标签的最后：这个位置可以直接方便的获取到dom元素 -->
	<!-- 优点：优化了页面html部分的加载速度，使用户可以更早的看到html的代码 -->
	<script type="text/javascript">
		var btnIdDom = document.getElementById('btnId');
		console.log(btnIdDom);
	</script>
</body>

使用window.onload

–完美解决

<script type="text/javascript">
	window.onload = function(){
		var btnIdDom = document.getElementById('btnId');
		console.log(btnIdDom);
	};
</script>

外部js文件的方式

	<!-- 如果在script标签上添加了src属性，则<script>标签之间不可以写js代码 -->
	<script src="script3.js">
		//console.log('第二个script标签');//错误的写法
	</script>

5.DOM

文档对象模型Document Object Model

–DOM定义了访问和处理 HTML 文档的标准方法。是W3C国际组织制定的统一标准，在很多计算机语言中都有不同实现
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
–整个文档是一个文档节点 document
–每个 HTML 元素是元素节点 Node
–HTML 元素内的文本是文本节点
–每个 HTML 属性是属性节点
–注释是注释节点
节点：Node——构成HTML文档最基本的单元。
节点分为五类 Node
–文档节点(Document)：整个HTML文档的相关信息封装后得到的对象。
–元素节点(Element)：构成HTML文档最基本的元素，对应HTML文档中的HTML标签
–文本节点(Text)：HTML标签中的文本内容
–属性节点(Attribute)：元素的属性
–注释节点(Comment)：html注释
在整个文档范围内查询元素节点

根据id值查询【返回一个具体节点】:
document.getElementById(“id值”)
根据标签名查询【返回节点数组】:
document.getElementsByTagName(“标签名”)
根据name属性值查询【返回节点数组】:
document.getElementsByName(“name值”)
在具体元素节点范围内查找子节点

查找全部子节点【返回节点数组】:
element.childNodes
查找第一个子节点【返回节点对象】:
element.firstChild
查找最后一个子节点【返回节点对象】:
element.lastChild
查找指定标签名的子节点【返回节点数组】:
element.getElementsByTagName(“标签名”)
查找指定元素节点的父节点:

element.parentNode
查找指定元素节点的兄弟节点

查找前一个兄弟节点:
node.previousSibling
查找后一个兄弟节点:
node.nextSibling

innerHTML

返回对象的起始位置到终止位置的全部内容,包括Html标签。
读取元素内部HTML代码
元素对象.innerHTML
修改元素内部HTML代码
元素对象.innerHTML=HTML代码

小路飞~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习

JavaScript简介：...
复制链接

扫一扫

专栏目录