Wab开发————JavaScript

最新推荐文章于 2022-08-10 16:05:24 发布

不辞树

最新推荐文章于 2022-08-10 16:05:24 发布

阅读量337

点赞数 1

分类专栏： Java ee java Java学习文章标签： js javascript java 脚本语言

本文链接：https://blog.csdn.net/weixin_44051191/article/details/114701241

版权

Java学习同时被 3 个专栏收录

30 篇文章 3 订阅

订阅专栏

java

9 篇文章 0 订阅

订阅专栏

Java ee

8 篇文章 0 订阅

订阅专栏

JavaScript

JavaScript简介
JavaScript组成
JS的引入
变量声明
数据类型
运算符
分支结构
函数
事件
DOM操作
- 查询
- 修改

JavaScript简介

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

简而言之：js就是一个能够让页面产生交互的脚本语言，支持面向对象理论。
我们可以通过事件来操作html的标签，实现动态交互，页面数据校验。

JavaScript组成

1.ECMAScript，描述了该语言的语法和基本对象。
2.文档对象模型（DOM），描述处理网页内容的方法。 Document Object Model
3.浏览器对象模型（BOM），描述与浏览器进行交互的方法。 Browse Object Model

JS的引入

行内式

将js代码写入带标签内部

<input type="button" onclick="alert('Hello JavaScript')" />

内联式

添加<script></script>(可以出现在页面的任何地方,推荐<head></head>和<body>下)
编写js代码
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>引入方式</title>
		<script type="text/javascript">
			function demo(){
				alert("Hello 内联方式的js引入");
			}
		</script>
	</head>
	<body>
		<input type="button" onclick="demo()" value="内联式" />
	</body>
	
</html>

外联式

    创建一个以.js为后缀的文件，在文件中编写js代码
    在页面通过<script src=""></script>引入该文件
<script src="js/demo.js" type="text/javascript" charset="utf-8"></script>

变量声明

var 变量名=值;
var 变量名;
var 变量名,变量名;
输出方式：
alert();弹出来
console.log();浏览器的控制台 f12—>console
document.write();输出到页面

代码示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var a = 10;
			var b;
			var c='hello';
			var d = "World";
			var e = true;
			var f = false;
			var m = null;
			var n = undefined;
			alert(a);
			console.log(c);
			document.write(f);
		</script>
	</head>
	<body>	
		
	</body>
</html>

数据类型

1.Number 数字
2.String 字符串,可以使用单引或者双引

String字符串详解
属性:
length 长度
方法：
indexOf() 从前往后找，获取对应字符的下标
lastIndexof() 从后往前找，获取对应字符的下标
substring() 截取字符串中的子字符串
split() 按照某个字符将字符串分割成数组

3.Boolean 布尔有两个固定值 true，false
4.Null 空只有一个值,这个值就是null
5.Undefined 未定义，只有一个值 undefined值,并且该类型是从Null派生出来的，因此Null与Undefined在值大小上是相同的
typeof() 获取变量的类型
6.Date 日期

var d = new Date(); 创建日期对象
var time = d.getTime(); 获取从1970年1月1日开始到现在的时间段的毫秒数
var a = d.toLocaleTimeString() 获取当前时间，本地化
var b = d.toLocaleDateString(); 获取当前日期，本地化

7.数组： Array

var arr = new Array(len);
var arr = [值1,值2....];
特点：长度随意改变，值的类型随意
属性：
   length 长度
方法：
   join(String str) 将数组转变为字符串,将数组中的值以str拼接成一个字符串
比如 var arr1=["hello","demo","ok"];
   console.log(arr1.join("==="));
   hello===demo===ok

运算符

1.算数运算符
 + - *  /  %   +=  -=  /=  *=  %=       a+=b;-->  a= a+b;    ++   --
2.关系运算符
> >=  <  <=  !=  == 值的大小   ===  比较值和类型
3.逻辑运算符
&&  ||  !
4.三元运算符
表达式1?表达式2:表达式3
如果表达式1的值为true,执行表达式2，否则执行表达式3。

分支结构

逻辑分支：
if(){  //单分支

}

if(){ //双分支
   
 }else{
    
}
if(){  //多分支
   
}else if(){
         
}
...else{
    
}

switch...case
    
用法和java完全一致。

循环分支
for(var i =0;i<xxx;i++){
    
}
for(i in 变量){ // i 表示变量的下标，变量:字符串,数组
    
}
while(){
    
}

do{
    
}while()
代码示例:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环分支</title>
		<script type="text/javascript">
			//var str ="helloworld";
			var str=["hello",10,true];
			//将字符串中每一个字符单独输出
			for(var i =0;i<str.length;i++){
				console.log(str[i]);
			}
			console.log("-------------------------------")
			for(i in str){
				console.log(str[i]);
			}
		</script>
	</head>
	<body>
	</body>
</html>

函数

等价于java中的方法
function 函数名(参数列表){
    //函数体
    return xxx;
}
//声明无参无返回值函数
function demo(){
    console.log();
}
//有参无返回值函数
function demo1(a,b){
    var c = a+b;
    console.log(c);
}
//无参有返回值函数
function demo2(){
    return "hello";
}
//有参数有返回值函数
function demo3(a,b){
    var c = a+b;
    return c;
}
调用：
demo();
demo1(10,20);
demo2();
demo3(10,20);
当函数中出现return的时候，也意味着执行完return后函数就执行完毕了。

事件

在页面上操作的一种行为或者动作，比如说点击，输入，移动鼠标等等…
常用事件：
1.onload 页面加载事件
当页面标签的内容全部显示完毕后才执行
2.onclick 点击事件
3.onchange 内容改变事件一般情况在下拉选列表使用
4.onfocus 获取焦点事件
5.onblur 失去焦点事件
6.onmouseover 鼠标移入事件
7.onmouseout 鼠标移出事件
8.onkeydown 键盘按下事件
9.onkeyup 键盘松开事件

事件的使用方式：
1.
<input type="button" value="按钮" onclick="demo()"/>
2.
var obj = document.getElementById();//标签对象
obj.onclick=function(){

}
代码示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
		<script type="text/javascript">
			function demo(){
				console.log("点击事件触发...");
			}
		</script>
	</head>
	<body>
		<input type="button"  value="按钮" onclick="demo()" />
		<input type="button" id="btn" value="按钮" />
	</body>
	<script type="text/javascript">
		//获取第二个按钮标签
		var obj = document.getElementById("btn");
		obj.onclick=function(){
			console.log("第二种事件的方式触发....");
		}
	</script>
</html>

事件的触发时机代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				border: 1px solid red;
				width: 300px;
				height: 300px;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				console.log("页面加载事件触发了....");
			}
			function demo(){
				console.log("内容改变事件触发了...");
			}
			function demo2(){
				console.log("获取焦点事件触发...")
			}
			function demo3(){
				console.log("失去焦点事件触发了...")
			}
			function demo4(){
				console.log("鼠标移入事件触发了...")
			}
			function demo5(){
				console.log("鼠标移出事件触发了...")
			}
			function demo6(){
				console.log("键盘按下事件触发....")
			}
			function demo7(){
				console.log("键盘松开事件触发....")
			}
		</script>
	</head>
	<body>
		<img src="img/u=2895586678,1506213787&fm=26&gp=0.jpg" >
		<input type="text" onchange="demo()"/>
		<input type="checkbox" onchange="demo()"/>
		<br>
		<select name="" onchange="demo()">
			<option value="">北京</option>
			<option value="">上海</option>
			<option value="">天津</option>
		</select>
		<input type="text" onfocus="demo2()" onblur="demo3()" />
		<br>
		<div id="btn" onmouseover="demo4()" onmouseout="demo5()">
			
		</div>
		<input type="text" onkeydown="demo6()" onkeyup="demo7()"/>
	</body>
</html>

DOM操作

dom: document object model 文档对象模型
将页面与页面中的标签全部看成对象，文档就是文档对象document，标签就是标签对象，标签中的属性我们称为对象的属性，因此我们就可以如下操作，比如标签对象.属性 ,标签对象.属性=“xxxx”;

查询

通过以下几种方式获取指定的标签对象：
1.单个对象 document.getElementById(); 通过id属性值获取标签对象
2.数组对象 document.getElementsByClassName(); 通过class属性的值获取标签对象
3.数组对象 document.getElemetsByTagName();通过标签名获取标签对象
4.数组对象 document.getElementsByName(); 通过name属性的值获取标签对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>查询</title>
		<script type="text/javascript">
			function demo(){
				var obj = document.getElementById("btn");
				console.log(obj);
			}
			function demo1(){
				var obj = document.getElementsByClassName("c1");
				console.log(obj.length);
				console.log(obj);
				console.log(obj[0]);
			}
			function demo2(){
				var obj = document.getElementsByTagName("div");
				console.log(obj.length);
				console.log(obj);
				console.log(obj[0]);
			}
			function demo3(){
				var obj = document.getElementsByName("hobby");
				console.log(obj.length);
				console.log(obj);
				console.log(obj[0]);
			}
		</script>
	</head>
	<body>
		<div id="btn">
			区域块1
		</div>
		<div class="c1">
			区域块2
		</div>
		<p class="c1">
			段落标签
		</p>
		  哈哈 <input name="hobby" type="checkbox" value="n1" >
		  嘿嘿<input name="hobby" type="checkbox" value="n2" >
		  嘎嘎<input name="hobby" type="checkbox" value="n3">
		
		<input type="button" value="按钮1" onclick="demo()"/>
		<input type="button" value="按钮2" onclick="demo1()"/>
		<input type="button" value="按钮3" onclick="demo2()"/>
		<input type="button" value="按钮4" onclick="demo3()"/>
	</body>
</html>

修改

value:值,标签控件的输入的内容,一般情况下表单控件的标签都有value属性，标签中自带value的属性的。一般这些标签都是单标签
innerHTML:标签内容,包含标签及动作等,封闭标签
innerText:标签的纯文本内容，不包含标签及动作或者样式,封闭标签
1.修改标签属性
obj.属性=“xxxx”;
2.修改标签的内容
obj.value=“xxx”;
obj.innerHTML=“xxx”;
obj.innerText=“xxx”;
3.修改标签的样式
obj.style.样式名=“样式值”;
如果样式名中有- font-size—>fontSize

样式修改与属性修改案例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改</title>
		<style type="text/css">
			.c1{
				display: none;
			}
		</style>
		<script type="text/javascript">
			//点击按钮，显示图片
			function demo(){
				//获取图片标签对象
				var imgObj = document.getElementsByTagName("img")[0];
				imgObj.style.display="block";
			}
			//将图片名称放入数组中
			var arr = ["abc.jpg","asd.jpg","gp=0.jpg","gp=01.jpg"];
			var i =0;
			//上一张
			function prevDemo(){
				i--;
				if(i<0){
					i=0;
					alert("已经是第一张了");
				}else{
					var obj = document.getElementsByTagName("img")[1];
					obj.src="img/"+arr[i];
				}
			}
			//下一张
			function nextDemo(){
				i++;
				if(i>3){
					i=3;
					alert("已经是最后一张了");
				}else{
					var obj = document.getElementsByTagName("img")[1];
					obj.src="img/"+arr[i];
				}
			}
		</script>
	</head>
	<body>
		<img src="img/u=2895586678,1506213787&fm=26&gp=0.jpg" class="c1">
		<input type="button" id="btn" onclick="demo()" value="显示图片"/>
		<div id="">
			<img src="img/abc.jpg" >
		</div>
		<input type="button" value="上一张" onclick="prevDemo()"> 
		<input type="button" value="下一张" onclick="nextDemo()" /> <br>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function checkName(){
				//判断用户名是否为空，如果为空则给提示信息，如果不为空则没有提示
				//1.获取标签对象
				var obj = document.getElementsByTagName("input")[0];
				var txt = obj.value;
				if(txt==null||txt==""){
					//给提示信息-->显示span标签中,提示信息为红色
					//获取span标签对象
					var spanObj = document.getElementsByTagName("span")[0];
					spanObj.innerHTML="<font style='color: red;'>用户名不能为空</font>";
				}
			}
			function demo(){
				var spanObj = document.getElementsByTagName("span")[0];
				spanObj.innerHTML="";
			}
		</script>
	</head>
	<body>
		<form action="" method="">
			用户名:<input type="text" onblur="checkName()" onfocus="demo()"/> <span></span>
		</form>
	</body>
</html>

在这里插入代码片

不辞树

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Wab开发————JavaScript

JavaScriptJavaScript简介JavaScript组成JS的引入行内式内联式外联式变量声明数据类型运算符分支结构函数事件DOM操作查询修改JavaScript简介JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格简而言之：js就是一个能够让页面产生交互的脚
复制链接

扫一扫

专栏目录