【web前端JavaScript学习-1】-CSDN博客

本文链接：https://blog.csdn.net/weixin_53061888/article/details/117673252

js基础学习

- 一、 js基本的语法

JavaScript 是一种轻量级的编程语言。
它可以插入 HTML 页面的编程代码，插入 HTML 页面后，可由所有的现代浏览器执行。
它是运行在客户端，保存在服务器端，当客户端向我们的服务器端发送请求的时候，服务器端就会返回给客户端包含js脚本的HTML页面。通过js对dom进行操作！

一、 js基本的语法

<script type="text/javascript"></script>script标签内是HTML的脚本，script标签它可以位于head，body标签中，也可以放到后面。
如果创建一个js文件的话，需要当前的页面将js引进来。代码：<script type="text/javascript src="js/demojs.js"></script>网页的加载顺序是从上往下运行。

1.变量：

它是一种弱语言（和Python相似），全部是由var定义的，它的类型是由所赋给的值来确定数据类型的。
例如：var v; v = 10;分别为声明变量v，变量v的初始化。

2.数据类型

undefined:未定义； number：整数和小数； string：拥有多种方法，需要时可以查阅帮助文档； boolean:true,false； NaN：非数值，有函数isNaN（变量名v）进行判断v是否为非数值的数； null：不能对null对象进行操作； typeof（v）判断v是哪种数据类型；

3.数组：

它和Java的相似，但有点不同。内部赋值它用的是[]。例如：var a = [2,3,4]；

4.面向对象：函数

分为：系统函数和自定义函数，正如字面意思系统函数是系统自带，我们直接调用的函数，而自定义函数就是我们为了某些需求写的函数；
如何创建一个对象呢？
var a = new string(“helloworld”);这是创建了一个字符串对象；var a = new object();创建一个a对象。

系统函数：alert（‘OK’），confirm，prompt等等；
自定义函数：function 函数名（）{代码}
标签中可以通过相应的事件进行调用，通过函数名（）进行调用，定义带参的函数直接写函数的名字，不需要注明类型如：function 函数名（v1,v2）{代码}
此外：还有匿名函数：var a = function(){},var a = function(a1,a2){}

5.javascprit事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
常用的HTML事件：

事件	描述
onchange	html元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

计时事件：
定义：JavaScript一个设定的时间间隔之后来执行代码；

常用的方法：
->setInterval(): 间隔指定的毫秒数不停的执行指定的代码；
-》setTimeout(): 暂停指定的毫秒数后执行指定的代码；
有开始就会有停止：->clearInterval(),停止setInterval()方法执行的函数代码；
都是使用窗口window.调用，如window.clearInter(全局变量)；使用停止方法需要使用全局变量；

6.小练习

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#container{
				position: absolute;
			}
			#container span{
				display: inline-block;
				width: 20px;
				height: 20px;
				line-height: 20px;
				border-radius: 50%;
				
			}
			.three{
				display: inline-block;
				width: 20px;
				height: 20px;
				line-height: 20px;
				border-radius: 10px;
				text-align: center;
 				background-color: white;
 				color: black;
 				font-size: 12px;
 			
			}
			.four{
				display: inline-block;
				width: 20px;
				height: 20px;
				line-height: 20px;
				border-radius: 10px;
				text-align: center;
 				background-color: red;
 				font-size: 12px;
			}
		</style>
		<script type="text/javascript">
			
			function change(v){
				var imgs = ['img/2-150Q9150434.jpg','img/3d495f02b11b1a710da85c1da25262cd.jpeg','img/6313abbdcb0624aa971384196066c122.jpg','img/f866a245412e4b5cb2f18e8e0f1251a9.jpg'];
				var img = document.getElementById("demo");
				img.src = imgs[v];
				var spanEles = document.getElementsByTagName("span");
				for(var i = 0;i<imgs.length;i++){
					if(i == v){
						spanEles[i].className="four";
					}else{
						spanEles[i].className="three";
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="container">
			<img src="img/2-150Q9150434.jpg" id="demo" width="250px" height="150px"/>
			<div style="position: relative; bottom: 10px; margin-top: -18px;margin-left: 150px;">
				<span class="three" onmouseover="change(0)">1</span>
				<span class="three" onmouseover="change(1)">2</span>
				<span class="three" onmouseover="change(2)">3</span>
				<span class="three" onmouseover="change(3)">4</span>
			</div>
		</div>
	</body>
</html>