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>
浙公网安备 33010602011771号