search

Home >Web Front-end >JS Tutorial >Detailed explanation of JavaScript<1>

Detailed explanation of JavaScript<1>

黄舟
黄舟Original
2017-02-27 14:44:471202browse

question? Detailed explanation of JavaScript

1. Variables declared inside a JavaScript function (using var) are local variables, so they can only be accessed inside the function. (The scope of this variable is local).
You can use local variables with the same name in different functions, because only the function in which the variable is declared can recognize the variable.
As soon as the function completes running, local variables will be deleted.


2. Global JavaScript variables
Variables declared outside the function are global variables and can be accessed by all scripts and functions on the web page.


3. The lifetime of JavaScript variables
The lifetime of JavaScript variables starts from the time they are declared. Time begins.
Local variables will be deleted after the function is run.
Global variables will be deleted after the page is closed.


4. Assign a value to an undeclared JavaScript variable
If you assign a value to an undeclared JavaScript variable variable, the variable will be automatically declared as a global variable.
Such as this statement:
carname="Volvo";
will declare a global variable carname, even if it is executed within a function.


5. JavaScript errors will definitely occur
When the JavaScript engine executes JavaScript code, various errors will occur :
may be a syntax error, usually a coding error or typo caused by the programmer.
could be a spelling mistake or a missing feature in the language (possibly due to browser differences).
The error may be caused by incorrect output from the server or user.
Of course, it may also be due to many other unpredictable factors.

When an error occurs, when something goes wrong, the JavaScript engine usually stops and generates an error message.
The technical term to describe this situation is: JavaScript will throw an error


2. JS HTML DOM

1. Change HTML content
The simplest way to modify HTML content is to use the innerHTML attribute.

JavaScript changes the content of this element (via innerHTML)

For example: 

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


#Note: Never use document.write() after the document has been loaded. This will overwrite the document.


2. Change the HTML attributes


If necessary For attributes of HTML elements, use this syntax: 

document.getElementById(id).attribute=new value



##For example: 

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



##3. Change the HTML style

If you need to change For styles of HTML elements, please use this syntax: 

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

For example: 

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


Or:

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



 ##3.js event processing

We can execute JavaScript when an event occurs, such as when the user clicks on an HTML element.

To execute code when the user clicks on an element, add JavaScript code to an HTML event attribute:

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


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Understanding the closure principle of jsNext article：Understanding the closure principle of js

Related articles

See more