JavaScript
JavaScript是运行在浏览器端的脚本语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，须要插件)等。javascript
前端三大块：
一、HTML：页面结构
二、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
三、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能css
JavaScript嵌入页面的方式
一、内联JShtml
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <input type="submit" value="点击收祝福" onclick="alert('老师你真好！');"> 9 </body> 10 </html>
二、页面script标签嵌入前端
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 var a="老师你真好"; 8 alert(a); 9 10 11 12 </script> 13 </head> 14 <body> 15 16 </body> 17 </html>
三、外部引入java
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="js.js"></script> 7 8 </head> 9 <body> 10 11 </body> 12 </html>
javascript语句与注释
1.一条javascript语句应该以“;”结尾小程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var a = "老师你真好！"; var b = "今每天气还不错啊！"; function fn(){ alert(a) }; fn(); </script>
</head>
<body>
2.js的特色与优点数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var a = "老师你真好！"; var b = "今每天气还不错啊！"; function fn(a){ alert(a) }; function fn(b){ alert(b) }; fn(b); fn(a); </script>
</head>
<body>
</body>
</html>
3.javascript注释浏览器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 var a = "老师你真好！"; 8 // var b = "今每天气还不错啊！"; 单行注释 9 /* function fn(){ 10 11 alert(a) 12 };多行注释*/ 13 14 15 fn(); 16 17 18 </script> 19 20 </head> 21 <body> 22 23 </body> 24 </html>
变量
JavaScript 是一种弱类型语言（变量类型由值决定），javascript的变量类型由它的值来决定。 定义变量须要用关键字 'var'app
var a = 123; var b = 'asd'; //同时定义多个变量能够用","隔开，公用一个‘var’关键字 var c = 45,d='qwe',f='68';
变量类型ide
5种基本数据类型：
number、string、boolean、undefined、null
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 var a= 123; 8 var b= "你好"; 9 var c= true; 10 var d; 11 12 alert(d); 13 14 </script> 15 </head> 16 <body> 17 18 </body> 19 </html>
1种复合类型：
object
变量、函数、属性、函数参数命名规范
一、区分大小写
二、第一个字符必须是字母、下划线（_）或者美圆符号（$）
三、其余字符能够是字母、下划线、美圆符或数字
获取元素方法一
可使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，而后将它赋值给一个变量，好比：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 document.getElementById("box").title="哈哈，我把标题给改了。" 9 10 11 </script> 12 </head> 13 <body> 14 <div id="box" title="我是标题">我是一个div标签</div> 15 </body> 16 </html>
由于浏览器执行代码渲染的时候是从上往下依次执行的，由于JS放在了头部里，因此浏览器执行到JS这里的时候，找不到ID为box的那个标签了，因此会报错。
解决方法有两种：
第一种方法：将javascript放到页面最下边
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 </head> 8 <body> 9 <div id="box" title="我是标题">我是一个div标签</div> 10 11 12 13 14 <script> 15 16 document.getElementById("box").title="哈哈，我把标题给改了。" 17 18 19 </script> 20 </body> 21 </html>
第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 window.onload = function(){ 9 10 11 document.getElementById("box").title="哈哈，我把标题给改了。" 12 13 14 15 16 17 } 18 19 20 </script> 21 </head> 22 <body> 23 <div id="box" title="我是标题">我是一个div标签</div> 24 25 26 27 28 29 </body> 30 </html>
操做元素属性
获取的页面元素，就能够对页面元素的属性进行操做，属性的操做包括属性的读和写。
操做属性的方法
一、“.” 操做
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 window.onload = function(){ 9 10 11 12 document.getElementById("link").href="http://www.baidu.com" 13 14 15 16 17 18 } 19 20 21 </script> 22 </head> 23 <body> 24 25 26 <a href="#" id="link">百度</a> 27 28 29 30 31 32 </body> 33 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 window.onload = function(){ 9 10 11 12 document.getElementById("link").href="http://www.baidu.com" 13 document.getElementById("link").title="这是一个百度的网址跳转" 14 15 16 17 18 19 } 20 21 22 </script> 23 </head> 24 <body> 25 26 27 <a href="#" id="link">百度</a> 28 29 30 31 32 33 </body> 34 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 window.onload = function(){ 9 10 var oA = document.getElementById("link"); 11 12 oA.href="http://www.baidu.com" 13 oA.title="这是一个百度的网址跳转" 14 15 16 } 17 18 19 </script> 20 </head> 21 <body> 22 23 <a href="#" id="link">百度</a> 24 25 </body> 26 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 window.onload = function(){ 9 10 var oA = document.getElementById("link"); 11 12 oA.href="http://www.baidu.com" 13 oA.title="这是一个百度的网址跳转" 14 15 alert(oA.id); 16 alert(oA.href); 17 18 19 20 } 21 22 23 </script> 24 </head> 25 <body> 26 27 28 <a href="#" id="link">百度</a> 29 30 31 32 33 34 </body> 35 </html>
注意：
等于号右边必定要写上引号，若是不写引号的话JS会认为这个东西是一个变量，可是这个变量又没有赋值，会致使出错；若是加上引号以后JS才会知道我写的这个东西是一个值。
二、“[ ]”操做（因为输入变量）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 8 9 10 11 </style> 12 13 <script> 14 15 window.onload = function(){ 16 17 18 var oA = document.getElementById("div1"); 19 20 var haha = "background"; 21 22 23 oA.style[haha] = "red"; 24 25 26 27 28 } 29 30 31 32 </script> 33 </head> 34 <body> 35 <div id="div1">春天啊你在哪里</div> 36 </body> 37 </html>
属性写法
一、html的属性和js里面属性写法同样
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="1.css" id="beijing"> 7 <script> 8 9 var oA = document.getElementById("beijing"); 10 oA.href = "2.css" 11 12 13 14 15 </script> 16 </head> 17 <body> 18 19 </body> 20 </html>
二、“class” 属性写成 “className”
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 8 .box1{ 9 width: 200px; 10 height: 200px; 11 background-color: red; 12 } 13 14 15 .box2{ 16 width: 300px; 17 height: 300px; 18 background-color: green; 19 } 20 21 22 </style> 23 24 <script> 25 26 window.onload = function(){ 27 28 29 var oA = document.getElementById("div1"); 30 oA.className = "box2"; 31 32 33 34 35 } 36 37 38 39 </script> 40 </head> 41 <body> 42 <div id="div1" class="box1"></div> 43 </body> 44 </html>
三、“style” 属性里面的属性，有横杠的改为驼峰式，好比：“font-size”，改为”style.fontSize”
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function(){ 8 9 var oDiv = document.getElementById("div1"); 10 oDiv.style.color = "red"; 11 oDiv.style.backgroundColor = "gold"; 12 oDiv.style.fontSize = "30px"; //有-的标签必定要删除首字母改为大写 13 14 } 15 16 17 </script> 18 </head> 19 <body> 20 <div id="div1">我是一个div</div> 21 </body> 22 </html>
innerHTML
innerHTML能够读取或者写入标签包裹的内容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function(){ 8 var oDiv1 = document.getElementById("div1"); 9 oDiv1.innerHTML = "我是凭空变出来的"; 10 11 12 } 13 </script> 14 </head> 15 <body> 16 <div id="div1"></div> 17 </body> 18 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function(){ 8 var oDiv1 = document.getElementById("div1"); 9 oDiv1.innerHTML = "我是凭空变出来的"; 10 11 var oDiv2 = document.getElementById("div2"); 12 oDiv1.innerHTML = "<a href='http://www.baidu.com'>我是百度呀</a>"; 13 14 } 15 </script> 16 </head> 17 <body> 18 <div id="div1"></div> 19 <div id="div2"></div> 20 21 </body> 22 </html>
函数
函数就是重复执行的代码片。
函数定义与执行
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 // 定义函数 9 function aa(){ 10 11 12 alert("今每天气真不错") 13 14 } 15 16 // 执行函数 17 aa(); 18 19 20 21 </script> 22 </head> 23 <body> 24 25 </body> 26 </html>
小案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="1.css" id="pifu"> 7 <script> 8 9 10 function aa(){ 11 12 var pifu = document.getElementById("pifu"); 13 pifu.href = "1.css" 14 15 16 } 17 18 function bb(){ 19 20 var pifu = document.getElementById("pifu"); 21 pifu.href = "2.css" 22 23 24 } 25 26 27 28 29 30 </script> 31 </head> 32 <body> 33 <input type="button" value="换肤1" onclick="aa()"> 34 <input type="button" value="换肤2" onclick="bb()"> 35 </body> 36 </html>
小案例：
将背景换肤中的代码从HTML中提取出来
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="1.css" id="pifu"> 7 <script> 8 9 10 11 window.onload = function(){ 12 13 var oBtn1 = document.getElementById("anniu1"); 14 var oBtn2 = document.getElementById("anniu2"); 15 16 oBtn1.onclick = aa; //此处这个aa不用写(),()表明当即执行 17 oBtn2.onclick = bb; 18 19 } 20 21 22 23 function aa(){ 24 25 var pifu = document.getElementById("pifu"); 26 pifu.href = "1.css" 27 28 29 } 30 31 function bb(){ 32 33 var pifu = document.getElementById("pifu"); 34 pifu.href = "2.css" 35 36 37 } 38 39 40 41 42 43 </script> 44 </head> 45 <body> 46 <input type="button" value="换肤1" id="anniu1"> 47 <input type="button" value="换肤2" id="anniu2"> 48 </body> 49 </html>
变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，而后执行阶段，在编译阶段会将function定义的函数提早，而且将var定义的变量声明提早，将它赋值为undefined。
<meta charset="UTF-8">
<title>Document</title>
<script>
var a = 123345; alert(a); </script>
</head>
<body>
</body>
</html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 // 会报错，undefind 9 alert(a); 10 var a = 123345; 11 12 13 </script> 14 </head> 15 <body> 16 17 </body> 18 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 var a; 9 10 a = 123345; 11 alert(a); 12 13 14 </script> 15 </head> 16 <body> 17 18 </body> 19 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 aa(); 9 function aa(){ 10 alert("我是一个函数"); 11 } 12 13 14 15 </script> 16 </head> 17 <body> 18 19 </body> 20 </html>
匿名函数
定义的函数能够不给名称，这个叫作匿名函数，能够将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function(){ 8 9 var oDiv = document.getElementById("tianqi"); 10 11 oDiv.onclick = aa; 12 13 14 function aa(){ 15 16 17 18 19 alert("当心打雷闪电啊") 20 } 21 22 } 23 24 25 26 27 28 </script> 29 </head> 30 <body> 31 <div id="tianqi">今每天气真不错</div> 32 </body> 33 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function(){ 8 9 var oDiv = document.getElementById("tianqi"); 10 11 oDiv.onclick = function(){ 12 13 14 15 16 alert("当心打雷闪电啊"); 17 } 18 19 20 21 22 } 23 24 25 26 27 28 </script> 29 </head> 30 <body> 31 <div id="tianqi">今每天气真不错</div> 32 </body> 33 </html>
函数传参
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function(){ 8 9 var oDiv = document.getElementById("tianqi"); 10 11 function yangshi(aa){ 12 oDiv.style.color = aa; 13 } 14 15 16 yangshi("green"); 17 18 } 19 20 21 22 23 24 </script> 25 </head> 26 <body> 27 <div id="tianqi">今每天气真不错</div> 28 </body> 29 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function(){ 8 9 var oDiv = document.getElementById("tianqi"); 10 11 function yangshi(styl,aa){ 12 oDiv.style[styl] = aa; 13 } 14 15 16 yangshi("background","green"); 17 yangshi("width","100px"); 18 yangshi("height","100px"); 19 20 21 } 22 23 24 25 26 27 </script> 28 </head> 29 <body> 30 <div id="tianqi">今每天气真不错</div> 31 </body> 32 </html>
小案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 window.onload = function(){ 9 10 var oInput01 = document.getElementById("input01"); 11 var oInput02 = document.getElementById("input02"); 12 var oBtn = document.getElementById("btn"); 13 14 15 16 // 写入值： 17 // oInput01.value = 10; 18 // oInput02.value = 20; 19 20 oBtn.onclick =function(){ 21 var a = oInput01.value; 22 var b = oInput02.value; 23 var c = parseInt(a)+parseInt(b); 24 alert(c); 25 } 26 27 28 29 30 31 32 } 33 34 35 </script> 36 </head> 37 <body> 38 <input type="text" id="input01">+ 39 <input type="text" id="input02"> 40 <input type="button" value="等于" id="btn"> 41 42 </body> 43 </html>
条件语句
经过条件来控制程序的走向，就须要用到条件语句。
运算符
一、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
二、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
三、条件运算符：==、===、>、>=、<、<=、!=、&&(并且)、||(或者)、!(否)
求余（求模）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 8 var a = 30; 9 var b = 7; 10 var c = a % b; 11 alert(c); 12 13 14 15 </script> 16 </head> 17 <body> 18 19 </body> 20 </html>
if else （若是....不然.....）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 200px; height: 200px; background-color: red; } </style> <script> window.onload = function(){ var oBtn = document.getElementById("input01"); var oDiv = document.getElementById("box"); oBtn.onclick = function(){ oDiv.style.display = "none"; } } </script> </head> <body> <input type="button" value="切换" id="input01"> <div id="box"></div> </body> </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 8 div{ 9 10 width: 200px; 11 height: 200px; 12 background-color: red; 13 } 14 15 16 17 </style> 18 19 20 <script> 21 window.onload = function(){ 22 23 24 var oBtn = document.getElementById("input01"); 25 var oDiv = document.getElementById("box"); 26 oBtn.onclick = function(){ 27 28 if(oDiv.style.display == "none"){ 29 oDiv.style.display = "block"; 30 31 } 32 33 else{ 34 oDiv.style.display = "none"; 35 } 36 37 } 38 } 39 40 41 </script> 42 </head> 43 <body> 44 <input type="button" value="切换" id="input01"> 45 <div id="box"></div> 46 </body> 47 </html>
if else的多重嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var today = 9; if(today == 1 ){ alert("你要补习语文"); } else if(today == 2){ alert("你要补习数学"); } else if(today == 3){ alert("你要补习英语"); } else if(today == 4){ alert("你要补习计算机"); } else if(today == 5){ alert("你要补习项目综合"); } else{ alert("今天我就不补习了"); } </script>
</head>
<body>
</body>
</html>
switch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var today = 9; switch(today){ case 1: alert("补习语文"); break; case 2: alert("补习数学"); break; case 3: alert("补习英语"); break; case 4: alert("补习网站综合"); break; case 5: alert("补习计算机"); break; default: alert("算了，今天我仍是不补习了"); } </script>
</head>
<body>
</body>
</html>
数组及操做方法
数组就是一组数据的集合，javascript中，数组里面的数据能够是不一样类型的。
建立数组的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 第一种建立数组的方式
var aRr = new Array (1,2,3,'你好'); // 第二种建立数组的方式，开发中建议使用第二种建立数组
var aRr01 = [1,2,3,'你好']; </script>
</head>
<body>
</body>
</html>
操做数组中数据的方法
一、获取数组的长度：aList.length;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 第一种建立数组的方式
var aRr = new Array (1,2,3,'你好'); // 第二种建立数组的方式，开发中建议使用第二种建立数组
var aRr01 = [1,2,3,'你好',5]; alert(aRr.length); alert(aRr01.length); </script>
</head>
<body>
</body>
</html>
二、获取数组某个位置上的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 第二种建立数组的方式，开发中建议使用第二种建立数组
var aRr01 = [1,2,3,'你好']; alert(aRr01[3]); </script>
</head>
<body>
</body>
</html>