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>
向更好看的页面发起冲击吧,欢迎个位大佬指点!