JS第一节课笔记
（一）在HTML页面中插入JavaScript的主要方法
<script type="text/javascript">
</script>标签的位置：
1.按照传统的做法，所有的<script>元素都应该放在页面的<head>元素中
如下：
<!doctype html>
<html>
<head>
<meta charset="">
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<!-- 这里是页面内容-->
</body>
</html>
这种做法的目的是把所有外部文件（css文件、JavaScript文件）的应用放在相同的地方，
方便对代码的查看和修改。但是，在插入在<head>元素中，会导致浏览器在加载页面时出现延迟，因为将<script>写在<head>中必须等到所有的JavaScript代码都下载、解析、和执行完成后,才会在浏览器遇到<body>标签时，呈现页面内容。当代码中有很多JavaScript代码时，浏览器呈现页面的延迟会更加明显，在延迟期间，浏览器的窗口呈现一片空白，对用户来说不是一种好的体验，建议不要使用这种写法，下面会介绍第二种位置写法。
2.将<script>元素都应该放在页面的<body>元素中页面内容的最后面，如下：
<!doctype html>
<html>
<head>
<meta charset="">
<title></title>
</head>
<body>
<!-- 这里是页面内容-->
<script type="text/javascript">
</script>
</body>
</html>
这种写法的目的是在JavaScript代码解析之前页面的内容完全呈现在浏览器中，用户体验好，所以推荐使用这种写法，接下来还有一种将<script>元素写在<body>元素中。
3.将<script>元素都应该放在页面的<body>元素中页面内容的最上面，此时需要在代码中添加一部分的内容以达到和方法2相同的效果。如下：
<!doctype html>
<html>
<head>
<meta charset=" ">
<title></title>
</head>
<body>
<script type="text/javascript">
window.οnlοad=function(){
<!--这里是<script>中的内容-->
}
</script>
<!-- 这里是页面内容-->
</body>
</html>
这种方法的目的和方法2相同，有一个优点就是写在<body>的最上面与代码中的css代码
放在相同的地方方便对代码的查看和修改。
4
.也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
示例：
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
（二）JS中的关键字、保留字和标识符
1.关键字：关键字可以用于表示控制语句的开始或结束，或者用于执行特定操作。
按照规则，关键字也是语言保留的，不能用作标识符。
以下是ECMAScript的全部关键字：
break do instanceof typeof case else
new var catch finally return void
continue for switch while debugger function
this with defalt if throw delete
in try
2.保留字：尽管保留字在这门语言中还没有任何特定的用途，但它们有可能在将来
被用作关键字，所以这下不能用作标识符。下面介绍第五版在非严格模式下运行的
保留字：
class enum extend super const export import
3.标识符：标识符就是指变量、函数、属性的名字，或者函数的参数。标识符可以是按照下面的规则
组合起来的一个或多个字符：
标识符格式规则：
1.第一个字符必须是一个字母、下划线（_）、或美元符号（$）;
2.其他字符可以是字母、下划线、美元符号或数字；
3.不能使用JS的关键字、保留字、true、false和null作为标识符；
4.变量名要有意义；
5.变量名严格区分大小写。
例如：var box1=123;
（三）JS的三种输出方式
1.alert();//将（）中要呈现的内容在警示框弹出；
2.document.write();///将（）中要呈现的内容写在文档上；
3.consle.log（）；///将（）中要呈现的内容在控制台输出。
例如： var box1=123;
alert(box1);
document.write(box1);
consle.log（box1）;
()中可以是变量名等。
ECMAScript中语句以一个分号结尾，如果省略分号，就由解析器确定语句
的结尾，但是通常加上分号会更好。
（四）获取dom元素的方法
1.document.getElementById("");
例如：<span id="box1"></span>
document.getElementById("box1");
2.document.getElementByTagName("");
例如：<div></div><div></div>
document.getElementByTagName("div")[0];[0]表示获取的一组div中的第一个div，
如果不加[0],表示获取到所有的div.
(五）在<script>元素中添加样式及将字符串写进div中。
具体示例如下：
<body>
<div id="div1"></div>
<div id="div2">
</div>
<script type="text/javascript">
var a="将这段文本写入div1"
alert(a);
document.write(a);
var odiv1=document.getElementById("div1");
var odiv2=document.getElementById("div2");
odiv1.innerHTML=a; //将a写入div1;
odiv1.style.width="300px"; //设置div1的宽度
odiv1.style.color="#000"; //设置div1内容的文本的颜色
odiv1.style.padding="100px"; //设置div1的内填充
odiv1.style.background="#6495ED";//设置div1的背景颜色
odiv1.style.fontSize="50px"; // 设置div1的内容字号
odiv2.style.width="500px";
odiv2.style.height="300px";
odiv2.style.background="palevioletred";
</script>
</body>
（六）对字符串的处理
1.输出字符串的长度：
例：var a="Hello JavaScript!";
document.write("字符串a的长度是:"+a.length+"<br/>");
2.字符串字符的查找
var text="Hello JavaScript!";
document.write("第一个字符是" + text.charAt(0) + "<br/>"); //获取在某一位上的字符
document.write("第一个字符编码是" + text.charCodeAt(0) + "<br/>"); //获取在某一位上的字符编码
document.write("第一个字符是" + String.fromCharCode(1234) + "<br/>"); //将编码转化为文字
document.write("从左往右查找感叹号的位置在" + text.indexOf("！") + "<br/>"); //查找某一字符的位置从左往右
document.write("从右往左查找感叹号的位置在" + text.lastIndexOf("！") + "<br/>"); //查找某一字符的位置从左往右
document.write("查找a的位置在" + text.indexOf("a", 7) + "<br/>"); //从第几位开始查找某一字符的位置
var text2 = "教养和文化是两回事，有的人很有文化，但是很没教养，有的人没有什么太高的学历和学识，
但仍然很有教养，很有分寸。教养是带有某种天生的素质和一点一滴的积累。人生那么长，未知的东西那么多。人
与人之间的关系往往是相互的，与人为善，也是与自己为善。让自己更平和一点，更豁达一点，对于身边的过错，
让自己更宽容一点。人人都有他的难处，何必强求于人。人生在世，行路匆匆，生活充满变数，时而乐极生悲，时
而苦尽甘来，一切不必较真，只须笃定前行。要敢于认错，既然错了，就要纠正，虚假是味毒药，真实能帮你把失
去的赢回来；要敢于担当，回避不是办法。人出生时，是一块质朴的石块，有棱有角，生气勃勃。但是，在生活无
情的打磨中，人生慢慢被磨去棱角，变得圆滑而世故。要做坚守在悬崖峭壁上石块，勇敢忍受风霜的雕刻，永远保
留自己的棱角。不要做河流里的石头，享受微波多情的抚摸，最后变成一块光亮的鹅卵石。"
//比如现在我们需要找到上面文字中的人生在第几位出现过
alert(text2.length+"...")
var str="人生";
var num=0;
for(;text2.indexOf(str,num)!=-1;){
alert(text2.indexOf(str,num));
num=text2. indexOf(str,num)+str.length;
}
3.字符串之间的比较
例如：document.write("你好" > "您好");
document.write("<br/>" + "你".charCodeAt() + "<br/>");
document.write("您".charCodeAt() + "<br/>");//字符串之间的比较是指比较第一个字符的字符编码。
4.字符串的截取：substring
例如：
var text3 = "教养和文化是两回事，有的人很有文化，但是很没教养，有的人没有什么太高的学历和
学识，但仍然很有教养，很有分寸。教养是带有某种天生的素质和一点一滴的积累。
人生那么长，未知的东西那么多。";
document.write(text3.substring(6) + "<br/>");
//只有一个参数就是指从第几位开始截取
document.write(text3.substring(0, 10) + "<br/>");
//有两个参数就是从第几位开始截取到第几位
document.write(text3.substring(-3, 10) + "<br/>");
//如果第一个参数为负数，就会将其转化为数字0，并进行截取
document.write(text3.substring(2, -10) + "<br/>");
//如果第二个参数为负数，那么自动与第一个参数交换位置，再转换为0进行截取
5.字符串的截取：slice
例如：
document.write(text3.slice(6) + "<br/>");
//只有一个参数就是指从第几位开始截取
document.write(text3.slice(6, 20) + "<br/>");
//如果有两个参数就是指从第一个参数位截取到第二个参数位
document.write(text3.slice(10, 0) + "<br/>");
//如果第二个参数小于第一个参数，参数不交换位置，此时会出错！！
document.write(text3.slice(-10) + "<br/>");
//如果参数是负数，代表从字符串的最后一位开始截取
6.字符串转化大小写
例如：
var text4 = "www.BaIdu.com";
document.write(text4.toUpperCase() + "<br/>");//转化为大写
document.write(text4.toLowerCase() + "<br/>"); //转化为小写
7.字符串分割成数组
例如：
var text5 = "www.baidu.com";
document.write(text5.split(".") + "<br/>"); //以"."为分隔符将字符串分割为数组
var text6 = "hello";
document.write(text6.split("") + "<br/>"); //当分隔符为空时，会将原始字符串的每一项分割成数组
var text7 = "2017-06-07-19-30";
document.write(text7.split("-", 3) + "<br/>"); //第二个参数代表保留分割后数组中的几项
8.字符串替换
例如：
var text8 = "abcdefb";
document.write(text8.replace("abc", "ABC") + "<br/>"); //将原始字符串中的"abc"替换为"ABC"
（七）数组
1.创建数组：
例1：以对象方式创建数组
var arr1=new Array();
arr1[0]="1";
arr1[100]="100";
alert(arr1[0]);
alert(arr1.length);
例2： 以字面量方式创建数组
var arr2=["你好",1,true,false,["你好",2,"yes","or","no"]]; //此处的true,false为布尔值
alert(typeof arr2[2]); //输出arr2的类型
alert(arr2);
alert(typeof arr2[4][2]); //输出arr2中第四个元素数组中的第三个元素
2.拼接数组
例如：
var arr3=[1,2,3];
var arr4=[4,5,6];
alert(arr3.concat(arr4));
3.在数组元素之间拼接：join
var arr5=[7,8,9];
var charu=arr5.join("#");
4.翻转数组内元素及增删数组内元素
例如：
var arr6=[1,2,3,4,5,6];
document.write(arr6.reverse()+"<br/>");//翻转数组内元素
document.write(arr6.pop()+"<br/>");//删除最后一个元素
document.write(arr6+"<br/>");
document.write(arr6.shift()+"<br/>");//删除第一个元素
document.write(arr6+"<br/>");
document.write(arr6.push(10,30)+"<br/>");//从数组后面添加一个或多个元素
document.write(arr6+"<br/>");
document.write(arr6.unshift(20)+"<br/>");//从数组前面添加一个或多个元素
document.write(arr6+"<br/>");
5.排序（升序降序）
例如：
<script type="text/javascript">
function add(a,b){ //add为函数名，（）中的a,b为形参
return a-b;
};
function jian(a,b){ //jian为函数名，（）中的a,b为形参
return b-a;
}
var arr1=[20,10,3,12,37,24,0,7,6,15];
document.write(arr1.sort(add)+"<br/>"); //输出调用函数之后的结果，()中arr1为传递实参，（）中add为调用该函数
document.write(arr1.sort(jian));
</script>
6.使用for语句寻找数组中的最大值最小值
例如：
<script type="text/javascript">
var arr1=[1,-3,19,0,33,45,66,14,20,2];
function max(a){
maxnum=a[0];
for(i=1;i<a.length;i++){
if(maxnum<a[i])
maxnum=a[i];
}
return maxnum;
}
document.write(max(arr1));
</script>
7.三元表达式
例如：
<body>
<script type="text/javascript">
var a=20;
var b=21;
a>b ? alert("a大于b") : alert("a小于b");
//当a大于b执行？后面的语句，不成立时执行:后面的语句
</script>
</body>
8.冒泡排序法
思路：依次比较相邻的两个数，将小数放在前面，大数放在后面。即在第一趟：首先比较第1个和第2个数，
将小数放前，大数放后。然后比较第2个数和第3个数，将小数放前，大数放后，如此继续，直至比较最后两个
数，将小数放前，大数放后。 至此第一趟结束，将最大的数放到了最后。在第二趟：仍从第一对数开始比较
（因为可能由于第2个数和第3个数的交换，使得第1个数不再小于第2个数），将小数放前，大数放后，一直
比较到倒数第二个数（倒数第一的位置上已经是最大的），第二趟结束，在倒数第二的位置上得到一个新
的最大数（其实在整个数列中是第二大的数）。如此下去，重复以上过程，直至最终完成排序。
例如：
<script type="text/javascript">
var arr1=[23,11,43,2,1,56,4];
var len=arr1.length;
function compare(arr){
var tmp="";
for(var i=0;i<len;i++){
for(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;
}
document.write(compare(arr1));
</script>
（八）三种不同的弹出
1.alert（"今天天气真好！"）；
2.confirm("确认删除所选内容吗？");
3.prompt("请输入您的姓名：");
例如：
<script type="text/javascript">
alert("没有选中任何内容");
//confirm("确认删除该内容吗？");
var age1=prompt("小王请输入你的年龄");
var age2=prompt("小新请输入你的年龄");
var age3=prompt("小高请输入你的年龄");
if(isNaN(age1)){
alert("输入的不是数字类型");
}
else if(age1==""){
alert("请输入年龄");
}
var str=[];
str.push(age1,age2,age3);
alert(str);
alert(typeof str);
function max(age){
var max=age[0];
for(i=1;i<age.length;i++){
if(max<age[i]){
max=age[i];
}
}
return max;
}
alert("三个人中最大年龄是:"+max(str));
</script>
