第一次接触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><!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>
扫一扫
1098
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
