Explication détaillée de JavaScript<1>

Des questions ? Explication détaillée de JavaScript

1. Les variables déclarées dans une fonction JavaScript (à l'aide de var) sont des variables locales, elles ne sont donc accessibles qu'à l'intérieur de la fonction. (La portée de cette variable est locale).
Vous pouvez utiliser des variables locales portant le même nom dans différentes fonctions car seule la fonction dans laquelle la variable est déclarée reconnaîtra la variable.
Les variables locales seront supprimées dès que la fonction sera terminée.


2. Variables JavaScript globales
Les variables déclarées en dehors d'une fonction sont des variables globales et sont accessibles par tous les scripts et fonctions de la page Web.

3. La durée de vie des variables JavaScript
La durée de vie des variables JavaScript commence à partir du moment où elles sont déclaré Le temps commence.
Les variables locales seront supprimées après l'exécution de la fonction.
Les variables globales seront supprimées après la fermeture de la page.

4. Attribuer une valeur à une variable JavaScript non déclarée
Si vous attribuez une valeur à une variable JavaScript non déclarée variable, la variable sera automatiquement déclarée comme variable globale.
Par exemple, cette instruction :
carname="Volvo";
déclarera une variable globale carname, même si elle est exécutée au sein d'une fonction.

5. Des erreurs JavaScript se produiront certainement
Lorsque le moteur JavaScript exécute du code JavaScript, diverses erreurs se produiront. :
Il peut s'agir d'une erreur de syntaxe, généralement une erreur de codage ou une faute de frappe faite par le programmeur.
Il peut s'agir d'une erreur d'orthographe ou d'une fonctionnalité manquante dans la langue (peut-être en raison des différences entre les navigateurs).
L'erreur peut être causée par une sortie incorrecte du serveur ou de l'utilisateur.
Bien sûr, cela pourrait aussi être dû à de nombreux autres facteurs imprévisibles.

Lorsqu'une erreur se produit, lorsque quelque chose ne va pas, le moteur JavaScript s'arrête généralement et génère un message d'erreur.
Le terme technique pour décrire cette situation est : JavaScript générera une erreur

2. JS HTML DOM

1. Modifier le contenu HTML
Le moyen le plus simple de modifier le contenu HTML est d'utiliser l'attribut innerHTML.

JavaScript modifie le contenu de cet élément (via innerHTML)

Par exemple :

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

Remarque : n'utilisez jamais document.write() une fois le document chargé. Cela écrasera le document.

2. Modifiez les attributs HTML

si nécessaire. Pour les attributs des éléments HTML, utilisez cette syntaxe :

document.getElementById(id).attribute=new value

Par exemple :

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

3. 🎜 >Pour modifier le style des éléments HTML, veuillez utiliser cette syntaxe :

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

Par exemple :

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

ou :

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

Gestion des événements dans 3.js

Nous pouvons exécuter JavaScript lorsqu'un événement se produit, comme lorsque l'utilisateur clique sur un élément HTML . Pour exécuter du code lorsque l'utilisateur clique sur un élément, ajoutez du code JavaScript à un attribut d'événement HTML :
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）！