JavaScript<1>에 대한 자세한 설명
- 黄舟원래의
- 2017-02-27 14:44:471170검색
질문이 있으신가요? 자바스크립트 상세 설명
1. 자바스크립트 함수 내에서 선언된 변수(var를 사용)는 지역 변수이므로 함수 내에서만 접근이 가능합니다. (이 변수의 범위는 로컬입니다.)
변수가 선언된 함수에서만 변수를 인식하므로 같은 이름의 지역 변수를 다른 함수에서 사용할 수 있습니다.
로컬 변수는 함수 실행이 완료되는 즉시 삭제됩니다.
2. 전역 자바스크립트 변수
함수 외부에서 선언된 변수는 전역 변수이며 웹페이지의 모든 스크립트와 함수에서 접근할 수 있습니다.
3. JavaScript 변수의 수명
JavaScript 변수의 수명은 변수가 있을 때부터 시작됩니다. 선언된 시간이 시작됩니다.
지역 변수는 함수 실행 후 삭제됩니다.
페이지를 닫으면 전역 변수가 삭제됩니다.
4. 선언되지 않은 JavaScript 변수에 값 할당
선언되지 않은 JavaScript 변수에 값을 할당하는 경우 변수를 사용하면 해당 변수가 자동으로 전역 변수로 선언됩니다.
예를 들어
carname="Volvo";
문은 함수 내에서 실행되더라도 전역 변수 carname을 선언합니다.
5. JavaScript 오류는 반드시 발생합니다
JavaScript 엔진이 JavaScript 코드를 실행하면 다양한 오류가 발생합니다. :
구문 오류일 수 있습니다. 일반적으로 프로그래머의 코딩 오류나 오타일 수 있습니다.
철자 오류이거나 언어 기능이 누락되었을 수 있습니다(브라우저 차이로 인해).
서버나 사용자의 잘못된 출력으로 인해 오류가 발생할 수 있습니다.
물론, 예측할 수 없는 다른 여러 요인으로 인해 발생할 수도 있습니다.
오류가 발생하거나 문제가 발생하면 일반적으로 JavaScript 엔진이 중지되고 오류 메시지가 생성됩니다.
이 상황을 설명하는 기술 용어는 다음과 같습니다. JavaScript는 오류를 발생시킵니다.
2. JS HTML DOM
1. HTML 콘텐츠 변경
HTML 콘텐츠를 수정하는 가장 쉬운 방법은 innerHTML 속성을 사용하는 것입니다.
JavaScript는 innerHTML을 통해 이 요소의 콘텐츠를 변경합니다.
예:
<p id="p1">Hello World!</p>
<script>document.getElementById("p1").innerHTML="New text!";</script>참고: 문서가 로드된 후에는 document.write()를 사용하지 마십시오. 문서를 덮어쓰게 됩니다.
2. 필요한 경우 HTML 속성을
변경합니다. HTML 요소의 속성에는 다음 구문을 사용하세요:
document.getElementById(id).attribute=new value
예:
<img id="image" src="smiley.gif"><script>document.getElementById("image").src="landscape.jpg";</script>3. HTML 스타일을 변경하는 경우
변경해야 함 HTML 요소 스타일의 경우 다음 구문을 사용하세요:
document.getElementById(id).style.property=new style
예:
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>또는
아아앙3.js 이벤트 처리
사용자가 HTML 요소를 클릭하는 등 이벤트가 발생하면 JavaScript를 실행할 수 있습니다.
사용자가 요소를 클릭할 때 코드를 실행하려면 HTML 이벤트 속성에 JavaScript 코드를 추가하세요.
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('txt').innerHTML=hour+":"+minute+":"+second;
t = setTimeout('time1()',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）！