欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript基础

程序员文章站 2022-09-30 17:02:54
JS介绍 ECMAScript的历史 添加正则表达式 添加try/catch 添加"strict mode"严格模式 添加JSON支持 增加指数运算符（**） 增加Array.prototype.includes 注：ES6就是指ECMAScript 6。 尽管 ECMAScript 是一个重要的标 ......

简介

JavaScript是互联网上最流行的脚本语言，这门语言可用于web和HTML，更可广泛用
于服务器、pc端、移动端。
JavaScript是一种轻量级的编程语言
JavaScript是可插入HTML页面的编程代码
JavaScript插入HTML页面后，可由所有的浏览器执行

JavaScript用法:
HTML中的脚本必须位于<script></script>标签之间
JavaScript标签:
在HTML中插入JavaScript,使用<script>标签
在<script></script>之间书写代码
JavaScript使用限制:
在HTML中，不限制脚本数量
通常会把脚本放置于标签中，以不干扰页面内容

输出

<!DOCTYPE html>
<html>
    <head Lang="en">
    <meta charset "UTF-8">
    <title></title>
    </head>
    <body>
    <script> 
		document.write("我是孙创昱");	
		document.write("<h1>h1测试</h1>");
	</script>
    </body>
</html>

JavaScript基础

JS外部文件的使用

.html文件

<!DOCTYPE html>
<html>
    <head Lang="en">
    <meta charset "UTF-8">
    <title></title>
    </head>
    <body>
    <script  src = "myjs.js">  </script>
    </body>
</html>

.js文件

document.write("我叫孙创昱");s

JavaScript基础

JS改变标签内容

<!DOCTYPE html>
<html>
    <head Lang="en">
    <meta charset "UTF-8">
    <title></title>
    </head>
    <body>
    <p id = "pid">内容没有改变s</p>
    <script> 
		document.getElementById("pid").innerHTML="内容被改变了";
	</script>
    </body>
</html>

JavaScript基础

JS语法

JavaScript语句:
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
分号:
语句之间的分割是分号(????
注意:分号是可选项，有时候看到不以分号隔开的。
JavaScript代码:
按照编写顺序依次执行
标识符:
JavaScript标识符必须以字母、下划线或美元符号开始
JavaScript关键字是不能做标识符。
关键字如下
JavaScript基础

Js大小写敏感
Js会忽略多余的空格
单行注释// 多行注释/**/

JavaScript变量
var x = 10;
var y = 10.1;
var z = “SunCY”;

变量类型有

字符串(String)
数字(Number)
布尔(Boolean)
数组(Array)
对象(Object)
空(null)
未定义
可以通过赋值为null的方式清除变量

（字符串类型或数字类型）和字符串类型相加等于拼接所得的字符串。

<!DOCTYPE html>
<html>
    <head Lang="en">
    <meta charset "UTF-8">
    <title></title>
    </head>
    <body>
    <script> 
		var a = 1;  //数字
		var b = "scy";//字符串
		var c = true;//布尔类型
		var d = new Array();//数组类型
		d[0] = 1;  
		d[2] = "scy";
		var e = [1,2,3]; //数组类型
		var f; //未定义，可以赋值任意类型
		document.write(a+"<br/>"); 
		document.write(b+"<br/>");
		document.write(c+"<br/>");
		document.write(d+"<br/>");
		document.write(e+"<br/>");
		document.write(f+"<br/>"); 
	</script>
    </body>
</html>

JavaScript基础

JavaScript运算符

JavaScript基础
比较运算符：
“10” 和10的=运算结果为true
“10” 和10的=运算结果为false
!=和!==同理
其他类型的运算符和C语言保持一致

运算符测试：

<!DOCTYPE html>
<html>
<head Lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p>i = 10,j = 10;1+j=?</p>
    <p id="sumid"></p>
    <button οnclick= "mysum()">计算</button>
    <script>
        function mysum() {
            var i=10;
            var j=10;
            var m=i+j;
            document.getElementById("sumid").innerHTML = m;
        }
    </script>
</body>
</htmL>

结果：点击计算按钮，会显示数字20
JavaScript基础

选择语句

和C语言一致

if(){
}else if(){
}else{
}

switch(i){
	case #:
		break;
	case #:
		break;
	default:
		break;
}

循环

for循环
while循环
dowhile循环

<!DOCTYPE html>
<html>
<head Lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body> 
    <script>
        for(var i = 0;i<4;i++){
			document.write(i+"<br/>");	
		}
		var j = 5;
		while(j<7){
			j++;
			document.write(j+"<br/>");	
		}
		var k = 666;
		do{
			document.write(k);
			k++;
		}
		while(k<6)
		
    </script>
</body>
</htmL>

结果
JavaScript基础

跳转语句

continue和break和C语言用法一样

函数的使用

<!DOCTYPE html>
<html>
<head Lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body> 
    <script>
        function cal(a,b){
			var sum = a+b;
			return sum;
		}
		var res = cal(3,4);
		alert(res);
    </script>
</body>
</htmL>

运行结果
JavaScript基础

定义函数

function函数名(){
函数体; (代码块)
}
注意:
JavaScript对大小写+分敏感，所以这里的function必须小写。在函数调用时，也必
须按照函数的相同名称来调用函数。

调用函数

<!DOCTYPE html>
<html>
<head Lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body> 
	 <form>
    	<input type="button" value="按钮" onclick="cal(3,2)" >
    </form>
    <script>
        function cal(a,b){
			var sum = a+b;
			alert(sum);
			return sum;
		}
		cal(1,2);
    </script>
   
</body>
</htmL>

一开始是这个界面
JavaScript基础
点击按钮之后是这样的
JavaScript基础

带参数的函数

函数参数:
在函数的调用中，也可以传递值，这些值被称为参数
例: demo(arg1 ,arg2);
参数的个数可以为任意多，每个参数通过“",” 隔开
注意:
参数在传递时，其顺序必须一致
参数意义:
通过传递参数的个数以及参数的类型不同完成不同的功能

带返回值的函数

返回值:
有时，我们需要将函数的值返回给调用他的地方
通过return语句就可以实现
注意:在使用return语句时，函数会停止执行，同时返回值

局部变量和全局变量

测试

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-B">
    <title></title>
</head>
<body>
    <!--局部变量和金局变量-->
    <script>
		var n = 10; m = 10;//全局交量任何地方都可以使用
		function demo(){
			var i = 18;//局部安量只航在当前函数中使用
			x=10;//全局变量 任何地方都可以使用
		}
		demo();
		alert(x);
    </script>
</body>
</html>

异常捕获

异常:
当JavaScript引擎执行JavaScript代码时，发生了错误，导致程序停 止运行
异常抛出:
当异常产生，并且将这个异常生成一个错误信息
异常捕获:
try[
发生异常的代码块;
}catch(err){
错误信息处理;

<!DOCTYPE htmb>
<html>
<head lang-"en">
    <meta charset="UTF-B">
    <title></title>
</head>
<body>
    <form>
        <input id="txt" type="text">
        <input id="btn" type= "button" οnclick="demo()" value="按钮">
    </form>
    <script>
		function demo(){
			try{
				var e=document.getElementById("txt").value;
				if(e=="")
					throw "请输入";
			}
			catch(err){
				alert(err);
			}
		}
    </script>
</body>
</htmb

啥都不填点击按钮，会有弹窗警告
JavaScript基础

JavaScript事件

onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移出事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFocus 光标聚集事件
onBlur 移开光标事件
onLoad 网页加载事件
onUnload 关闭网页事件

测试

<!DOCTYPE htmb>
<html>
<head lang-"en">
    <meta charset="UTF-B">
    <title>事件</title>
    <style>
    	.mydiv{
			width: 100px;
			height: 100px;
			background-color: cadetblue;
		}

    </style>
</head>
<body>
      <div class="mydiv" onmouseout="on0ut(this)" onmouseover="onOver(this)"></div>
    <script>
		function onOver(ooj){
			ooj.innerHTML="Hello";
		}
		function on0ut(ooj){
			ooj.innerHTML="World" ;
		}
    </script>
</body>
</htmb

三种状态：
JavaScript基础JavaScript基础JavaScript基础

DOM简介

HTML DOM:
当网页被加载时，浏览器会创建页面的文档对象模型(Document Obiect Model)
JavaScript基础
JavaScript能够改变页面中的所有HTML元素
1改变HTML输出流:
注意:绝对不要在文档加载完成之后使用document.write()。这会覆盖该文档
2寻找元素:
通过id找到HTML元素
通过标签名找到HTML元素
3改变HTML内容:
使用属性: innerHTML
4改变HTML属性:
使用属性: attribute

JavaScript能够改变页面中的所有HTML属性


<!DOCTYPE html>
<html>
<head Lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
	<p id = "pid">Baidu</p>
    <a id = "aid" href = "https://www.baidu.com">点击跳转</a>
    <br/>
    <button onclick="demo()">跳转到4399</button>
    <script>
		function demo(){ 
			var tem = document.getElementById("pid");
			tem.innerHTML = "4399";
			document.getElementById("aid").href = "https://www.4399.com";
		}
    </script>
</body>
</html>

点击前
JavaScript基础
点击后
JavaScript基础

JavaScript能够改变页面中的所有CSS样式
通过DOM对象改变CSS
语法:document.getElementByld(id).style.property=new style

<!DOCTYPE html>
<html>
<head Lang="en">
    <meta charset="UTF-8">
    <title></title>
	<style>
		p{
			font-size：30px;
			color:red;
		}
	</style>
</head>
<body>
	<p id = "pid">改变前</p> 
    <br/>
    <button onclick="demo()">改变CSS样式</button>
    <script>
		function demo(){ 
			var tem = document.getElementById("pid");
			tem.innerHTML = "改变后";
			tem.style.fontSize = "55px";
			tem.style.color = "blue";
		}
    </script>
</body>
</html>

结果：
JavaScript基础点击按钮：
JavaScript基础

JavaScript能够对页面中所有事件做出反应
DOM Eventlistener:
addEventListener():
方法用于向指定元素添加事件句柄
removeEventListener():
移除方法添加的事件句柄

addEventListener():测试


<!DOCTYPE html>
<html>
<head Lang="en">
    <meta charset="UTF-8">
    <title></title> 
</head>
<body> 
    <button id = "btn">按钮</button>
    <script> 		 
		var x = document.getElementById("btn"); 
		x.addEventListener("click",SCY);
		x.addEventListener("click",KCY);
		function SCY(){
			alert("SCY");
		}
		function KCY(){
			alert("KCY");
		} 

    </script>
</body>
</html>

点击按钮之后连续两个弹窗：
JavaScript基础JavaScript基础
removeEventListener():测试

<!DOCTYPE html>
<html>
<head Lang="en">
    <meta charset="UTF-8">
    <title></title> 
</head>
<body> 
    <button id = "btn">按钮</button>
    <script> 		 
		var x = document.getElementById("btn"); 
		x.addEventListener("click",SCY);
		x.addEventListener("click",KCY);
		x.removeEventListener("click",SCY);
		function SCY(){
			alert("SCY");
		}
		function KCY(){
			alert("KCY");
		} 

    </script>
</body>
</html>

现在就只有一个弹窗
JavaScript基础
JavaScript基础

HTML事件处理: 直接添加到HTML结构中
DOM0级事件处理： 把一个函数赋值给一个事件处理程序属性
DOM2级事件处理： addEventListener(“事件名”，“ 事件处理函数”，‘布尔值” );
true:事件捕获
false:事件冒泡
removeEventL istener();
IE事件处理程序
attachEvent
detachEvent

HTML事件处理

例子：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
	<div id="div">
		<button id="btn1" onclick="demo()">按钮</ button>
	</div>
	<script>
		function demo( ){
			alert("HTML事件处理");
		}
	</script>
</body>
</html>

点击按钮之后：
JavaScript基础

DOM0级事件处理

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<div id="div">
		<button id="btn1" onclick="demo()">按钮</Button>
	</div>
	<script>
		document.getElementById("btn1").onclick = function(){alert("DOM0级时间处理")};
	</script>
</html>

JavaScript基础
测试2

<script>
		document.getElementById("btn1").onclick = function(){alert("DOM0级事件处理")};//被覆盖
		document.getElementById("btn1").onclick = function(){alert("DOM0级事件处理测试加两个")}; 
</script>

结果：

如果这样写的话，点击按钮只会又一个弹窗：
DOM0级事件处理测试加两个
因为上面的那个被覆盖掉了。
JavaScript基础
DOM2级事件处理


<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>DOM2级事件处理</title>
</head>
<body>
	<div id="div">
		<button id="btn1">按钮</button>
	</div>
	<script>
		var tem = document.getElementById("btn1");
		tem.addEventListener("click",function(){alert("DOM2级事件处理程序a");});
		tem.addEventListener("click",function(){alert("DOM2级事件处理程序b");}); 
	</script>
</body>
</html>

运行：
JavaScript基础JavaScript基础
不同浏览器支持的dome级别不同，通常使用下面这个方法。

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>DOM2级事件处理</title>
</head>
<body>
	<div id="div">
		<button id="btn1">按钮</button>
	</div>
	<script>
		function demo(){
			alert("按钮被点击了");	
		}
		var tem = document.getElementById("btn1");
		if(tem.addEventListener){
			tem.addEventListener("click",demo);//DOME2级事件
		}else if(tem.attachEvent){
			tem.attachEvent("onclick",demo); //IE事件
		}else{
			tem.onclick = demo();   //DOME0级事件
		} 
		
	</script>
</body>
</html>

点击按钮会有这个：
JavaScript基础

本文地址：https://blog.csdn.net/weixin_44532671/article/details/111143477

相关标签： 前端

上一篇： Google AdSense 实战技巧大全分享

下一篇： 开学享放价!Proscenic扫地机器人秀颜值

推荐阅读