JS第一堂课总结

最新推荐文章于 2022-07-06 20:37:42 发布

wjj1209973939

最新推荐文章于 2022-07-06 20:37:42 发布

阅读量377

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wjj1209973939/article/details/72903632

本文详细介绍了JavaScript的基本用法，包括在HTML页面中插入JavaScript的方法、关键字与标识符的概念、字符串处理技巧、数组操作方法以及常用的弹窗操作等。

JS第一节课笔记

（一）在HTML页面中插入JavaScript的主要方法

</script>标签的位置：

1.按照传统的做法，所有的<script>元素都应该放在页面的<head>元素中

如下：

<!doctype html>

<html>

<head>

</script>

</head>

<body>

</body>

</html>

这种做法的目的是把所有外部文件（css文件、JavaScript文件）的应用放在相同的地方，

方便对代码的查看和修改。但是，在插入在<head>元素中，会导致浏览器在加载页面时出现延迟，因为将<script>写在<head>中必须等到所有的JavaScript代码都下载、解析、和执行完成后,才会在浏览器遇到<body>标签时，呈现页面内容。当代码中有很多JavaScript代码时，浏览器呈现页面的延迟会更加明显，在延迟期间，浏览器的窗口呈现一片空白，对用户来说不是一种好的体验，建议不要使用这种写法，下面会介绍第二种位置写法。

2.将<script>元素都应该放在页面的<body>元素中页面内容的最后面，如下：

<!doctype html>

<html>

<head>

</head>

<body>

</script>

</body>

</html>

这种写法的目的是在JavaScript代码解析之前页面的内容完全呈现在浏览器中，用户体验好，所以推荐使用这种写法，接下来还有一种将<script>元素写在<body>元素中。

3.将<script>元素都应该放在页面的<body>元素中页面内容的最上面，此时需要在代码中添加一部分的内容以达到和方法2相同的效果。如下：

<!doctype html>

<html>

<head>

</head>

<body>

window.onload=function(){

}

</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>

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.排序（升序降序）

例如：

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语句寻找数组中的最大值最小值

例如：

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>

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个数），将小数放前，大数放后，一直比较到倒数第二个数（倒数第一的位置上已经是最大的），第二趟结束，在倒数第二的位置上得到一个新的最大数（其实在整个数列中是第二大的数）。如此下去，重复以上过程，直至最终完成排序。

例如：

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;

}