JavaScript基础

程序员文章站 2022-04-26 11:06:00

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基础
点击按钮之后是这样的

带参数的函数

函数参数:
在函数的调用中，也可以传递值，这些值被称为参数
例: 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基础

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能够改变页面中的所有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能够对页面中所有事件做出反应
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基础
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基础

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基础
不同浏览器支持的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

JavaScript基础

简介

输出

JS外部文件的使用

JS改变标签内容

JS语法

JavaScript运算符

选择语句

循环

跳转语句

函数的使用

定义函数

调用函数

带参数的函数

带返回值的函数

局部变量和全局变量

异常捕获

JavaScript事件

DOM简介

零基础学习大数据需要掌握的基础

Laravel5.1 框架控制器基础用法实例分析

Oracle知识梳理（三）操作篇：SQL基础操作汇总

PHP+Javascript实现在线拍照功能实例

JavaScript和jQuery制作光棒效果

python基础教程之自定义函数介绍

python基础教程之常用运算符

python基础教程之Hello World!

Javascript 链式作用域详细介绍

python基础教程之对象和类的实际运用