Ausführliche Erklärung von JavaScript<1>

Frage? Detaillierte Erklärung von JavaScript

1 Variablen, die innerhalb einer JavaScript-Funktion (mit var) deklariert werden, sind lokale Variablen, sodass auf sie nur innerhalb der Funktion zugegriffen werden kann. (Der Gültigkeitsbereich dieser Variablen ist lokal).
Sie können lokale Variablen mit demselben Namen in verschiedenen Funktionen verwenden, da nur die Funktion, in der die Variable deklariert ist, die Variable erkennt.
Lokale Variablen werden gelöscht, sobald die Ausführung der Funktion beendet ist.


2. Globale JavaScript-Variablen
Variablen, die außerhalb einer Funktion deklariert werden, sind globale Variablen und können von allen Skripten und Funktionen auf der Webseite aufgerufen werden.

3. Die Lebensdauer von JavaScript-Variablen beginnt ab dem Zeitpunkt, an dem sie vorhanden sind erklärt Die Zeit beginnt.
Lokale Variablen werden gelöscht, nachdem die Funktion ausgeführt wurde.
Globale Variablen werden nach dem Schließen der Seite gelöscht.

4. Zuweisen eines Werts zu einer nicht deklarierten JavaScript-Variablen Wenn Sie einer nicht deklarierten JavaScript-Variablen einen Wert zuweisen Variable wird die Variable automatisch als globale Variable deklariert.
Zum Beispiel deklariert diese Anweisung:
carname="Volvo";
eine globale Variable carname, auch wenn sie innerhalb einer Funktion ausgeführt wird.

5. JavaScript-Fehler treten definitiv auf Wenn die JavaScript-Engine JavaScript-Code ausführt, treten verschiedene Fehler auf. :
Könnte ein Syntaxfehler sein, normalerweise ein Codierungsfehler oder ein Tippfehler des Programmierers.
Möglicherweise liegt ein Rechtschreibfehler oder eine fehlende Funktion in der Sprache vor (möglicherweise aufgrund von Browserunterschieden).
Der Fehler kann durch eine falsche Ausgabe vom Server oder Benutzer verursacht werden.
Natürlich kann es auch an vielen anderen unvorhersehbaren Faktoren liegen.

Wenn ein Fehler auftritt, wenn etwas schief geht, stoppt die JavaScript-Engine normalerweise und generiert eine Fehlermeldung. Der technische Begriff zur Beschreibung dieser Situation lautet: JavaScript löst einen Fehler aus

2. JS HTML DOM

1. HTML-Inhalt ändern Der einfachste Weg, HTML-Inhalte zu ändern, ist die Verwendung des innerHTML-Attributs.

JavaScript ändert den Inhalt dieses Elements (über innerHTML)

Zum Beispiel:

<p id="p1">Hello World!</p>
<script>document.getElementById("p1").innerHTML="New text!";</script>

Hinweis: Verwenden Sie document.write() niemals, nachdem das Dokument geladen wurde. Dadurch wird das Dokument überschrieben.

2. Ändern Sie die HTML-Attribute

falls erforderlich Verwenden Sie für Attribute von HTML-Elementen diese Syntax:

document.getElementById(id).attribute=new value

Zum Beispiel:

<img id="image" src="smiley.gif"><script>document.getElementById("image").src="landscape.jpg";</script>

3. HTML-Stil ändernUm den Stil von HTML-Elementen zu ändern, verwenden Sie bitte diese Syntax:

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

Zum Beispiel:

<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>

oder:

<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById(&#39;id1&#39;).style.color=&#39;red&#39;">
点击这里
</button>

3.js-Ereignisbehandlung

Wir können JavaScript ausführen, wenn ein Ereignis eintritt, beispielsweise wenn der Benutzer auf ein HTML-Element klickt. Um Code auszuführen, wenn der Benutzer auf ein Element klickt, fügen Sie JavaScript-Code zu einem HTML-Ereignisattribut hinzu:
onclick=JavaScript

当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

HTML 事件的例子：
当用户点击鼠标时

f672ece604af104ca7d6d8f28c9cefb1请点击该文本473f0a7621bec819994bb5020d29372a

或者是：

function changetext(id)
{
id.innerHTML="谢谢!";
}
<h1 onclick="changetext(this)">请点击该文本</h1>

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：

<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
<button id="myBtn">点击这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

2.onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()"><script>function checkCookies(){
if (navigator.cookieEnabled==true){alert("已启用 cookie")}else{alert("未启用 cookie")}}</script>
<p>提示框会告诉你，浏览器是否已启用 cookie。</p>
</body>

3.onchange 事件
onchange 事件常结合对输入字段的验证来使用。
如：下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

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

4.onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
例子：

<p onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</p>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

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

例子：

<p onmousedown="mDown(this)" onmouseup="mUp(this)" 
style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</p>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

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

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

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("p1");
element.appendChild(para);
</script>

相应的有删除元素parent.removeChild(child);首先得到父标签的id。

三、JS 对象

定义：JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
此外，JavaScript 允许自定义对象。
JavaScript 对象
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。

1.使用对象构造器
本例使用函数来构造对象：

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

myFather=new person("Bill","Gates",56,"blue");

document.write(myFather.firstname + " is " + myFather.age + " years old.");

2.JavaScript 类
JavaScript 是面向对象的语言，但 JavaScript 不使用类。
在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。
JavaScript 基于 prototype，而不是基于类的。

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

提示：绝不要在数字前面写零，除非您需要进行八进制转换。

数字属性和方法
属性：
MAX VALUE
MIN VALUE
NEGATIVE INFINITIVE
POSITIVE INFINITIVE
NaN
prototype
constructor

方法：
toExponential()
toFixed()
toPrecision()
toString()
valueOf()

<html>
<body>

<script type="text/javascript">

var txt="Hello World!"

document.write("<p>Big: " + txt.big() + "</p>")
document.write("<p>Small: " + txt.small() + "</p>")

document.write("<p>Bold: " + txt.bold() + "</p>")
document.write("<p>Italic: " + txt.italics() + "</p>")

document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
document.write("<p>Fixed: " + txt.fixed() + "</p>")
document.write("<p>Strike: " + txt.strike() + "</p>")

document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")

document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")
document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")

document.write("<p>Subscript: " + txt.sub() + "</p>")
document.write("<p>Superscript: " + txt.sup() + "</p>")

document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")
</script>

</body>
</html>

4.

getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。


setFullYear()
如何使用 setFullYear() 设置具体的日期。
如：new Date().setFullYear(1992,10,3)


toUTCString()
如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。


getDay()
如何使用 getDay() 和数组来显示星期，而不仅仅是数字。

<script type="text/javascript">

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()])

</script>

5.显示一个钟表
如何在网页上显示一个钟表。

<!DOCTYPE html>
<html>
<head>
	<title北京时间</title>
	<script type="text/javascript" charset="utf-8" language="javascript">
		function time1(){
	var today = new Date();
	var hour = today.getHours(),
	minute = today.getMinutes(),
	second = today.getSeconds();

	minute = checkTime(minute);
	second = checkTime(second);

	document.getElementById(&#39;txt&#39;).innerHTML=hour+":"+minute+":"+second;
	t = setTimeout(&#39;time1()&#39;,500);
}

function checkTime(i){
	if (i<10) {
		i="0" + i;
	}
  return i;
}
	</script>
</head>
<body onload="time1()">
	<p id="txt"></p>
</body>
</html>

6.比较日期
日期对象也可用于比较两个日期。
下面的代码将当前日期与 2008 年 8 月 9 日做了比较：

var myDate=new Date();
myDate.setFullYear(2008,8,9);
var today = new Date();
if (myDate>today)
{
alert("Today is before 9th August 2008");
}
else
{
alert("Today is after 9th August 2008");
}

7.数组处理

合并两个数组 - concat()
如何使用 concat() 方法来合并两个数组。
如：a.concat(b);

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

如;a.join('.'):点为分隔符组成


文字数组 - sort()
如何使用 sort() 方法从字面上对数组进行排序。
如：a.sort();

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

如：a.sort(sortNumber);

8.Math（算数）对象的作用是：执行常见的算数任务。
实例
round()
如何使用 round()。（四舍五入）
random()
如何使用 random() 来(默认)返回 0 到 1 之间的随机数。
max()
如何使用 max() 来返回两个给定的数中的较大的数。（在 ECMASCript v3 之前，该方法只有两个参数。）
min()
如何使用 min() 来返回两个给定的数中的较小的数。（在 ECMASCript v3 之前，该方法只有两个参数。）

9.算数值
JavaScript 提供 8 种可被 Math 对象访问的算数值：
常数
圆周率
2 的平方根
1/2 的平方根
2 的自然对数
10 的自然对数
以 2 为底的 e 的对数
以 10 为底的 e 的对数
这是在 Javascript 中使用这些值的方法：（与上面的算数值一一对应）
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

10.RegExp 对象(正则表达式)

什么是 RegExp？
RegExp 是正则表达式的缩写。
当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。
简单的模式可以是一个单独的字符。
更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。
您可以规定字符串中的检索位置，以及要检索的字符类型，等等。

 (1)定义 RegExp

RegExp 对象用于存储检索模式。
通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 "e"：
var patt1=new RegExp("e");
当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。

(2)RegExp 对象的方法
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。

test("") 方法检索字符串中的指定值。返回值是 true 或 false。
exec("") 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
compile() 方法用于改变 RegExp。既可以改变检索模式，也可以添加或删除第二个参数。

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");//添加一个参数d
document.write(patt1.test("The best things in life are free"));

结果是：true false  :因为有e没有d

 以上就是JavaScript详解6435eeebd2f19b916bfdcb501758e943 的内容，更多相关内容请关注PHP中文网（www.php.cn）！