了解JavaScript

最新推荐文章于 2023-02-01 14:45:14 发布
最新推荐文章于 2023-02-01 14:45:14 发布
阅读量1.2k 收藏
点赞数
分类专栏： java 文章标签： JavaScript入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43231919/article/details/103328527
版权

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
动态脚本语言，用于为html页面增加动态功能！

总结一下 : js是动态脚本语言,用于为HTML页面添加动态功能.
js的组成部分:
	ECMAScript : 基本语法
	DOM (文档对象模型) : 对html文档进行增删改查
	BOM (浏览器对象模型) : 用于操作浏览器中的相关对象
JS的引入方式
内部引入:
	1.在 head 标签中使用 script 标签,在 script 标签中写js代码
	2.在 body 标签的最下面写 script 标签,在 script 标签中写js代码
	3.在 body 标签同级以下写 script 标签,在 script 标签中写js代码
外部引入:
	在内部引入的三个位置的 script 标签中添加 src 属性,链接 .js 文件.
	在 js 文件中写js代码.
注意 : 用作外部引入的 script 标签不能再写js代码

	//外部引入
	<script type="text/javascript" src="">
		
	</script>
	
	//内部引入
	<script type="text/javascript">
	
	</script>
JS如何声明变量?
命名规则 : 
	由字母,数字,_,$组成
	不能以数字开头
	小驼峰命名法
	可以重复命名,后面的后覆盖前面的变量名
变量生命的关键字有 var 和 let .常用的为 var .
js的数据类型
String 字符串型
number 数值类型
boolean 布尔类型
undefined 未定义类型
object 对象类型
function 函数类型
null 空类型
运算符
赋值运算符 = 
算数运算符 +  -  *  /  %  ++  --  
关系运算符 >  <  >=  <=  ==  != === !== 
	== : 只要值一致就为true
	=== : 值和类型都要一致才为true
逻辑运算符 
	&& 逻辑与  
	|| 逻辑或
	! 取反
三目运算符 ? :
JS的程序结构
js中的程序结构和java基本相同:顺序结构/分支结构/循环结构,只有增强否循环和java中不同:
for(var i in arr){
}
continue; 跳过本次循环
break; 跳出本层循环
js中的常用方法

一些方法 :

输出语句 :  console.log(); 
查看数据类型 : typeof(); 
alert("这个是弹窗内容");
获取页面中的标签:
	document.querySelectorAll("选择器"); 返回的是一个集合.
	document.querySelector("选择器"); 返回的是单个元素.
获取标签中的内容:
	(一)表单元素获取内容的方法
	.value;
	(二)普通标签获取内容的方法
	.innerText;内置文本，只能解析文本
	.innerHTML;内置html结构(包含文本，而且还可以解析标签)
js中生成随机数:
通用公式:
	[26 , 65]
	var i = parseInt(Math.random()*(65 - 26 +1))+26

字符串相关方法 :

字符串相关的方法与java中的方法大多相同.
var str1 = "你好羊肉串";
var str2 = "多少钱一串";
str1 = str1.concat(str2);      //拼接字符串 和 + 一样
var len = str1.length;         //返回字符串的长度
console.log(len);              //打印长度,在控制台中显示
str1 = str1.trim();            //去除字符串左右的空格
str1 = str1.trimLeft();        //去除字符串左边的空格
str1 = str1.trimRight();       //去除字符串右边的空格
var arr = str1.split(",");     //以","分割字符串,返回一个数组
var num =  str1.indexOf("钱");  //钱 这个字符在字符串中出现的第一次时的下表(从左往右找)

数组相关:

var arr1 = ["哈哈",1,2,3,4,5];    //创建数组
var arr2 = new Array(); 	     //创建数组不添加元素
var arr3 =  new Array(5);  		 //创建一个容量为5的数组.
arr2.push(0);    				 //在最后面添加元素
arr2.push(1);
arr2.push(2);
arr2.unshift(11);                //在最前面添加元素
arr2.pop();						 //删除最后面的元素
arr2.shift();                       //删除最前面的元素
arr1.splice(0,2); 			     //删除元素(从指定下标开始, 删除指定个数)
数组的遍历:
1.普通for循环可以遍历数组
2.增强for循环和java中不同:
for(var i in arr2){
	console.log(arr2[i]);
}
事件
鼠标事件
	单击事件 onclick
	双击事件  ondblclick
	移入/移出事件  onmouseover/onmouseout
	移动事件  onmousemove

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 100%;
				height: 1000px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
	</body>
	<script type="text/javascript">
		var div = document.querySelector("#d1");
		function randomNum(min,max){
			return parseInt(Math.random()*(max-min+1))+min;
		}
		//单击事件
//		div.onclick = function(){
//			div.style.backgroundColor = "rgb("+ randomNum(0,255)+
//   ","+randomNum(0,255)+","+randomNum(0,255)+")";
//		}
		//双加事件
		div.ondblclick = function(){
			div.style.backgroundColor = "rgb("+ randomNum(0,255)+
			","+randomNum(0,255)+","+randomNum(0,255)+")";
		}
		//移入移出事件
		div.onmouseout = function(){
			div.style.backgroundColor = "rgb("+ randomNum(0,255)+
			","+randomNum(0,255)+","+randomNum(0,255)+")";
		}
		div.onmouseenter = function(){
			div.style.backgroundColor = "rgb("+ randomNum(0,255)+
			","+randomNum(0,255)+","+randomNum(0,255)+")";
		}
		//移动事件
		div.onmousemove = function(){
			div.style.backgroundColor = "rgb("+ randomNum(0,255)+
			","+randomNum(0,255)+","+randomNum(0,255)+")";
		}
	</script>
</html>


表单事件
	聚焦事件 onfocus
		光标点击文本框那一刻叫做聚焦
	失焦事件 onblur
		光标从文本框中离开的那一刻叫失焦
	值改变 onchange
		最长用来做省市联动，在省份下拉选择框值改变的时候，为市区赋值
	提交  用普通按钮实现提交事件 form.submit();
		btn.onclick = function(){
			var form = querySelector("form");
			form.submit();
		}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="get">
			<input type="text" name="username" placeholder="请输入用户名，6~15位" />
			<span id="userInfo"></span><br />
			<input type="text" name="phone" placeholder="请输入电话号码" />
			<span id="phoneInfo"></span><br />
			<input type="password" name="pwd" placeholder="请输入密码" />
			<span id="pwdInfo"></span><br />
			<input type="password" name="cpwd" placeholder="请再次输入密码" />
			<span id="cpwdInfo"></span><br />
			<input type="button" value="提交表单数据" id="btn" />
		</form>
	</body>
	<script type="text/javascript">
		
		//封装一个错误、正确的方法
		function mistake(ele, info) {
			ele.innerText = info;
			ele.style.color = "red";
		}
		
		function correct(ele, info) {
			ele.innerText = info;
			ele.style.color = "green";
		}
		//定义四个布尔值，来保存校验是否成功
		var isUserSucc = false, isPhoneSucc = false, isPwdSucc = false, isCpwdSucc = false;
		//用户名的非空及长度校验
		var userInput = document.getElementsByName("username")[0];
		var userInfo = document.getElementById("userInfo");
		userInput.onblur = function() {
			//拿到输入框中的值
			var username = this.value;
			if (username == null || username == "") {
				mistake(userInfo, "用户名不能为空");
			} else if (username.length < 6 || username.length > 15) {
				mistake(userInfo, "用户名长度为6~15");
			} else {
				correct(userInfo, "用户名OK");
				isUserSucc = true;
			}
		}
		
		//电话号码的非空、正则校验
		var phoneInput = document.getElementsByName("phone")[0];
		var phoneInfo = document.getElementById("phoneInfo");
		phoneInput.onblur = function() {
			//拿到输入框中的值
			var phone = this.value;
			if (phone == null || phone == "") {
				mistake(phoneInfo, "电话号码不能为空");
			} else if (!(/^1[3456789]\d{9}$/.test(phone))) {
				mistake(phoneInfo, "手机号码格式不正确");
			} else {
				correct(phoneInfo, "手机号码OK");
				isPhoneSucc = true;
			}
		}
		
		//密码的非空校验
		var pwdInput = document.getElementsByName("pwd")[0];
		var pwdInfo = document.getElementById("pwdInfo");
		pwdInput.onblur = function() {
			//拿到输入框中的值
			var pwd = this.value;
			if (pwd == null || pwd == "") {
				mistake(pwdInfo, "密码不能为空");
			} else {
				correct(pwdInfo, "密码OK");
				isPwdSucc = true;
			}
		}
		
		//确认密码的非空、一致校验
		var cpwdInput = document.getElementsByName("cpwd")[0];
		var cpwdInfo = document.getElementById("cpwdInfo");
		cpwdInput.onblur = function() {
			//拿到输入框中的值
			var pwd = pwdInput.value;//密码
			var cpwd = this.value;//确认密码
			if (cpwd == null || cpwd == "") {
				mistake(cpwdInfo, "密码不能为空");
			} else if (pwd != cpwd) {
				mistake(cpwdInfo, "两次密码不一致");
			} else {
				correct(cpwdInfo, "密码OK");
				isCpwdSucc = true;
			}
		}
		
		//获取提交按钮
		var btn = document.getElementById("btn");
		btn.onclick = function() {
			//所有校验通过之后，提交表单，只要有一个不满足校验，就提示错误
			if (isUserSucc && isPhoneSucc && isPwdSucc && isCpwdSucc) {
				var form = document.getElementsByTagName("form")[0];
				form.submit();
			} else {
				alert("校验还未通过，请先输入正确的信息");
			}
		}
	</script>
</html>


键盘事件(了解)，主要用来做游戏的，比如说贪吃蛇，炸弹超人
	按下  onkeydown
	抬起  onkeyup
	长按  onkeypress
BOM的常用对象
window  浏览器窗口对象
文档加载顺序的问题可以用window.load来解决:
window.load = function(){
}
location对象可以获取主机地址,端口,协议,URL主体等内容:
location.hostname 
location.port 
location.protocol
location.pathname
history.back()在执行时，相当于点击了浏览器窗口的回退按钮！

单次定时器 settimeout

settimeout(function(){alert("两秒后执行")},2000)

循环定时器setInterval

setInterval(function(alert("两秒后执行")){},2000)
DOM基本操作

增(创建标签、添加标签)

createElement("标签名");

删

A.remove();    删除A
B.remove(A);  把A从B中删除

查

QuerySlectorall("选择器");
QuerySlector("选择器");
getElementById();  通过id获取标签
getElementByClassName();  通过类名获取标签
getElementByTagName();  通过标签名获取标签
getElementByName();  通过表单标签的name属性值获取表单标签

改

修改标签内容:
	普通标签.innerHTML
	普通标签.innerText
	表单标签.value
修改标签样式
	标签名.style.css样式名 = " ";
修改行间属性值
	标签名.行间属性=" ";
	标签.setAttribute(“行间属性名”, “行间属性值”);
新赵是我
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入了解JavaScript代码覆盖
10-16
主要介绍了深入了解JavaScript代码覆盖 ,代码覆盖提供有关是否以及可选地应用程序的某些部分被执行的频率的信息。它通常用于判定一个测试套件执行特定代码库的全面程度。,需要的朋友可以参考下
JavaScript 概述
Dailyblue的专栏
04-13 2248
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言
start7000k的博客
02-01 777
V8 引擎执行 JavaScript 代码的过程更像是编译型和解释型的结合体。那么如何理解以这种方式运行的 JavaScript 语言？现在的 JavaScript 语言，并不是一行一行的解释执行，也不是全部编译后再执行。大概的流程是，先编译当前必须的代码并执行，然后再去编译下一步必须的代码再执行。比如，一个函数是在用户点击某个按钮时才会运行，那么在用户点击按钮之前这个函数就不会被编译执行。所以，现在的 JavaScript 语言就像是不停地重复编译-执行流程的编译型语言。
JavaScrip基础知识
rqt1013_的博客
05-06 2063
一、什么是JavaScript?
JavaScript零基础入门 1：JavaScript表格简介
学Java，找哪吒
11-03 9488
在生活中经常会使用表格来表示一些格式化的数据： 比如 ：课程表 银行对账单 人名单 同样在网页中也可以使用表格来表示一些格式化的数据。 使用table标签来创建一个表格。 一、简单表格 1、代码实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!-...
day-03-JavaScript基础
Naker_的博客
12-14 192
day-03-JavaScript基础 今日内容 JavaScript概述 JavaScript基本语法 JavaScript数据类型 JavaScript运行符 JavaScript流程控制语句 JavaScript基本对象 1. JavaScript 1.1 JavaScript概念 1.1.1 JavaScript 简介 一门客户端脚本语言 服务器端的脚本语言:python php ...
深入了解JavaScript 的 WebAssembly
10-16
主要介绍了深入了解JavaScript 的 WebAssembly,它是由 Google , Microsoft , Mozilla ， Apple 等几家大公司合作发起的一个关于 面向Web的通用二进制和文本格式 的项目。 ,需要的朋友可以参考下
全面了解javascript三元运算符
10-22
下面小编就为大家带来一篇全面了解javascript三元运算符。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
全面了解JavaScript对象进阶
10-21
下面小编就为大家带来一篇全面了解JavaScript对象进阶。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
简单了解JavaScript sort方法
10-15
主要介绍了简单了解JavaScript sort方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
从零开始了解JavaScript
gdymind的博客
11-01 393
JS简介
快速了解JavaScript
Cathy
12-13 906
【前言】JavaScript学完有一段时间了，但是一直都没有好好总结就觉得自己学完感觉和没学一样，今天做了一个总结和回顾，突然觉得清晰很多。   一、What J   avaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）
你真的了解JavaScript？
weixin_34195142的博客
12-04 200
什么是JavaScript? JavaScript，通常缩写为JS，是一种高级的，解释执行的编程语言。 JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。宿主环境：浏览器（web端）、node.js（服务端） 解释型语言和编译型语言 解释型语言 这种编程语言需要利用解释器，在运行时，动态将代码逐句解释（interpret）为...
JavaScript基础 ——【了解JavaScript】
impact_factor的博客
05-04 192
了解JavaScript1. JavaScript 的诞生2. JavaScript 是什么3. JavaScript 与HTML、CSS关系4. 浏览器执行 JS5.JavaScript特点6. JavaScript的组成6.1. ECMAScript6.2. DOM6.3. BOM7. JavaScript 的作用8.常用开发工具 1. JavaScript 的诞生 在1995年时，Netscape（网景）公司（现在的Mozilla）的布兰登·爱奇（Brendan Eich）在网景导航者浏览器上首次设计
JavaScript的简单了解
心有—林夕的博客
05-05 580
JavaScript的简单了解
【JS】认识
凉快
07-20 355
定义 JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基 于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运 行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据、增加 Web 互动、加强用户体验度等。   关键字： 面向对象 解释型的程序设计语言 事件驱动 客户端脚本语言    特点 松散...
JavaScript是什么？能做什么？一篇文章带你了解JavaScript的发展史、组成及作用
思索的涟漪，突破自我
01-06 9996
一篇文章带你了解JavaScript的发展史、组成、作用、关键字… JavaScript是web开发必备的，C、C++、Java等高级语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释，Java之于JavaScript就好比雷锋和雷峰塔的关系……
已知有如下字符串，请使用恰当的字符串方法统计出子串’JavaScript’出现的次数，并把它出现的次数在浏览器控制台中输出。 其中页面中的字符串信息使用document.write显示。 let input = '上一章对JavaScript进行了概述性的介绍，从本章开始将对JavaScript进行深入的讨论。这一章将分析JavaScript的核心ECMAScript，让读者从底层了解JavaScript的编写，包括JavaScript的基本语法、变量、关键字、保留字、语句、函数等。'
最新发布
05-27
这一章将分析JavaScript的核心ECMAScript，让读者从底层了解JavaScript的编写，包括JavaScript的基本语法、变量、关键字、保留字、语句、函数等。'; let count = 0; let pos = input.indexOf('JavaScript'); while...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值