4.JavaScript-CSDN博客

本文链接：https://blog.csdn.net/weixin_45131319/article/details/104412049

文章目录

简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

输出

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

window.alert();

警示框输出

<html>
<head>
 <title>title</title>
</head>
<body>
<script>
	window.alert("Hello World");
</script>
</body>
</html>

在这里插入图片描述

docment.write();

直接写入html，跟用html写入没有区别，为了调试方便

<html>
<head>
	<title>title</title>
</head>
<body>
	<h1>This's html element</h1>
	<script>
		document.write("<h1>This is JavaScript writed element<h1>");
	</script>
</body>
</html>

在这里插入图片描述

document.getElementById().innerHTML="";

通过id定位修改html元素

<html>
<head>
	<title>title</title>
</head>
<body>
<h1 id="content">Hello Everyone</h1>
<script>
document.getElementById("content").innerHTML="look i modify";
</script>
</body>
</html>

在这里插入图片描述

console.log();

写入到控制台

<html>
<head>
<title></title>
</head>
<body>
<h1>Don't watch me press down F12</h1>
<script>
a = 5;
b = 5;
console.log(a+b);
</script>


<body/>
</html>

在这里插入图片描述

数据类型

JavaScript对不同数据类型进行不同的操作
字符串、整形、浮点、布尔值，数组，对象。

var lastName = "Gates";               #字符串
var length = 7;                       #整形
var PI = 3.1415926;                   #浮点
var bool = true;                      #布尔
var cars = ["Porsche", "Volvo", "BMW"];        #数组
var x = {firstName:"Bill", lastName:"Gates"};  #对象

运算符

算术运算符

运算符	描述	运算符	描述
+	加法	++	自增
-	减法	--	自减
*	乘法	=	赋值
/	除法	+=	自加
%	取模	-=	自减

<html>
<head>
	<title>title</title>
</head>
<body>
	<h2>below is operation resuled</h2>
	<em>a=4,b=5</em><br>
	<em>a+b=</em><l id="addition"></l><br>
	<em>a-b=</em><l id="subtraction"></l><br>
	<em>a*b=</em><l id="multiplication"></l><br>
	<em>a/b=</em><l id="division"></l><br>
	<em>a%b=</em><l id="TakeDie"></l><br>
	<em>++a=</em><l id="_1"></l><br>
	<em>--a=</em><l id="_2"></l><br>
	<em>a+=b,a=</em><l id="_3"></l><br>
	<em>a-=b,a=</em><l id="_4"></l><br>
	
	
	
<script>
		var a=5,b=5;
		document.getElementById("addition").innerHTML=a+b;
		document.getElementById("subtraction").innerHTML=a-b;
		document.getElementById("multiplication").innerHTML=a*b;
		document.getElementById("division").innerHTML=a/b;
		document.getElementById("TakeDie").innerHTML=a%b;
		document.getElementById("_1").innerHTML=++a;a=5;
		document.getElementById("_2").innerHTML=--a;
		document.getElementById("_3").innerHTML=a+=b;a=5;
		document.getElementById("_4").innerHTML=a-=b;
</script>
</body>
</html>

在这里插入图片描述

比较运算符

运算符	描述	运算符	描述
==	等于	>	大于
===	绝对相等	<	小于
!=	不等于	>=	大于或等于
!==	不绝对相同	<=	小于或等于

逻辑运算符

可以在条件语句中使用比较运算符对值进行比较，然后根据结果来采取行动

在这里插入图片描述

程序结构

顺序结构
从上到下逐行执行

选择结构
条件判断

if(判断内容){
	执行结果
}
else if(){

}
else{

}

分支解构

switch(判断的值)

case 对比的值:执行结果;
break;

循环结构

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么可以使用循环结构

for(变量初始化;判断;计数器的自增){
	执行内容
}

while(循环条件为真一直执行){
	执行内容
}

do{ #先执行后判断，为真一直执行
	执行内容
}
while(循环条件)

函数

<html>
<head> 
<meta charset="utf-8"> 
<title>title</title> 
</head>
<body>

<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
var1 = 2 
function addition(a,b){ #定义a,b两个参数
	var c;              #局部变量
	return a+b+var1;    #返回执行结果
}
document.getElementById("demo").innerHTML=addition(5,5);
</script>
</body>
</html>

在这里插入图片描述

表单验证

JavaScript可以验证html表单里面填写的信息是否正确

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function mz() {
    var x = document.forms["myForm"]["user"].value;
	var y = document.forms["myForm"]["password"].value;
    
	if (x == null || x == "") {
        alert("需要输入用户名。");
		return false;
    }
	else if(y == ""){
		alert("请输入密码");
		return false;
	}
	else if(x!="user" && y!="123"){
		alert("用户或密码错误");
		return false;
	}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return mz()" method="post">
User: <input type="text" name="user"><br>
password:<input type="password" name="password"><br>
<input type="submit" value="submit">
</form>
</body>
</html>

在这里插入图片描述

邮箱验证

<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<head>
<script>
function validateForm(){
	var x=document.forms["myForm"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
		alert("不是一个有效的 e-mail 地址");
  		return false;
	}
}
</script>
</head>
<body>
	
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>