javascript快速入门

最新推荐文章于 2024-07-08 16:22:29 发布
最新推荐文章于 2024-07-08 16:22:29 发布
阅读量198 收藏
点赞数
分类专栏： javaweb 文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Persuit_hero/article/details/120401112
版权

文章目录

一、JavaScript的组成

  1. ECMAScript:（核心）规定Js语法和基本对象

  2. DOM: 文档对象模型 处理网页内容的方法和接口 标记型文档 html 操作文档元素

  3. BOM: 浏览器对象，操作浏览器

二、JavaScript的引入

  1. 内部脚本方式
    <script type = "text/javascript">       //type 可省略
        //Js脚本内容 从上到下顺序执行
    </scrpit>
   <!-- 理论上可以放在任何地方-->
  1. 放在外部文件任何html都可以引用
    <script type = "text/javascript" src = "js路径">
        //里面不写代码， 不会执行
    </script>

三、JavaScript的语法规范

1. 注释

  • 单行注释： //

  • 多行注释：/**/

2. 变量

1. 变量的声明：

var 变量名; (未赋值的默认值 undefined)

2. 变量的声明和赋值

var 变量名 = 值;

3. 变量的类型：

1.基本数据类型：

  1. string: 字符串类型 “” 与’’ 都表示字符串
  2. boolean: 布尔类型 true false
  3. number: 数字类型 任意数字
  4. null: 空 一个占位符
  5. undefined: 未定义类型 只有一个固定值undefined

由于JavaScript是弱类型语言，看变量类型的时候不能一下子看出来，用typeof运算符可以判断变量的类型

var str = 1; str = true; str = null; //一个变量只要被声明出来可以赋值任何类型
用typeof运算符可以判断 一个变量类型 typeof(str) 但是有一个bug typeof(null) == object

2.引用数据类型:
通常叫做类class， 但是javascript没有编译过程，所以没有类的概念

标志创建方式:
var str = new String();
var str = new String; js独有

3. 运算符

1. 比较运算符：

  1. ===（比较具体值和类型） str1 = 10; str2 = “10”; 结果false

  2. == （比较具体值） str1 = 10; str2 = “10”; 结果true
    其他都和Java一样

2. 逻辑运算符： &&(与) ||(或) ！(非)

4. 正则对象

1. ReqExp对象的创建方式
 var reg = new RegExp("表达式");     //基本开发不用
 var reg = /^表达式$/                    //直接量(开发常用)
                                       // ^开始   $结束       是正则对象
2. ReqExp 对象方法

test(字符串); //如果字符串全部字符符合正则表达式返回true 否则 false

3. 正则对象使用注意事项

/^表达式$/ 只有一个字符不符合就 false 全部符合才是true( 用于表单校验)

/表达式/ 只要有一个字符符合就为true 全部符合才为false

5. JS数组对象

1. JS数组的特性： JS数组可以看出Java中ArrayList集合

数组中每一个成员的类型没有限制且数组的长度可以任意修改

2. JS数组的四种创建方式

  1. var arr = [1,2,3,“a”,true]; //常用的JS数组

  2. var arr = new Array(); //创建JS数组，默认长度为0 1 2 常用

  3. var arr = new Array(); //创建JS数组，默认长度为4

  4. var arr = new Array(“1”,ture); //创建JS数组 初始化

3. JS数组的常用属性/方法

  1. 属性： length: 数组长度

  2. 方法：

  • join(string): 可以将数组每个元素根据string给出字符连接每个数组元素 对原先数组不影响

  • reverse(): 将数组元素反转

  • push(): 往数组尾添加元素并且 返回新的长度

  • pop(): 删除并返回数组最后一个元素

6. 全局函数

1. 执行

eval(string)函数: 把传进去的字符串当作脚本代码执行 这个字符串只能是基本数据类型字符串string还可以把JSON字符串转化为对象

2. 编码和解码

URL/URI编码: 中文及特殊符号 16进制
作用: 保证数据传递的完整性

  • encodeURI(string) 把字符串编码尾URI

  • decodeURI(string) 解码某个编码URI

3. URI与URL的区别

URL: 统一资源定位器(包含http://)， 定位网络资源的位置
URI: 统一资源标识符(包含资源名 )， 标识详细的网络名称

例如:

  • http://www.lzjer.com/ 是URL
  • index.html 是URI
  • http://www.lzjer.com/index/html 既是URL也是URI
4. 字符串转数字

1 parseInt(string) 解析字符串返回一个整数 (小数部分直接舍弃)

2 parseFloat(string) 解析一个字符串返回一个浮点数 (如果碰到无法解析的数字 直接停止 parseFloat(“11.5a5”) == 11.5

注：如果第一位就不符合直接返回 NAN(不是一个数字)
NAN是一个数字标识 不是一个数字(Not A Number)

7. 自定义函数

1. 函数的格式：

function 方法名(参数列表){
函数体;
}
注意：

  • 参数的定义无需var关键字， 直接使用
  • javascript的函数体， return可以写， 也可以不写， 可以写return的值也可以return;
  • 不写return的返回值是undefined

例如:

			function getSum(a,b){
				return a + b;
			}
2. 自定义函数注意事项
  • javascript中没有重载，只有方法覆盖，最后定义的重名函数会覆盖掉前面的函数
  • 既是实参与函数的形参不匹配，也不影响正常使用
  • 如果形参为赋值，就会使用默认的undefined

8. 自定义对象

1. 利用function函数 创建对象

无参数格式
function 对象名(){
函数体;
}
例子：

					//声明了一个对象
				function Person(){
					
				}
				//创建了Person对象
				var p = new Person();
				alert(p);		//出现	[object Object]	创建成功

this代表当前类对象 Person

		function Person(){
			this.name = "小芳";
			this,age = 18;
		}
		
		var p = new Person();
		alert(p.name);
		alert(p.age);

为属性赋值方式

		//1. 构造参数赋值
		function Person(a,b){
			this.age = a;
			this.name = b;
		}
		var p = new Person(17,"小芳");
		
		//2. 调用对象的属性赋值
		function Person(a,b){
			this.age = a;
			this.name = b;
		}
		var p = new Person(17,"小芳");
		p.name = "小李";
2. 对象的直接量 (Json形式)

格式： var 对象名 = {属性名1:“属性值1”, 属性名2,“属性值2”,…}; 直接 把对象创建出来了 不需要在new对象

创建初始化创建属性和属性值

	var p = {name:"小芳", age:12};
	alert(p.name + "-------" + p.age)
	p.name = "小王吧";
	alert(p.name);

四、BOM对象

1. BOM对象是什么有什么作用

BOM(Browser Object Model) 浏览器对象模型

作用：用来执行浏览器相关的操作（例如：浏览器的地址栏， 弹出消息）

一般情况下，window代表了BOM对象

注意：windo对象是Javascript的内置对象，适用window对象调用方法、属性的时候可以省略window不写
（比如alert()是window的方法 但是都是直接写 alert()）

​

2. 消息框

  1. alert(); 弹出警告框

  2. boolbean confirm(); 确认框 (显示确定 取消)

有一个返回值 当点确定的时候返回true 取消返回false

			var b = confirm("你好");
			alert(b);

3. 定时器

1. 循环定时器的设置和取消

1.启动循环定时器：
setInterval(“调用方法”,毫秒值); 每过多少毫秒调用一次参数（方法） 返回值是一个id）( 通常提醒用户做什么事情)

					function run1(){
						alert("run1");
					}
					setInterval("run1()", 2000);

2.取消循环定时器
clearInterval(循环定时器的id);

					function run1(){
						alert("run1");
					}
					
					var id = setInterval("run1()", 2000);
					
					clearInterval(id);

​
​

2. 一次定时器的设置和取消

1.启动一次性定时器
setTimeout(“调用方法”,毫秒数); 返回值是一个id 只提醒一次

2.取消一次定时器:
clearTimeout(id);

		function run1(){
			alert("run1");
		}
		//启动一次定时器
		var id = setTimeout("run1()", 2000);

		//停止一次性定时器
		clearTimeout(id);

​

4. location对象

1. location对象的属性：

  1. href //当前浏览器地址栏的完整URL
	var url = location.href;		//获取当前URL
		
		location.href = "";				//修改URL

小需求：两秒后跳转百度

	function run(){
		location.href = "http://www.baidu.com";			//跳外网一定要写http://
	}
	
	setTimeout("run()",2000);

五、 DOM对象

1. DOM对象是什么有什么作用？

DOM(Document Object Model) 文档对象模型

DOM是将标记型文档中所有的内容(标签， 文本， 属性) 都封装成对象

通过操作DOM对象的属性或者方法，来达到控制或者改变HTML展示效果（特效）

2. DOM树介绍

在这里插入图片描述

			<html>
				<head>
					<title>	文档标题</title>
				</head>
				
				<body>
					<a href = "">我的链接</a>
					<h1>我的标题</h1>
				</body>
			</html>

上述HTML文档被浏览器 由上到下依次解析， 加载加载到浏览器内存

其中：

  • 每个标签都会被加载成DOM树上的一个元素节点对象
  • 每个标签的属性都会被加载成DOM树上一个属性节点对象
  • 每个标签的内容都会被加载成DOM树上一个文本节点对象
  • 整个DOM树， 是一个文档节点对象，即DOM对象
  • 一个HTML文档加载到内存中就会形成一个DOM对象

DOM树的特点：

  • 每个节点都是节点对象
  • 常见的节点关系：父子节点关系
  • 文本节点对象没有子节点（本身是叶子节点）
  • 每一个节点都有父节点（除了根节点）

3. 获取元素节点对象

DOM对象 document.
获取元素节点对象的四个方法

  • getElementById() 通过id 获取对象 找不到返回null

  • getElementByName() 通过name获取所有符合元素对象
    返回对象数组 找不到返回空

  • getElementByTagName() 通过元素标签名获取所有符合的对象
    返回数组对象

  • getElementByClassName() 通过元素名class属性获取所有符合的对象
    返回数组对象

    注意：
    这边获取节点对象要放在最下面 防止前面的标签没有被加载到浏览器

		<!DOCTYPE html>
		<html lang="en">
			<head>
				<meta charset="UTF-8">
				<title>获取元素节点对象</title>
			</head>
			<body>
				<input type="button" id = "iid" class="kike" name="kk"/>
				<input type="text" id = "lzj" class="kike" value="有钱"/>
				<input type="button" id = "sm" />
				<input type="button" id = "kkk"  name="kk"/>
				<ui>
					<li>lzj</li>
					<li>    </li>
				</ui>
				<script>
					var v = document.getElementById("lzj");
					alert(v);

					var arr = document.getElementsByClassName("kike");
					alert(arr.length);

					var arr1 = document.getElementsByName("kk");
					alert(arr1);

					var arr2 = document.getElementsByTagName("li");
					alert(arr2.length);
				</script>
			</body>
		</html>

4. 元素对象常见属性值

  1. value
    元素对象.value 获取元素对象value属性值
    元素对象.value=属性值 改变元素对象value属性值

  2. className
    元素对象.className 获取元素对象的class属性
    元素对象.className=属性值 设置对象的class属性值

<!DOCTYPE html>
<html lang="en">
	<head>
	   
		<title>元素对象常见属性</title> 
	</head>
	<body>
		<input type="text" id="t1" value="你好" class="kkk"/>
		<script>
			var d = document.getElementById("t1");
			alert(d.value +"----"+  d.id + "----"+d.type +"-----"+d.className);

			
		</script>

	</body>
</html>
  1. checked
    元素对象.checked 获取元素对象的checked属性值
    元素对象.checked 设置元素对象的checked属性值
    checked的属性值是true||false 标识单选框||复选框有无选中
<!DOCTYPE html>
	<html lang="en">
		<head>
		   
			<title>元素对象常见属性</title> 
		</head>
		<body>
		   
			<input type="checkbox" id="hobby" />
			<script>
			 

				var c=document.getElementById("hobby");
				alert(c.checked);
				c.checked=true;
				
			</script>

		</body>
	</html>
  1. innerHTML
    元素对象.innerHTML 获取元素对象innerHTML属性值 就是文本内容
    元素对象.innerHTML=“属性值” 设置元素对象的innerHTML属性值
<!DOCTYPE html>
	<html lang="en">
		<head>
		   
			<title>元素对象常见属性</title> 
		</head>
		<body>
		
			<span id="s1">今天天气真好</span>
			<script>
				var s = document.getElementById("s1");
				alert(s.innerHTML);
				s.innerHTML+= "，是啊 阳光明媚";
			</script>

		</body>
	</html>

六、JS事件

1. JS事件是什么？有什么作用

通常鼠标或者热键的动作我们称之为事件

点击、表单提交、值发生改变、鼠标移入、鼠标移出

通过JS事件，我们可以完成页面指定的特效

2. JS事件驱动机制

页面上面的特效，我们可以理解在JS事件驱动机制来进行如下
JS事件驱动机制：
事件源：
事件：
监听器：
注册监听器：

<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="UTF-8">
		 
			<title>事件驱动机制</title>
			<script>
				function run(){
					alert("run");
				}
			</script>
		</head>
		<body>
			<input type="button" id="click" onclick="run()" value="点我"/>
		</body>
	</html>

事件源：按钮
事件: 点击事件 onclick
监听器: run()方法
注册监听器：οnclick=“run()”

3.常见JS事件

1. 点击事件

οnclick=“需要执行方法” 来绑定 方法 一点击触发执行该函数

2. 焦点事件

聚集焦点事件：
onfoucus=“需要执行方法” 绑定方法 鼠标一点击某个地方 获取焦点

失去焦点事件： οnblur=“需要执行方法” 绑定方法 原本点着某个地方 当鼠标不点鼠标点击其他地方失去焦点

3. 域内容改变事件

οnchange=“需要执行方法” 值改变了就执行绑定方法

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script>
			function run(){
				alert("值改变了");
			}
		</script>
	</head>
	<body>
		<select onchange="run()">
			<option>北京</option>
			<option>上海</option>
			<option>南京</option>
		</select>
	</body>
</html>
4. 加载完毕事件（用的多）

οnlοad=“需要执行方法” 加载完成后 触发绑定的放
例如body加载完成后弹出窗口

	<script>
		function run(){
			alert("弹出");
		}
	<script>
	<body onload="run()">
	</body>
5. 表单提交事件 （一般用于表单校验）

οnsubmit=“需要执行方法” 表单提交后 触发绑定方法
如果要获取返回值 οnsubmit=“return 需要执行方法”; 如果οnsubmit=true; 允许表单提交 如果false阻止提交

6. 键位弹起事件

οnkeyup=“需要执行方法”

7. 鼠标事件

鼠标移入事件:οnmοuseοver=“需要执行方法”; 只要鼠标移入绑定的组件 就触发绑定方法

鼠标移出事件:οnmοuseοut=“需要执行方法” 只要鼠标溢出绑定组件 触发绑定方法

4. JS事件两种绑定方式

1. 事件句柄绑定：

将事件以属性的形式写到标签内部，进而绑定对应的函数

绑定一个方法

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
	   
		<title>Document</title>
		<script>
			function run(){
				alert("你好？");
			}
			function run1(a ){
				alert(a);
			}
			function run2(obj){
				alert(obj.value);
			}
		</script>
	</head>
	<body>
		<!-- 无参方法 -->
		<input type="text" value="1111" onclick="run()"><br>
		<!-- 有参方法 -->
		<input type="text" name="1111" id="1111" onclick="run1('你好')"><br>
		<!-- 有参方法   参数是对象 this代表本个标签元素对象 -->
		<input type="text" value="12345" onclick="run2(this)"><br>
	</body>
</html>

绑定多个方法

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
	   
		<title>Document</title>
		<script>
			function run(){
				alert("你好？");
			}
			function run1(){
				alert("aka");
			}
			function run2(){
				alert("skr");
			}
		</script>
	</head>
	<body>
		<!-- 执行的顺序就是绑定的顺序 -->
		<input type="text" value="1111" onclick="run(),run1(),run2()"><br>
		
	</body>
</html>

事件句柄绑定方式优缺点：
优点：
1. 开发快捷
2. 传参方便
3. 可以绑定多个函数

缺点： JS和HTML代码高度融合，不利于部门项目的维护 (耦合性太大)

2. DOM绑定方式： 使用DOM相应属性曲绑定事件

格式：

DOM对象.JS事件=方法名； （一次只能绑定一个方法）

//建议使用
DOM对象.JS事件=function(){
方法1();
方法2();
}
(绑定匿名方法，可以绑定多个方法函数 相当于Java中的匿名内部类，建议使用)

//当页面加载完调用
			window.onload=function(){
				run1();
				run2();
				run3();
			}

		
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script>
			function run1(){
				alert("run1");
			}
			function run2(){
				alert("run2");
			}

			//由于页面是顺序执行的 只有页面加载完 通过id获取到节点元素对象
			window.onload=function(){
				var t1=document.getElementById("t1");
				t1.onclick=function(){
					run1();
					run2();
				}
			}
		</script>
	</head>
	<body>

		<!-- 
			为文本框    onclick事件绑定两个函数 run1()  run2()
		 -->
		<input type="text" id="t1">
	</body>
</html>
DOM绑定的优缺点

优点：使HTML和JS代码分离

缺点：不能传递参数 （已解决通过匿名函数可以 =function(a){}）
一次只能绑定一个方法 （已解决通过匿名函数可以）

JunMain
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript快速入门
ggbondd的博客
02-26 297
js概念 一门客户端脚本语言 运行在客户端浏览器中。每一个浏览器都有JavaScript的解析引擎 脚本语言：无需编译，直接被浏览器解析执行 功能 可以控制HTML元素，让页面有动态效果，增强用户和HTML页面的交互过程 JavaScript发展史 一开始各种客户端脚本语言很乱，ECMA制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式 JavaScript=ECMAScript+JavaScript自己特有的东西（BOM+DOM） ECMAScript：客户端脚本
JavaScript脚本语言快速入门
weixin_55071129的博客
04-04 2849
目录 一、JavaScript入门 二、事件处理 三、常用对象 四、DOM技术 一、JavaScript入门 什么是JavaScript 一种不需要编译，直接嵌入HTTP页面中的，把静态页面转变成支持用户交互并相应应用事件的动态页面。经常用于进行数据验证，控制浏览器，生成时钟，日历和时间戳文档等 特点 解释性 基于对象 事件驱动 可以直接对客户端的输入做出响应，无需经过服务器 安全性 跨平台 语法 JavaScript区分大小写 每行结
JavaScript--快速入门
weixin_74268571的博客
03-13 665
js的认识和基本使用，等腰三角形，九九乘法表及表格版
JavaScript-01-笔记
qq_24410589的博客
06-12 187
JavaScript基本语法 输入输出语句：prompt()、alert()、console.log()、document.write() 变量和常量：let、const 数据类型：boolean、null、undefined、number、string、bigint typeof 关键字：用于判断变量的数据类型 运算符：算数、赋值、逻辑、比较、三元运算符 流程控制和循环语句：if、switch、for、while 数组：数据类型和长度没有限制，let 数组名 = [长度/元素] 函数：类似方法，抽取代码，
JS快速入门
白豆五的博客
12-05 5745
JavaScript （简称JS），是一门跨平台、面向对象的脚本语言（弱类型语言），而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。
JavaScript快速入门.docx
09-05
JavaScript 快速入门 JavaScript 是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。它是作为开发 Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，例如 Node.js。JavaScript 的标准是...
javascript快速入门Source.rar
12-04
这个"javascript快速入门Source.rar"压缩包文件很可能是为了帮助初学者快速掌握JavaScript的基础知识和实际应用。以下是对其中可能包含的内容的详细解读： 1. **基础概念**：JavaScript的基础包括变量、数据类型...
Javascript快速入门教程
12-13
Javascript快速入门教程！精要地介绍了Javascript的语法元素、语法结构，并给出了非常实用的小例子！
javascript 快速入门
01-13
作为一个快速入门的话题，我们将深入探讨JavaScript的基础知识，帮助有编程经验的初学者快速上手。 1. **变量和数据类型**： JavaScript支持多种数据类型，包括基本类型（如字符串、数字、布尔值）和引用类型（如...
JavaScript快速入门经典 中文
04-06
总的来说，JavaScript快速入门需要掌握ECMAScript的基本语法、DOM的使用以及BOM的操作，同时熟悉开发环境和调试工具，理解变量的概念和规则，这些都是初学者建立坚实基础的关键步骤。随着经验的积累，可以深入学习更...
JavaScript教程快速入门
qq_47897078的博客
12-27 243
JavaScript快速入门 基本语法 语法 JavaScript的语法和Java语言类似，每个语句以;结束，语句块用{...}。但是，JavaScript并不强制要求在每个语句的结尾加;，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;。 例如，下面的一行代码就是一个完整的赋值语句： var x = 1; 下面的一行代码是一个字符串，但仍然可以视为一个完整的语句： 'Hello, world'; 下面的一行代码包含两个语句，每个语句用;表示语句结束： var x = 1; v
JavaScript简明教程之快速入门
GarfieldEr007的专栏
03-27 3143
JavaScript代码可以直接嵌入到网页的任何地方，不过我们通常把它们放到head中 html> head> script> alert('Hello World'); script> head> body> ... body> html> 由...包含的代码就是JavaScript代码，它将直接被浏览器执行 第二种方法就是把Ja
js-快速入门
weixin_45592273的博客
09-17 116
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
最新发布
Vinca@的博客
07-08 855
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值