java学web——day04【javaScript总结&ECMAScript知识小汇总】

最新推荐文章于 2024-03-23 12:00:18 发布

Singinwind

最新推荐文章于 2024-03-23 12:00:18 发布

阅读量180

点赞数

分类专栏： JavaWeb Java 文章标签： js javaweb

本文链接：https://blog.csdn.net/u012184326/article/details/80375375

版权

JavaWeb 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

Java

19 篇文章 0 订阅

订阅专栏

一、【前言】

emmmm，标题太高级了。ECMAScript是对javaScript的简称。据我所知，javaScript是由ECMAScript、DOM、BOM三部分组成的。ECMAScript包含js的基础知识。就像是java的基础知识是Java SE一样。概念不用多深究。只要知道这章总结的是JS的基础知识。

那个，知识零零散散的。会按照序号来。都是案例组成的。我觉得比较有意思的，要掌握的。

1.给按钮添加事件:

在js中，我们有时要通过JS给标签动态添加一个事件。以下是案例:

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			window.onload = function(){
				document.getElementsByTagName("button")[0].onclick =onBtnClicked;
				
			};
			function onBtnClicked()
			{
				alert("点我点我");
			}
		</script>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body >
		<button> 按钮 </button>
	</body>
</html>

注意了:onclick = onBtnClicked 这个后面不要加括号。不然就直接一次性运行，并不会添加成功

2.改变一个标签的文本内容:

JS能做到任意改变标签内的文本内容，innerHTML表示的是这个标签包含的所有内容。inner表示的是这个标签包含的文字内容：

使用js的onclick事件触发Js函数，获取到了p标签，插入新的标签(纯粹练手创造新元素的方法，其实直接修改就好了)

<!DOCTYPE html>
<html>
	<head>
		<!--一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。-->
		
		<!--innerHTML是指某个网页元素内部的代码,
		而innerTEXT是指某个网页元素的文本内容-->
		<script>
			function show()
			{
				var content = document.getElementById("content");
				var srcContent = content.innerText;
				content.innerHTML = "<font color='aquamarine'>你成功改变了我</font>";
				
                                var newPTag = document.createElement("p");  //创建了一个新的结点
				newPTag.innerHTML = "<span style='color:red'>修改成功!被替代的文本内容是:"+srcContent+"</span>";
				document.getElementsByTagName("body")[0].appendChild(newPTag);  //新的结点添加到body标签中
				
			}
		</script>
		<meta charset="UTF-8">
	</head>
	<body>
		<h1 id = "title" οnclick="show()">点击我显示文本内容</h1>
		<p id = "content">请点击上面的内容，真正的我才会出现哦</p>
	</body>
</html>

3.开关灯案例:

使用js的onclick事件触发Js函数，进而来修改灯图片的地址值，按钮的文本值。

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			function turn_on_ff()
			{
				var swith = document.getElementById("switch");
				var light_img = document.getElementById("light_img");
				
				//获取图片路径父路径:
//				var imgParentSrc = light_img.src.substring(0,light_img.src.lastIndexOf("/")+1);
				var imgParentSrc = "../img/";
				//判断开关的状态
				if(swith.innerText == "开灯")
				{
					//设置灯灭的图片
					light_img.src=imgParentSrc+"eg_bulbon.gif";
					//设置开关的值
					swith.innerText = "关灯";
				}else
				{
					//设置灯亮的图片
					light_img.src=imgParentSrc+"eg_bulboff.gif";
					
					//设置开关的值
					swith.innerText = "开灯";
				}
			}
		</script>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img id = "light_img"src="../img/eg_bulboff.gif" style="display: block;"/>
		<button id = "switch" οnclick="turn_on_ff()" style="margin-left: 25px;margin-top: 20px;">开灯</button>
	</body>
</html>

4.给输入框加入提示信息:

我们在让用户往输入框输入东西的时候，往往要给一个灰色文字的提示，来增加体验。这个用了js事件中的onfocus 触发焦点事件和 onblur离开焦点事件。这个案例是比较常用了。

<!DOCTYPE html>
<html>
	<head>
		<script>
			//全局变量
		

			//文档加载后自动执行:
			
			onload = function(){
				var inputText = document.getElementById("inputText");
				setInputStyle();
			}
			//添加输入框的提示文字样式
			function setInputStyle()
			{
				inputText.style.color = "gray";
				inputText.value= "请输入信息";
			}
			//获取焦点失去提示信息
			function inputTextOnFocus()
			{
				inputText.value = "";
			}
			function inputTextOnBlur()
			{
				if(inputText.value == "")
				{
					inputText.value = "请输入信息";
				}
			}
			function onBtnClick()
			{
				if(isNaN(inputText.value))
				{
					alert("请输入数字");
				}
			}
		</script>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
		<input type="text" id = "inputText" οnfοcus="inputTextOnFocus()" οnblur="inputTextOnBlur()" /><input id="btn" οnclick="onBtnClick()" type="button" value="点击这里" />
	</body>
</html>

5.js输出文本中的换行:

<!DOCTYPE html>
<html>
	<script type="text/javascript">
		window.onload = function()
		{
			var pTag = document.getElementsByTagName("p")[0];
			pTag.innerText = "沿着江山起起伏伏温柔的曲线 \n放马爱中原爱的北国和江南";
		}
	</script>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p></p>
	</body>
</html>

6.数组的声明:

js中数组还是很常用的。注意它的三种声明方式:

<!DOCTYPE html>
<html>
	
	<!--数组能装任意类型的数据-->
	<head>
		<script type="text/javascript">
			onload = function() {
				var p1 = document.getElementById("p1");
				var p2 = document.getElementById("p2");
				var p3 = document.getElementById("p3");
				
//				第一种声明方式
				var arrays1 = new Array();
				arrays1[0] = "My";
				arrays1[1] = "Name"
				arrays1[2] = "is";
				for(var i = 0; i < arrays1.length; i++) {
					p1.innerText += arrays1[i] + "\n";
				}
				
//				第二种声明方式
				var arrays2 = new Array("Simons","Hello","JavaScript");
					for(var i = 0; i < arrays2.length; i++) {
					p2.innerText += arrays2[i] + "\n";
				}
					
//				第三种声明方式
				var arrays3 = ["World",true,123,123.0];
				
				for(var i = 0; i < arrays3.length; i++) {
					p3.innerText += arrays3[i] + "\n";
				}
			}
		</script>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<p id="p1"></p>
		<p id="p2"></p>
		<p id="p3"></p>
	</body>

</html>

7.js中的对象声明:

<!DOCTYPE html>
<html>

	<head>
		<!--应该是要给对象的成员赋值的-->
		<script type="text/javascript">
			onload = function() {
				getStudentInfo();
			}
			function getStudentInfo()
			{
				var student = {
					id:0,
					name:"",
					age:0
				};
				var p1 = document.getElementById("p1");
				var p2 = document.getElementById("p2");
				var p3 = document.getElementById("p3");

				student.id = "a001";
				student.name = "Simons";
				student.age = "18";

				p1.innerHTML = p1.innerHTML + student.id;
				p2.innerHTML = p2.innerHTML + student["name"];
				p3.innerHTML = p3.innerHTML + student.age;
			}
		</script>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<p id="p1">id:</p>
		<p id="p2">Name:</p>
		<p id="p3">Age:</p>
	</body>

</html>

8.清空内容:

很多情况下，我们要清空变量的内容，直接使用null就好了

<!DOCTYPE html>
<html>
	<!--Undefined 和 Null
	Undefined 这个值表示变量不含有值。
	可以通过将变量的值设置为 null 来清空变量。-->
	<head>
		<meta charset="UTF-8">
		
		<script type="text/javascript"> 
		onload = function()
		{
			var p = document.createElement("p");
			var a = 25;
			a = null;
			p.innerHTML = "a的值:"+a;
			var  body = document.getElementsByTagName("body")[0];
			body.appendChild(p);
		}
	</script>
	</head>
	<body></body>
	
</html>

9.少了序号9 后面再补上：

补一个常见的符号吧:

\n   换行
\t   制表符
\b   空格
\r   回车
\f   换页符
\\   反斜杠
\'   单引号
\"   双引号

10.来看看js的变量声明由多么弱智:

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			onload = function()
			{
					alert("下面来看看弱变量类型有多弱");
					var studentName = new String;
					var age = new Number;
					var isTall = new Boolean;
					var score = new Array;
					var GoodAt = new Object;
						
					isTall = 123;
					score = "123456";
					alert("好假哦:明明是boolean值 :"+isTall);
					alert("这个成绩也能打印出来，它并不是数组？？？"+score);
			}
		
			
		</script>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

11.js支持的EMCAScript 五种原始数据类型:

Undefined、Null、Boolean、Number 和 String。。。其中Number即可以是整数，也可以是浮点数。

typeof 可以获取一个变量的数据类型

<!DOCTYPE html>
<html>

    <head>
        <!--ECMAScript 有 5 种原始类型（primitive type），
        即 Undefined、Null、Boolean、Number 和 String。-->

        <!--Undefined 类型-->
        <!--如前所述，Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。-->
        <script type="text/javascript">
            onload = function() {
                var a = "is a String";
                var b = 123;
                var c;
                var b = null;
                alert(a + "变量类型:" + (typeof a));
                alert(b + "变量类型:" + (typeof b));
                alert(c + "变量类型:" + (typeof c));
                alert(b + "变量类型:" + (typeof d));
            }
            
//            Null 类型
//另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。


//        Number 类型
//ECMA-262 中定义的最特殊的类型是 Number 类型。这种类型既可以表示 32 位的整数，还可以表示 64 位的浮点数。
        </script>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
    </body>

</html>

12.字符串解析成数字:

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			onload = function f1()
			{
				var num1 = parseInt("1234");
				var num2 = parseInt("4567");
				
				alert(num1+num2);
				//输出结果:5801
				
				
				var num3 = Number("123.225");
				var num4 = Number("12.22");
				alert(num3+num4);
				//输出结果:135.445
				
			}
		</script>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
	</body>
</html>

13.来看看instanceof 判断变量是哪种类型的用法:

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			onload = function()
			{
				var a = "123";
				var b = new String("123"); 
				alert(a instanceof String);//输出false 必须声明引用类型
				alert(b instanceof String);//输出true 有确定的引用类型
				
			}
		</script>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

14.回顾一下如何使用位移运算符:

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
		onload = function f2()
		{
			var a=8<<2;
			//8的二进制:1000
			//<<2表示最前面的1向右边位移2个位置:10000.
			//得出位移后二进制的十进制结果表示是:32
			alert(a);
		}
		</script>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

15.JS中的for-in语句:

<!DOCTYPE html>
<html>

	<head>
		<script type="text/javascript">
			onload = function() {
				var arrays = new Array();
				arrays[0] = "My";
				arrays[1] = "Name";
				arrays[2] = "Is";
				arrays[3] = "Simons";
				for(var a in arrays) {
						document.getElementsByTagName("body")[0].innerHTML += arrays[a]+"\n";
					}
					
			}
		</script>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>

	</body>

</html>

16.js支持闭包:

也就是函数可以调用函数外的变量:

<!--闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。-->
		<script type="text/javascript">
			var array = new Array();
			array[0] = "My";
			array[1] = "Name";
			array[2] = "Is";
			array[3] = "Simons";
			
			
			onload = function()
			{
				alert(array);
			}
		</script>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

未完待续...

Singinwind

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
java学web——day04【javaScript总结&ECMAScript知识小汇总】

一、【前言】 emmmm，标题太高级了。ECMAScript是对javaScript的简称。据我所知，javaScript是由ECMAScript、DOM、BOM三部分组成的。ECMAScript包含js的基础知识。就像是java的基础知识是Java SE一样。概念不用多深究。只要知道这章总结的是JS的基础知识。那个，知识零零散散的。会按照序号来。都是案例组成的。我觉得比较...
复制链接

扫一扫

专栏目录