第一次接触JavaScript语言，首先学习了一些简单的内容，对其语言结构有一些大致了解。
JavaScipt在HTML编辑器中要写在<script></script>之间。JavaScipt作为一种脚本语言可以放在HTML中任何位置，但浏览器编译时是按先后顺序执行的。
1、定义变量，使用关键字"var"(var为变量名)
命名规则：必须使用字母、下划线_或者美元符$开始，不能用数字开头；
可以使用任意多个字母、数字、下划线或美元符组成；
不可使用JavaScript关键字或保留字；
变量命名有意义，例：oBox(驼峰命名法)；
变量名严格区分大小写。
2、函数（完成某一特定功能的一组语句）
基本语法：function(函数名){
函数代码；
}
注：函数定义好之后不能直接运行，调用函数直接写函数名运行.
3、输出内容(document.write)
输出内容用“”括起，直接输出“”内的内容；
通过变量输出内容，例：var mystr="hello"
document.write(mystr);
输出多项内容，字符串与变量之间用+连接；
4、弹出警告（alert()消息对话框）
包含一个“确定按钮”；
在点击对话框“确定”按钮之前，不能进行任何操作；
消息对话框通常可以用于调试程序；
alert()输出内容可以是字符串或者变量。
5、通过ID获取元素
语法：document.getElementById("id");
获取的元素是一个对象，若要对元素进行操作，要通过他的属性或方法。
6、inner.HTML属性
用于获取或替换HTML元素的内容
7、通过JS改变HTML样式
语法：object.style.propery=new style;(object是获取的元素对象)
8、显示和隐藏(display)属性
语法：object.style.display="value"(value值为none或block)
9、控制类名(className属性)
语法：object.className="className"
10、点击事件
语法：object.οnclick=function(){
......
}
11、console.log()---调试，输出到控制台上
12、object.οnlοad=function(){
JS代码//当文档加载完成后执行大括号里的代码
}
13、object.charAt(0)---第0位置上的字符
object.charCodeAt(0)---字符转化为字符编码
String.fromCharCode(20)---将编码为20的字符转化为汉子字符
object.indexOf("")---某个字符在该字符串中的位置（默认从左往右找找）
object.lastIndexOf("")---某个字符在该字符串中的位置（默认从右往左找找）
object.indexOf("你",8)---从第8位开始找“你”
14、字符串进行比较，比较的是第一个字的字符编码大小
15、object.substring(7)代表截取7个字符；
object.substring(7,2)代表从第7个字符开始截取到第2个字符（若第一个参数位负数则从第0位开始，若第二个参数为负数则自动转换量参数的位置，从第0位开始）
object.slice(6)代表从第六位开始截取（若有两个参数，代表从第几位截取到第几位；若为负数则代表从后往前截取几位）
16、object.toUpperCase()转换为大写；object.toLowerCase()转换为小写。
17、object.split(".")代表以“.”为分割符将字符串分割为若干个数组；若未指定以哪个分割符来分割，则将原始字符串中的每一项都切割成数组项；若有两个参数如（"-",5）“5”表示分割后保留几个数组成员。
18、数组
一、创建数组
构造函数法：var arr1=new Array();
字面量法: var arr=[];
二、基本语句
objrct1.contact(object2)；---拼接字符串；
object.jion("#");---用“#”将数组项拼接成字符串；
object.reverse();---翻转数组；
object.unshift();---从数组的开头插入元素，返回数组长度；
object.pop();---删除最后一个数组元素；
object.shift();---删除第一个元素；
str.push(arr);---在数组后面添加“1”；
str.sort();---比较两两的值；
以上是学习的一些基本语句；
为了加深理解和运用，做了一些简单的数组排序和小实例：
1、简单排序&冒泡排序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单排序，冒泡排序</title> </head> <body> <script type="text/javascript"> //1.简单的排序 // function compare(value1, value2) { // //定义比较方法 // return value1 > value2 ? 1 : -1; // } // var arr = ['34', '45', '23', '56', '88', '21', '16', '55']; // alert(arr.sort(compare).toString()); //输出结果：16,21,23,34,45,55,56,88 //2.冒泡排序:思路：依次比较相邻的两个数，将小数放在前面，大数放在后面。即在第一趟：首先比较第1个和第2个数，将小数放前，大数放后。然后比较第2个数和第3个数，将小数放前，大数放后，如此继续，直至比较最后两个数，将小数放前，大数放后。 至此第一趟结束，将最大的数放到了最后。在第二趟：仍从第一对数开始比较（因为可能由于第2个数和第3个数的交换，使得第1个数不再小于第2个数），将小数放前，大数放后，一直比较到倒数第二个数（倒数第一的位置上已经是最大的），第二趟结束，在倒数第二的位置上得到一个新的最大数（其实在整个数列中是第二大的数）。如此下去，重复以上过程，直至最终完成排序。 var arr = [12, 5, 3, 8, 0, 15, 6, 5, 9, 4, 27]; var len = arr.length; function bubbleSort(arr) { var tmp = 0; for(var i = 0; i < len; i++) { for(var j = 0; j < len - i; j++) { if(arr[j] > arr[j + 1]) { tmp = arr[j]; arr[j] = arr[j + 1];//交换 arr[j + 1] = tmp; } } } return arr; } alert(bubbleSort(arr)); </script> </body> </html> 2、九九乘法表 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table{width: 1000px;height: 500px;} td{ text-align: center;width: 100px;height: 50px;border: 1px #000 solid; } </style> </head> <body> <script> document.write("<table cellpadding='0' cellspacing='0'>"); for(i=1;i<=9;i++){ document.write("<tr>"); for(j=1;j<=i;j++){ document.write("<td>"); document.write(i+"*"+j+"="+i*j) } document.write("</td>"); } document.write("</tr>"); document.write("</table>"); </script> </body> </html>
3、大段文字的收缩伸展功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 500px;height: 490px;border: 3px orange solid;margin: 0 auto;padding: 20px; } div p{ font: "微软雅黑";font-size: 20px;line-height: 26px; } </style> </head> <body> <div id="box"> <p id="p">教养是带有某种天生的素质和一点一滴的积累。人生那么长，未知的东西那么多。人与人之间的关系往往是相互的，与人为善，也是与自己为善。让自己更平和一点，更豁达一点，对于身边的过错，让自己更宽容一点。人人都有他的难处，何必强求于人。人生在世，行路匆匆，生活充满变数，时而乐极生悲，时而苦尽甘来，一切不必较真，只须笃定前行。要敢于认错，既然错了，就要纠正，虚假是味毒药，真实能帮你把失去的赢回来；要敢于担当，回避不是办法。人出生时，是一块质朴的石块，有棱有角，生气勃勃。但是，在生活无情的打磨中，人生慢慢被磨去棱角，变得圆滑而世故。 </p> <center> <button id="btn">收缩</button> </center> </div> <script> window.οnlοad=function(){ //var oBox=document.getElementById(box); var oP=document.getElementById("p"); var value=oP.innerHTML; var oBtn=document.getElementById("btn"); var kaiguan=true; oBtn.οnclick=function(){ if(kaiguan){ oP.innerHTML=value.substring(0,36); oBtn.innerHTML="展开"; }else{ oP.innerHTML=value; oBtn.innerHTML="收缩"; } kaiguan=!kaiguan; } } </script> </body> </html> 4、类似Word的文字查询与替换功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .active { background: orange; color: #fff; } #box { width: 490px; height: 600px; border: 10px #000 solid; margin: 0 auto; } #box1 { width: 450px; height: 460px; background-color: #CCCCCC; padding: 20px; } #box2 { width: 450px; height: 60px; padding: 20px; } a { display: block; width: 100px; height: 40px; float: left; text-align: center; font-size: 28px; line-height: 40px; text-decoration: none; } p { clear: both; } #p2 { display: none; } #p1 input[type=text] { width: 100px; margin-top: 5px; } #p2 input[type=text] { width: 100px; margin-top: 5px; } #p2 input[type=text]:first-child { margin-right: 5px; } #span { font: "微软雅黑"; font-size: 20px; line-height: 25px; } </style> </head> <body> <div id="box"> <div id="box1"> <span id="span"> 教养和文化是两回事，有的人很有文化，但是很没教养，有的人没有什么太高的学历和学识，但仍然很有教养，很有分寸。教养是带有某种天生的素质和一点一滴的积累。人生那么长，未知的东西那么多。人与人之间的关系往往是相互的，与人为善，也是与自己为善。让自己更平和一点，更豁达一点，对于身边的过错，让自己更宽容一点。人人都有他的难处，何必强求于人。人生在世，行路匆匆，生活充满变数，时而乐极生悲，时而苦尽甘来，一切不必较真，只须笃定前行。要敢于认错，既然错了，就要纠正，虚假是味毒药，真实能帮你把失去的赢回来；要敢于担当，回避不是办法。人出生时，是一块质朴的石块，有棱有角，生气勃勃。但是，在生活无情的打磨中，人生慢慢被磨去棱角，变得圆滑而世故。要做坚守在悬崖峭壁上石块，勇敢忍受风霜的雕刻，永远保留自己的棱角。不要做河流里的石头，享受微波多情的抚摸，最后变成一块光亮的鹅卵石。 </span> </div> <div id="box2"> <a class="active" id="b1"> 查找 </a> <a id="b2"> 替换 </a> <br/> <p id="p1"><input id="input1" type="text"><input id="btn1" type="button" value="查找"></p> <p id="p2"><input id="input2" type="text"><input id="input3" type="text"><input id="btn2" type="button" value="替换"></p> </div> </div> <script> var oBox = document.getElementsByTagName("a"); var oP1 = document.getElementById("p1"); var oP2 = document.getElementById("p2"); oBox[0].onclick = function() { for(i = 0; i < oBox.length; i++) { oBox[i].className = "abc"; } this.className = "active"; oP1.style.display = "block"; oP2.style.display = "none"; } oBox[1].onclick = function() { for(i = 0; i < oBox.length; i++) { oBox[i].className = "abc"; } this.className = "active"; oP2.style.display = "block"; oP1.style.display = "none"; } var ospan = document.getElementById("span"); var oText=ospan.innerHTML; var oInput1 = document.getElementById("input1"); var oInput2 = document.getElementById("input2"); var oInput3 = document.getElementById("input3"); var obtn1 = document.getElementById("btn1"); var obtn2 = document.getElementById("btn2"); obtn1.onclick = function() { if(oInput1.value == "") { alert("请输入文字") } var str = oInput1.value; if(oText.indexOf(str) != -1) { //alert(1) var arr = oText.split(str); ospan.innerHTML = arr.join('<span style="background:yellow">' + str + '</span>') } else { alert("未查找到输入的内容！"); } } obtn2.onclick = function() { if(oInput2.value == "") { alert("请输入文字") } var str = oInput2.value; if(oText.indexOf(str) != -1) { //alert(1) var arr = oText.split(oInput2.value); ospan.innerHTML = arr.join(oInput3.value) } else { alert("未查找到被替换文字！"); } } </script> </body> </html>
