javascript简介和语法以及编写简单的一些代码演示

本文链接：https://blog.csdn.net/qq_40332952/article/details/104115641

javascript简介

Javascript被设计用来向HTML页面添加交互行为。
Javascript是一种脚本语言(脚本语言是一种轻量级的编程语言)
Javascript由数行可执行计算机代码组成。
Javascript通常被直接嵌入HTML页面。
Javascript是一种解释性语言(就是说,代码执行不进行预编译)。
所有的人无需购买许可均可使用javascript

Java与javascript有什么区别?

它们没什么关系,雷锋和雷峰塔的关系。

Javascript的作用？

HTML:他是整个网站的骨架。
CSS：它是对整个骨架的内容进行美化（修饰）。
Javascript:它能够让整个页面具有动态效果。

Javascripg的组成部分

在这里插入图片描述
ECMAScript:它是整个 javascript 的核心，包含(基本语法、变量、关键字、保留字、数
据类型、语句、函数等等)
DOM：文档对象模型，包含(整个 html 页面的内容)、
BOM：浏览器对象模型,包含(整个浏览器相关内容)
javascript中的对象:

Browser 对象
在这里插入图片描述
HTML DOM 对象

javascript语法

区分大小写
变量是弱类型的(String str=”aaa” ,var str=”123”😉
每行结尾的分号可有可无(建议大家写上)
javascript的变量
变量可以不用声明，变量是弱类型。统一使用 var 来定义！定义变量的时候不要使用关键字
和保留字。(用var来定义的变量是一个局部变量,不用var来定义是一个全局变量)
javascript 数据类型
Javascript 数据类型分为原始数据类型和引用数据类型
原始数据类型：string、number、boolean、null、undefined
引用数据类型：

javascript运算符

其它运算符与 java 大体一致，需要注意其等性运算符。
**它在做比较的时候会进行自动转换。
**= 它在做比较的时候不会进行自动转换。
举例：
var sNum = “66”;
var iNum = 66;
alert(sNum == iNum); //输出 “true”,双等号会自动把num类型转化为string类型,三等号则没有。
alert(sNum === iNum); //输出 “false”

javascript语句

所有语法大体与java一致

获取元素内容

获取元素(其实就是获取html中的标签的)
document.getElementById(“id 名称”); 如果id是一个字符串必须要加上引号,如果是一个变量则不需要。
举例：
获取元素里面的值
document.getElementById(“id 名称”).value;

javascript中的事件

表单提交事件:onsubmit
关于时间onsubmit：一般用于表单提交的位置(也就是在form标签里面,而不是在里面写onsubmit,因为提交的的表单),在定义函数的时候需要给出一个返回值,表示是否能提交表单。οnsubmit=“return checkForm()” 这里的返回值表示表单是否提交返回true就提交，返回false就不提交。

javascript的输出

警告框：alert();
向页面指定位置写入内容：innerHTML(属性) ;
举例：document.getElementById(“demo”).innerHTML=“My First JavaScript”;
向浏览器写入内容：document.write(“”); 它只能最顶端写出内容，不能指定位置。
document.write(“

My First JavaScript

”);

javascript的引入方式

内部引入方式
直接将 javascript 代码写到
外部引入方式
需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script
标签的 src 属性引入该外部的 js 文件

javacript表单校验(案例一)

这种你是表单校验的入门案例,非要等提交注册的时候才校验表单,现实中肯定不能这样。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册表单</title>
		<script>
		 function checkForm(){
		 	//1.获取用户名和密码,确认密码和邮箱账号。
			//用户名
		 	var uVal = document.getElementById("username1").value;
		 	//密码
		 	var uPas = document.getElementById("password1").value;
		 	//确认密码
		 	var uRepas = document.getElementById("repassword").value;
		    //邮箱账号
		    var uEma = document.getElementById("emalie").value;
		    //2.判断用户名和密码不能为空
		    //校验用户名
		    if(uVal==""){
		    	alert("用户名不能为空");
		    	return false;
		    }
		    //校验密码
		    if(uPas==""){
		    	alert("密码不能为空");
		    	return false;
		    }
		    //校验密码和确认密码是否一致
		    if(uPas!=uRepas){
		    	alert("两次密码不一致");
		    	return false;
		    }
		    //校验邮箱账号
		    //这里直接使用正则表达式字符串调一个test的方法，可以直接校验邮箱格式是否正确。
		    if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(uEma)){
		    	alert("邮箱格式不正确");
		        return false;
		    }
		    
		    
		    
		 }
		</script>
	</head>
	<body>
		//表单提交事件属性值需要的是一个返回值,并且表单提交事件是要加载form标签里面。
		<div οnsubmit="return checkForm()" align="center" style="background-image:url(../../img/regist_bg.jpg);width:1230px;height:600px;">
			<form action="#" method="post">
			用户名:<input type="text" id="username1" name="username"/><br/>
			密码:<input type="text" id="password1" name="password"/><br/>
			确认密码:<input type="text" id="repassword" name="repassword"/><br/>
			Emalie:<input type="text" id="emalie" name="emaile"/><br/>
			<input type="submit" value="提交注册" />
		</form>
		</div>
		
	</body>
</html>

因为邮箱的格式不是正确的所有提示告警表单不能提交

javascript手动实现轮播图效果(案例二)

手动实现录播图效果1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
			   border: 1px solid red;
			   width:500px;
			   height:300px;
			   margin:auto;
			}
		</style>
		<script type="text/javascript">
			//手动实现轮播图效果
			var i = 1;
			function changeImg (){
				//var i = 1; 这个变量不能定义在局部,因为每次点击这个函数都会把这个变量初始化为1，
				//如果有三张图片一张则第三张图片永远看不见,所以不能定义在局部。
				++i;
				document.getElementById("changeImg").src="../../img/"+i+".jpg"
				//判断是否是最后一张图片
				if(i==3){
					//这里为什么要等于0因为,等于1的话,i++就为2了，第一图片就看不见了。
					i = 0;
				}
			}
		</script>
	</head>
	<body>
		<div>
			<input type="button" value="下一页" οnclick="changeImg()"/>
			<img id="changeImg" src="../../img/1.jpg" width="100%" height="100%"/>
		</div> 
	</body>
</html>