javascript基础入门
注:以下写的笔记,根据李兴华视频和廖雪峰官方文档写的。🙅感谢。
第一天
1.javascript是一种基于对象的编程语言,java属于面向对象。
面向对象强调的是类的设计,对象的调用。基于对象指的是所有的对象已经由浏览器提供好了。用户直接使用就可以了。根本就看不见类,看见的是一个一个对象。
2.Javascript由网警公司开发。java最早由sun公司开发。java在浏览器技术端的发展主要是Applet程序。
3.JavaScript可以模拟面向对象编程,可以进行服务器端编程(即.Node.js)。
4.JavaScript的基本语法和java很相似。
5.JavaScript是嵌入在html语法之中的,可以使用<script>标记进行标注,这样就可以实现一系列的动态页面的操作效果(前台页面)。
6.使用了javascript可以在前台实现一系列华丽的操作,但是在实际工作中,javascript代码是非常多的。如果将所有的javascript程序定义在一个html界面里面会非常的难以维护。所以为了解决这样的问题,往往会单独定义一个*.js的文件,在需要的时候调用即可。
范例1)
<html> <head> <title>javascript</title> <meta charset="UTF-8"> <script type="text/javascript"> alert("给你弹框一下"); </script> </head> <body></body> </html>
范例2):在js目录下建立Demo.js文件
随后在需要的地方使用src属性导入即可
html> <head> <title>javascript</title> <meta charset="UTF-8"> <script type="text/javascript" src="js/Demo.js"> </script> </head> <body></body> </html>
alert("给你弹框一下");
基本语法:
1.javascript·的语法和java语法非常相似,除了关键字不同之外几乎没有什么区别,而且javascript的使用更加容易。
java程序里面如果要输出使用:system.out.println()语言,在javascript里面也可以使用"document.write()"向页面输出html代码(现在已经不用了)。
<html> <head> <title>javascript</title> <meta charset="UTF-8"> <script type="text/javascript"> document.write("<h1>Hello World</h1>"); document.write("<h1>Hello World</h1>"); document.write("<h1>Hello World</h1>"); </script> </head> <body> <div>世界你好</div> </body> </html>
document.write()函数输出的html代码是不可控制元素顺序的,所以在开发之中是不会利用此类的函数实现内容输出的,因此使用"console.log()"实现信息的后台输出。
<html> <head> <title>javascript</title> <meta charset="UTF-8"> <script type="text/javascript"> consoe.log("控制台打开"); </script> </head> <body> <div>世界你好</div> </body> </html>
2.
1)程序的基本组成就是数据类型以及变量,javascript中变量的定义格式不是特别的严格,所有的变量只需一个var关键字定义即可。至于说变量的具体类型是根据为其赋值的结果来确定。
<script type="text/javascript"> var num=10; console.log(typeof num); </script>
2)如果不赋值给变量,那么变量的类型就是属于未知的状态。其对应的类型就是“undefined”,可以用if语句进行判断。
<script type="text/javascript"> var num; console.log(typeof num); </script>
<html> <head> <title>javascript</title> <meta charset="UTF-8"> <script type="text/javascript"> var num; if(!num) { alert("还没有赋值"); } else { alert("已经赋值了"); } console.log(typeof num); </script> </head> <body> <div>世界你好</div> </body> </html>
3)从java开发而言,所有的if语句必须跟上完整的布尔表达式才可以正常执行,但在javascript里面可以直接在if语句之中使用变量直接判断,如果此变量属于undefined表示false,否则表示true
在javascript里面使用“'”或“''”表示的都是字符串,而且字符串的操作函数与java是非常类似的。
<script type="text/javascript"> var num="Hello World ni hao"; var result=num.split(" "); console.log(typeof result); for(var x=0;x<result.length;x++) { console.log(result[x]); } </script>
4)java字符串的比较有两种方式:==和equals();javascript只提供了一种操作“==”操作。
<script type="text/javascript"> var num="wwww"; var result = "wwww"; alert(num==result); </script>
5)在javascript中数组本身是一个对象的形式出现的,所以数组的创建需要使用关键字new完成。
范例:定义数组
<script type="text/javascript"> var result = new Array(); result[0]="hello"; result[1] = 100; result[2]=true; for(var x=0;x<result.length;x++) { console.log(typeof result[x]); } </script>
注:javascript数组的好处就在于没有长度限制,是一个动态数组。
数组不仅可以动态初始化也可以进行静态初始化(一般不这么使用)。
实际上为了方便开发,在定义javascript变量的时候也可以不适用var定义,不用var定义的变量属于全局变量(这一点几乎没有用,知道即可)。
3.定义函数
在java中如果要定义一个方法格式如下:
public protected private static final synchronized 返回值类型 方法名称(参数列表|可变参数){ [return[返回值];] }
javascript 中定义函数的操作语法很容易:
function 函数名称(参数){ //此处不需要声明返回值的类型 [return[返回值];] }
<script type="text/javascript"> function fun() { alert("返回alert"); } fun(); </script>
4.事件处理
在页面上任何的操作都可能被成为事件源,而对每一个事件就可以进行自定义的处理方式
例如:鼠标移动,或者是键盘按下等都可以称之为事件源
所有的事件在javascript里面都是以“onXxx”的形式命名的,例如以下两个事件:(这两个事件只能在<body>元素里面进行处理)
1,页面的加载事件:onload
2,页面的卸载事件:onunload
<html> <head> <title>javascript</title> <meta charset="UTF-8"> <script type="text/javascript"> function onHandle() { alert("欢迎您的光临"); } function unHandle() { alert("欢迎您下次再来"); } </script> </head> <body onload="onHandle();" onunload="unHandle();"> </body> </html>
鼠标处理事件:onmousedown(鼠标按下触发),onmouseover(鼠标进入时触发),onmouseout(鼠标移开时触发),onmouseup(鼠标弹开时触发),onmousemove(鼠标移动时触发)
按钮上绑定事件
<html> <head> <title>javascript</title> <meta charset="UTF-8"> <script type="text/javascript"> function buttonHandle() { alert("欢迎您的光临"); } </script> </head> <body > <button type="button" onclick="buttonHandle()">按钮</button> </body> </html>
双击按钮事件“ondbclick”事件
第二天
范例:做一个特效表格
1.表格的使用:table tr td th
<table>是<tr>的上层标签
<tr>必须在一个<table></table>里面,它不能单独使用,相当于<table>的属性标签.
<table>标示一个表格,<tr>标示这个表格中间的一个行
<td>标示行中的一个列,需要嵌套在<tr></tr>中间
具体格式是:(两行两列)
<table> <tr> <td></td> <td></td> </tr> </teble>
可以在table中添加属性:
border=1(表示表格线的粗细);cellpadding(表示表格单元边界与单元内容之间的间距);cellspacing(表格单元格间距);bgcolor(表示单元格的背景颜色)
2.以下为鼠标移动事件:
<html> <head> <title>javascript练习</title> <meta charset="utf-8"> <script type="text/javascript"> function changColor(obj,color) { obj.bgColor=color; } </script> </head> <body> <table border="1" cellpadding="5" cellspacing="0" bgcolor="#F2F2F2"> <tr onmousemove="changColor(this,'#FFFFFF')" onmouseout="changColor(this,'#F2F2F2')"> <td>部门编号1</td> <td>部门名称1</td> <td>部门位置1</td> </tr> <tr onmousemove="changColor(this,'#FFFFFF')" onmouseout="changColor(this,'#F2F2F2')"> <td>10</td> <td>财务部</td> <td>上海</td> </tr> <tr onmousemove="changColor(this,'#FFFFFF')" onmouseout="changColor(this,'#F2F2F2')"> <td>20</td> <td>技术部</td> <td>北京</td> </tr> </table> </body> </html>
第三天
1.使用addEventListener(事件类型,处理函数名称,触发时机)进行动态设置
2.对于整个javascript事件的处理分为两个过程:
1)事件的冒泡过程
2)事件的触发过程
触发时机都会设置为false,表示在事件的触发过程进行处理。阻止事件的冒泡。
范例:观察动态设置
使用“document.getElementById(元素ID)”的操作方式取得元素对象。
<html> <head> <title>javascript练习</title> <meta charset="utf-8"> <script type="text/javascript"> function handle() { alert("事件触发!"); } //表示在界面加载的时候进行加载事件的处理 window.onload = function() { var imgElement = document.getElementById("myimg"); imgElement.addEventListener("click",handle,false); } </script> </head> <body> <!-- id是整个javascript的操作核心所在,必须存在--> <img id="myimg" src="1.jpg" height="50%"> </body> </html>
范例:设置图片加载
<html> <head> <title>javascript练习</title> <meta charset="utf-8"> <script type="text/javascript"> function handle() { document.getElementById("info").innerHTML="<img src='1.jpg' height='50%'>"; } window.onload = function() { var butElement = document.getElementById("setBut"); butElement.addEventListener("click",handle,false); } </script> </head> <body> <span id="info"></span> <button id="setBut">设置显示图片</button> </body> </html>
范例 :设置图片浏览:
<html> <head> <title>javascript练习</title> <meta charset="utf-8"> <script type="text/javascript"> var imgName = new Array("pica.jpg","picb.jpg","picc.jpg","picd.jpg","pice.jpg","picf.jpg"); var foot = 1; window.onload = function() { var pbut = document.getElementById("previousButton"); var nbut = document.getElementById("nextButton"); var img = document.getElementById("img"); nbut.addEventListener("click",function() { if(foot >= imgName.length) { foot = 0; } img.src = "images/" + imgName[foot ++]; },false); pbut.addEventListener("click",function() { if(foot <= 0) { foot = imgName.length - 1; } img.src = "images/" + imgName[foot --]; },false); } </script> </head> <body> <span id="info"> <img id="img" src="images/pica.jpg" > </span> <div id="controlDiv"> <button id="previousButton">上一张</button> <button id="nextButton">下一张</button> </div> </body> </html>
第四天
1.在javascript里面提供有一个setTimeout(函数,时间-毫秒),利用此函数可以实现定期的操作调用。
2.范例:观察setTimeout()函数
<html> <head> <title>javascript练习</title> <meta charset="utf-8"> </head> <body> <div id="info">hello</div> </body> <script type="text/javascript"> function setClock() { var date = new Date(); var info = document.getElementById("info"); info.innerHTML = "<h1>当前时间:" + date + "</h1>"; setTimeout(setClock,1000); } setClock(); </script> </html>
3.图片自动翻滚
<html> <head> <title>javascript练习</title> <meta charset="utf-8"> </head> <body> <span id="info"> <img id="img" src="images/pica.jpg"> </span> </body> <script type="text/javascript"> var imgName = new Array("pica.jpg","picb.jpg","picc.jpg","picd.jpg","pice.jpg","picf.jpg"); var foot = 0; function setPic() { var img = document.getElementById("img"); img.src = "images/" + imgName[foot ++]; console.log(img.src); if(foot >= imgName.length) { foot = 0; } setTimeout(setPic,1000); } setPic(); </script> </html>
4.总结:
1)事件要绑定在它的触发元素上
2)静态的事件绑定方式,在元素上使用onXxx的形式
3)每一种事件都要捆绑一个函数进行事件的处理
表单元素的操作
范例:
<html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript"> function shoeEmail() { var emailElement = document.getElementById("email"); alert("EMAIT = " + emailElement.value); } </script> </head> <body> <form> 请输入email地址:<input type="text" name="email" id="email" value=""> <button onclick="shoeEmail()">显示内容</button> </form> </body> </html>
在表单控件里面name和id的内容一定要保持一致
表示根据元素的定义顺序进行向下的查询。
在取得了输入的内容以后,更多的希望进行一下数据的验证,因为只有合法的emali才应该进行正常的显示,如果要想使用数据验证使用正则表达式是最方便的,而javascript也支持正则,但是需要记住的
是,一定要定义正则的开始与结束标记。而且所以的正则符号不再需要进行转义,语法“/^正则$/.test(要检测的数据)”。
<html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript"> function shoeEmail() { var emailElement = document.getElementById("email"); if(/^\w+@\w+\.\w+$/.test(emailElement.value)) { alert("数据合法"); } else { alert("数据不合法"); } } </script> </head> <body> <form> 请输入email地址:<input type="text" name="email" id="email" value=""> <button onclick="shoeEmail()">显示内容</button> </form> </body> </html>