1:javascript有个事件机制,可以在网页上发生某个事件时,才触发某一段javascript代码
2:onload事件在网页载入完毕后触发。设定<body>标签的onload属性即可对onload事件有所响应。
3:javaScript 使用三种基本数据类型:text,number,boolean.
4:javacript 专门描述没有值的状态的值是:undefined.NaN是个非数字的值。
5:var numCakeDonuts = parseInt(document.getElementById("cakedonuts").value);
var numGlazedDonuts = parseInt(document.getElementById("glazeddonuts").value);
if(isNaN(numCakeDonuts)){将整数字符串转换成整数
numCakeDonuts =0;
}
if(isNaN(numGlazedDonuts)){//判断是不是一个数字
numGlazedDonuts = 0;
}
document.getElementById("total").value = "$" + total.toFixed(2);函数把金额四舍五入到小数点的
后两位。
6:定时器让我们能在一段时限流逝后才运行javascript代码。
制作单次定时器setTimeout("alert('Wake up!');",60000);
间隔定时器 var timerID = setInterval("alert('Wake up!');",60000);
7:document.getElementById("rockImg").style.height = (document.body.clientHeight -100)*0.9;
<body onload="resizeRock();greetUser();" onresize="resizeRock();">
调整浏览器窗口的尺寸将触发onresize事件
8:javaScript于浏览器关闭或网页重新载入时摧毁所有的变量。
cookie是浏览器存储在用户计算机里的一块数据。
javaScript+cookie = 适合客户端便利的持久性数据存储方案。
if(navigator.cookieEnabled){//检查浏览器是否支持cookie
userName = readCookie("irock_username");
}
9:
我们熟悉的函数创建方式
function showSeatStatus(seatNum){
alert("this seat is");
}
另一种创建函数的方式
var showSeatStatus = function(seatNum){
alert("this seat is");
}
var myShowSeatStatus = showSeatStatus;
调用或引用你的函数
10:
window.onload = function(){
document.getElementById("findseat").onclick = findSeat;
// Wire the seat image events
document.getElementById("seat0").onclick = function(evt) { showSeatStatus(0); };
11:怎样取得表单中的值
form 对象厉害的地方在于它也是个数组,负责存储表单中所有的域。利用域的名字存储。
form["zipcode"].value;
12:不在是焦点:onblur 每次输入选择离开都会触发这个事件。onblur事件极度适应触发数据验证。失去
焦点时被触发。
13:正则表达式:用于匹配文本的模式。
正则表达式出现在一对//里。
元字符:
正则表达式的限定符
利用正则表达式验证数据
<html>
<head>
<title>Bannerocity - Personalized Online Sky Banners</title>
<link rel="stylesheet" type="text/css" href="bannerocity.css" />
<script type="text/javascript">
function validateRegEx(regex, input, helpText, helpMessage) {
// See if the input data validates OK
if (!regex.test(input)) {
// The data is invalid, so set the help message and return false
if (helpText != null)
helpText.innerHTML = helpMessage;
return false;
}
else {
// The data is OK, so clear the help message and return true
if (helpText != null)
helpText.innerHTML = "";
return true;
}
}
function validateNonEmpty(inputField, helpText) {
// See if the input value contains any text
return validateRegEx(/.+/,
inputField.value, helpText,
"Please enter a value.");
}
function validateLength(minLength, maxLength, inputField, helpText) {
// See if the input value contains at least minLength but no more than maxLength characters
return validateRegEx(new RegExp("^.{" + minLength + "," + maxLength + "}$"),
inputField.value, helpText,
"Please enter a value " + minLength + " to " + maxLength +
" characters in length.");
}
function validateZipCode(inputField, helpText) {
// First see if the input value contains data
if (!validateNonEmpty(inputField, helpText))
return false;
// Then see if the input value is a ZIP code
return validateRegEx(/^\d{5}$/,
inputField.value, helpText,
"Please enter a 5-digit ZIP code.");
}
function validateDate(inputField, helpText) {
// First see if the input value contains data
if (!validateNonEmpty(inputField, helpText))
return false;
// Then see if the input value is a date
return validateRegEx(/^\d{2}\/\d{2}\/(\d{2}|\d{4})$/,
inputField.value, helpText,
"Please enter a date (for example, 01/14/1975).");
}
function validatePhone(inputField, helpText) {
// First see if the input value contains data
if (!validateNonEmpty(inputField, helpText))
return false;
// Then see if the input value is a phone number
return validateRegEx(/^\d{3}-\d{3}-\d{4}$/,
inputField.value, helpText,
"Please enter a phone number (for example, 123-456-7890).");
}
function validateEmail(inputField, helpText) {
// First see if the input value contains data
if (!validateNonEmpty(inputField, helpText))
return false;
// Then see if the input value is an email address
return validateRegEx(/^[\w\.-_\+]+@[\w-]+(\.\w{2,3})+$/,
inputField.value, helpText,
"Please enter an email address (for example, johndoe@acme.com).");
}
function placeOrder(form) {
if (validateLength(1, 32, form["message"], form["message_help"]) &&
validateZipCode(form["zipcode"], form["zipcode_help"]) &&
validateDate(form["date"], form["date_help"]) &&
validateNonEmpty(form["name"], form["name_help"]) &&
validatePhone(form["phone"], form["phone_help"]) &&
validateEmail(form["email"], form["email_help"])) {
// Submit the order to the server
form.submit();
} else {
alert("I'm sorry but there is something wrong with the order information.");
}
}
</script>
</head>
<body onload="document.getElementById('message').focus()">
<div class="heading">
<img id="logo" src="logo.png" alt="Bannerocity" />
</div>
<form name="orderform" action="bannerocity.php" method="POST">
<div class="field">
Enter the banner message:
<input id="message" name="message" type="text" size="32"
onblur="validateLength(1, 32, this, document.getElementById('message_help'))" />
<span id="message_help" class="help"></span>
</div>
<div class="field">
Enter ZIP code of the location:
<input id="zipcode" name="zipcode" type="text" size="5"
onblur="validateZipCode(this, document.getElementById('zipcode_help'))" />
<span id="zipcode_help" class="help"></span>
</div>
<div class="field">
Enter the date for the message to be shown:
<input id="date" name="date" type="text" size="10"
onblur="validateDate(this, document.getElementById('date_help'))" />
<span id="date_help" class="help"></span>
</div>
<div class="field">
Enter your name:
<input id="name" name="name" type="text" size="32"
onblur="validateNonEmpty(this, document.getElementById('name_help'))" />
<span id="name_help" class="help"></span>
</div>
<div class="field">
Enter your phone number:
<input id="phone" name="phone" type="text" size="12"
onblur="validatePhone(this, document.getElementById('phone_help'))" />
<span id="phone_help" class="help"></span>
</div>
<div class="field">
Enter your email address:
<input id="email" name="email" type="text" size="32"
onblur="validateEmail(this, document.getElementById('email_help'))" />
<span id="email_help" class="help"></span>
</div>
<input type="button" value="Order Banner" onclick="placeOrder(this.form);" />
</form>
</body>
</html>
14:改变文本的安全三步骤
15:数据+行为=对象
16:自定义对象
function Blog(body,date){
this.body = body;
this.date = date;
this.toString = function(){
return "[" +(this.date.getMonth()+1) +"/" + this.date.getDate() +"/"
+ this.date.getFullYear()+"]" + this.body;
}
不像特性需要为每个对象存储独特数据,方法应该为对象所共享。所以所有的Blog对象共享一份方法副本,将是更好的设计。这就需要类方法
类属性必须通过this关键字访问。
18:怎样把方法加到标准javaScript对象中。
18:Ajax
Xml是种为任何类型的数据设计格式的标记语言。
Xhtml是现代版的html遵循xml的严格规则。
<input type="button" id="showall" value="Show All Blog Entries" disabled="disabled" //禁用一个按钮onclick="showBlog();" />
document.getElementById("search").disabled = false; //启用按钮