前端开发学习笔记04---JavaScript

最新推荐文章于 2022-09-01 18:57:05 发布

EddieEddieJones

最新推荐文章于 2022-09-01 18:57:05 发布

阅读量816

点赞数

分类专栏：前端开发学习笔记文章标签： javascript 前端开发脚本语言

前端开发学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

内容摘自w3school
JavaScript 是一门脚本语言，被设计为向 HTML 页面增加交互性。JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
JavaScript：改变 HTML 内容

x=document.getElementById("demo")  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

JavaScript 使用

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

外部脚本不能包含 <script> 标签。

JavaScript 输出

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识 HTML 元素。
JavaScript 由 web 浏览器来执行。在这种情况下，浏览器将访问 id=”demo” 的 HTML 元素，并把它的内容（innerHTML）替换为 “My First JavaScript”。

<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>

直接把 <p> 元素写到 HTML 文档输出中

<script>
document.write("<p>My First JavaScript</p>");
</script>

请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

JavaScript 语句

JavaScript 对大小写敏感。
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。
JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：

document.write("Hello \
World!");

JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
JavaScript 注释
单行注释以 // 开头。
多行注释以 /* 开始，以 */ 结尾。

JavaScript 变量

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 “Volvo”，然后把它放入 id=”demo” 的 HTML 段落中：

<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;

您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var name="Gates", age=56, job="CEO";

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 “Volvo”：

var carname="Volvo";
var carname;

JavaScript 数据类型

JavaScript 字符串
字符串可以是引号中的任意文本。您可以使用单引号或双引号。
JavaScript 数组两种写法：

var cars=new Array("Audi","BMW","Volvo");

var cars=["Audi","BMW","Volvo"];

JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

对象属性有两种寻址方式：

name=person.lastname;
name=person["lastname"];

访问对象属性的语法是：
objectName.propertyName

访问对象的方法：

objectName.methodName()

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
这里是要执行的代码
}

JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。`

JavaScript 变量的生存期
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

JavaScript 运算符

如果把数字与字符串相加，结果将成为字符串。

JavaScript If…Else 语句

请使用 if….else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

if (条件)
  {
  当条件为 true 时执行的代码
  }
else
  {
  当条件不为 true 时执行的代码
  }

JavaScript Switch 语句

语法

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1 和 case 2 不同时执行的代码
}

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

JavaScript For 循环

For 循环

for (语句 1; 语句 2; 语句 3)
  {
  被执行的代码块
  }

如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。

JavaScript for/in 语句循环遍历对象的属性：

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
  {
  txt=txt + person[x];
  }

JavaScript While 循环

While 循环会在指定条件为真时循环执行代码块。

while (条件)
  {
  需要执行的代码
  }

do/while 循环

do
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
while (i<5);

JavaScript Break 和 Continue 语句

break 语句可用于跳出循环。
continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。
正如您在 switch 语句那一章中看到的，可以对 JavaScript 语句进行标记。
如需标记 JavaScript 语句，请在语句之前加上冒号：

label:
语句

continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块。

JavaScript 错误 - Throw、Try 和 Catch

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
JavaScript 抛出错误
当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。
描述这种情况的技术术语是：JavaScript 将抛出一个错误。
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

throw 语句允许我们创建自定义错误。

JavaScript 验证

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

E-mail 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

DOM 简介

通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

var x=document.getElementById("intro");

通过标签名查找 HTML 元素

<p>Hello World!</p>

<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>

<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第二段文本是：' + y[1].innerHTML);
</script>

本例演示 getElementsByTagName 方法。

id 为 “main” 的 div 中的第二段文本是：本例演示 getElementsByTagName 方法。

DOM HTML

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

document.write(Date());

提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

DOM CSS

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style

改变颜色：


<script>
document.getElementById("p2").style.color="blue";
</script>

DOM 事件

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

onclick=JavaScript

在本例中，当用户在 <h1> 元素上点击时，会改变其内容：

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onchange 事件
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>

</body>
</html>

onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

DOM 节点

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

这段代码创建新的 <p> 元素：

var para=document.createElement("p");

如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是新段落。");

然后您必须向 <p> 元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：

var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素：

element.appendChild(para);

删除已有的 HTML 元素
例子解释：
这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

找到 id=”div1” 的元素：

var parent=document.getElementById("div1");

从父元素中删除子元素：

parent.removeChild(child);

提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

JavaScript 对象

JavaScript 对象
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
访问对象属性的语法是：

objectName.propertyName

访问对象的方法

objectName.methodName()

这个例子创建了对象的一个新实例，并向其添加了四个属性：

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

替代语法:

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

把属性添加到 JavaScript 对象
您可以通过为对象赋值，向已有对象添加新属性：

person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

把方法添加到 JavaScript 对象
方法只不过是附加在对象上的函数。
在构造器函数内部定义对象的方法：

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}

hangeName() 函数 name 的值赋给 person 的 lastname 属性。

JavaScript for…in 循环

for (对象中的变量)
  {
  要执行的代码
  }

循环遍历对象的属性：

var person={fname:"Bill",lname:"Gates",age:56};

for (x in person)
  {
  txt=txt + person[x];
  }

JavaScript Number 对象

极大或极小的数字可通过科学（指数）计数法来写：

var y=123e5;    // 12300000
var z=123e-5;   // 0.00123

JavaScript 中的所有数字都存储为根为 10 的 64 位（8 比特），浮点数。
精度
整数（不使用小数点或指数计数法）最多为 15 位。
小数的最大位数是 17，但是浮点运算并不总是 100% 准确。

八进制和十六进制
如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 “x”，则解释为十六进制数。

JS 字符串

indexOf() 方法
使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。

<html>
<body>

<script type="text/javascript">

var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))

</script>

</body>
</html>

这里写图片描述

match() 方法
使用 match() 来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。

document.write(str.match("world!"))

使用 replace() 方法在字符串中用某些字符替换另一些字符。

document.write(str.replace(/Microsoft/,"W3School"))

JS 日期

使用 Date() 方法获得当日的日期。
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
如何使用 setFullYear() 设置具体的日期。

var d = new Date()
d.setFullYear(1992,10,3)
document.write(d)

这里写图片描述

使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。
使用 getDay() 和数组来显示星期，而不仅仅是数字。

var d=new Date()
var weekday=new Array(7)
weekday[0]="星期日"
weekday[1]="星期一"
weekday[2]="星期二"
weekday[3]="星期三"
weekday[4]="星期四"
weekday[5]="星期五"
weekday[6]="星期六"

document.write("今天是" + weekday[d.getDay()])

在网页上显示一个钟表。

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：

var myDate=new Date()

在下面的例子中，我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日)：

var myDate=new Date()
myDate.setFullYear(2008,7,9)

注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。

在下面的例子中，我们将日期对象设置为 5 天后的日期：

var myDate=new Date()
myDate.setDate(myDate.getDate()+5)

注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。
日期对象也可用于比较两个日期。

JS 数组

创建数组，为其赋值

var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

使用 for…in 声明来循环输出数组中的元素。

var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

for (x in mycars)
{
document.write(mycars[x] + "<br />")
}

使用 concat() 方法来合并两个数组。

document.write(arr.concat(arr2))

使用 join() 方法将数组的所有元素组成一个字符串。

var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join());

document.write("<br />");

document.write(arr.join("."));

这里写图片描述

使用 sort() 方法从字面上对数组进行排序。


<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
document.write(arr.sort())

</script>

使用 sort() 方法从数值上对数组进行排序。

<script type="text/javascript">

function sortNumber(a, b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

</script>

JS 逻辑

创建 Boolean 对象的语法：

new Boolean(value); //构造函数
Boolean(value);     //转换函数

返回值
当作为一个构造函数（带有运算符 new）调用时，Boolean() 将把它的参数转换成一个布尔值，并且返回一个包含该值的 Boolean 对象。
如果作为一个函数（不带有运算符 new）调用时，Boolean() 只将把它的参数转换成一个原始的布尔值，并且返回这个值。
注释：如果省略 value 参数，或者设置为 0、-0、null、""、false、undefined 或 NaN，则该对象设置为 false。否则设置为 true（即使 value 参数是字符串 “false”）。

使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象：

var myBoolean=new Boolean()

JS 算数

使用 round()四舍五入。

document.write(Math.round(-4.40) + "<br />")

使用 random() 来返回 0 到 1 之间的随机数。

document.write(Math.random())

使用 max() 来返回两个给定的数中的较大的数。（在 ECMASCript v3 之前，该方法只有两个参数。）

document.write(Math.max(5,7) + "<br />")

使用 min() 来返回两个给定的数中的较小的数。（在 ECMASCript v3 之前，该方法只有两个参数。）

document.write(Math.min(-3,5) + "<br />")

使用 Math 的属性和方法的语法：

var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);

注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

JavaScript 提供 8 种可被 Math 对象访问的算数值：
常数e—Math.E
圆周率—Math.PI
2 的平方根—Math.SQRT2
1/2 的平方根—Math.SQRT1_2
2 的自然对数—Math.LN2
10 的自然对数—Math.LN10
以 2 为底的 e 的对数—Math.LOG2E
以 10 为底的 e 的对数—Math.LOG10E
下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数：

document.write(Math.floor(Math.random()*11))

JS 正则表达式

RegExp 对象用于存储检索模式。
通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 “e”：

var patt1=new RegExp("e");

当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 “e”。
test()
test() 方法检索字符串中的指定值。返回值是 true 或 false。

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

由于该字符串中存在字母 “e”，以上代码的输出将是：true

exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free"));

由于该字符串中存在字母 “e”，以上代码的输出将是：e
您可以向 RegExp 对象添加第二个参数，以设定检索。例如，如果需要找到所有某个字符的所有存在，则可以使用 “g” 参数 (“global”)。
在使用 “g” 参数时，exec() 的工作原理如下：
找到第一个 “e”，并存储其位置
如果再次运行 exec()，则从存储的位置开始检索，并找到下一个 “e”，并存储其位置

var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)

由于这个字符串中 6 个 “e” 字母，代码的输出将是：eeeeeenull

compile()
compile() 方法用于改变 RegExp。
compile() 既可以改变检索模式，也可以添加或删除第二个参数。

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));