一、Javascript
1. What is JS
2. What can we do with JS
3. The lanuage and features
4. Interpreting JS
二、 Validation
<HTML>
<HEAD>
<SCRIPT>
<!--验证表单数据-->
function validate(){
if (document.forms[0].elements[0].value==“”) {
alert(“please enter your email”);
<!--alert弹出一个警告框，提示用户输入他们的电子邮件地址-->
return false;
}
return true;
}
</SCRIPT>
</HEAD>
<!--FORM定义了一个表单-->
<!--method="get"：使用GET方法来发送表单数据，将数据附加到URL的查询字符串中-->
<!--action="someURL"：表单数据发送到的目标URL-->
<!--onSubmit="return validate()"：在提交表单时调用函数"validate()"进行验证-->
<!--如果验证函数返回false，则表单不会被提交-->
<BODY>
<FORM method=“get” action=“someURL” onSubmit=“return validate()”>
<!--文本输入框使用<input>标签创建-->
<!--type="text"：输入框的类型为文本，这个名称将在提交表单时用于标识输入框的值-->
<!--name="email"：输入框的名称为"email"-->
<!--placeholder=""：显示在输入框内的占位符文本，提示用户输入电子邮件地址-->
<input type=text name=“email”>enter your email<br>
<!--提交按钮使用<input>标签创建-->
<!--type="submit"：指定按钮的类型为提交按钮-->
<!--value="send"：按钮上显示的文本为"send"-->
<!--用户在文本输入框中输入完电子邮件地址并点击提交按钮时，表单将被提交，并调用函数"validate()"进行验证-->
<input type=submit value=“send”>
</FORM>
</BODY>
</HTML>
<html>
<head>
<script>
var greeting=“Hello”;
</script>
</head>
<body>
<script>
<!-- document.write()将带有 magenta 颜色的 "Hello" 和 "world!" 输出到页面中-->
<!--向页面写入一个 <font> 标签，并设置字体颜色为 magenta-->
document.write(“<FONT COLOR=‘magenta’>”);
<!--输出换行符 <br> 和文字 "world!"。通过 </FONT> 关闭之前打开的 <font> 标签-->
document.write(greeting);
document.write(“<br>world!</FONT>”);
</script>
</body>
</html>
<HTML>
<HEAD>
<!--type="text/javascript"是 <script> 属性之一，指定嵌入的脚本语言类型，此处为 JavaScript-->
<SCRIPT type="text/javascript">
function updateOrder() {
const cakePrice = 1;
var noCakes = document.getElementById("cake").value;
document.getElementById("total").value = "£" + cakePrice*noCakes;
}
function placeOrder(form){ form.submit(); }
</SCRIPT>
</HEAD>
<BODY>
<FORM method="get" action="someURL">
<H3>Cakes Cost £1 each</H3>
<input type=text name="cakeNo" id="cake"
onchange="updateOrder()">enter no. cakes<br>
<input type=text name="total" id="total">Total Price<br>
<input type=button value="send" onClick="placeOrder(this.form)">
</FORM>
</BODY>
</HTML>
三、 Dynamic Typing
1. Type is defined by literal value you assign to it
![【高级程序设计】Week2-4&Week3-1 JavaScript-LMLPHP]( "【高级程序设计】Week2-4&Week3-1 JavaScript-LMLPHP")
2. Implicit conversion between types![【高级程序设计】Week2-4&Week3-1 JavaScript-LMLPHP]( "【高级程序设计】Week2-4&Week3-1 JavaScript-LMLPHP")
3. Quotes within strings&writeln
4. Comparison Operators
5. Explicit Conversion Functions
<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function updateOrder() {
const cakePrice = 1;
const bunPrice = 0.5;
var noCakes = document.getElementById("cake").value;
var noBuns = document.getElementById("bun").value;
document.getElementById("count").value = parseInt(noCakes, 10)+parseInt(noBuns, 10);
document.getElementById("total").value = "£" + (cakePrice*noCakes +
bunPrice*noBuns);
}
function placeOrder(form) { form.submit(); }
</SCRIPT>
</HEAD>
<BODY>
<FORM method="get" action="someURL">
<H3>Cakes Cost £1 each; Buns 50p each</H3>
<input type=text name="cakeNo" id="cake" onchange="updateOrder()">enter no. cakes<br>
<input type=text name="bunNo" id="bun" onchange="updateOrder()">enter no. buns<br>
<input type=text name="count" id="count">number of units<br>
<input type=text name="total" id="total">Total Price<br>
<input type=button value="send" onClick="placeOrder(this.form)">
</FORM>
</BODY>
</HTML>
四、Event-handling
1. Event-Diven Programming
2. Feedback (Forms and JavaScript, Event Handling)
3. Dynamic Writing
<html>
<head>
<script type=“text/javascript”>
function validate() {
if (document.forms[0].usrname.value==“”) {
alert(“please enter name”);
document.forms[0].usrname.focus();
document.forms[0].usrname.value=“please enter name”;
document.getElementById(“a”).innerHTML=“please enter name above”;
}
}
</script>
</head>
<body>
<font face=“arial”>
<h1>Please enter details</h1>
<form>
Name <input type=“text” name=“usrname”> <br>
<font color=“red”> <p id="a"> </p></font>
<font face=“arial”>
Email <input type=“text” name=“email”> <br><br>
<input type=“button” value=“Send” onclick=“validate()”>
</form>
</body>
</html>
五、 Arrays and Objects
1. Strings & Intervals
2. JavaScript and Functions
3. Arrays and Objects
4. Scope and local functions
html><head><title>Functions </title>
<script>
y = 6;
function square(x) {
var y = x*x; // if didn’t include var, then y is the global y
return y;
}
</script></head>
<body>
<script>
document.write(“The square of ” + y + “ is ”);//36
document.write(square(y));
document.write(“<P>y is ” + y);//6
</script>
</body></html>
六、Cookies
//A Cookie to remember the number of visits
<html>
<head>
<title>How many times have you been here before?</title>
<script type="text/javascript">
expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
hitCt = parseInt(cookieVal("pageHit"));
hitCt++;
document.cookie= "pageHit=" + hitCt + ";expires=" + expireDate.toGMTString();
function cookieVal(cookieName) {
thisCookie = document.cookie.split("; ");
for (i=0; i<thisCookie.length; i++) {
if (cookieName == thisCookie[i].split("=")[0])
return thisCookie[i].split("=")[1];
}
return 0;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<h2>
<script language="Javascript" type="text/javascript">
document.write("You have visited this page " + hitCt + " times.");
</script>
</h2>
</body>
</html>
七、PROBLEMS WITH USER INPUT
1. A Cautionary Tale: SQL Statements
2. Further Examples of Event Handling
//First set up array containing help text
<HTML>
<HEAD>
<TITLE>Forms</TITLE>
<SCRIPT>
var helpArray = [“Enter your name in this input box.”,“Enter your email address in this input box, \in the format user@domain.”,“Check this box if you liked our site.”,“In this box, enter any comments you would \like us to read.”,“This button submits the form to the \server-side script”,“This button clears the form”,“This TEXTAREA provides context-sensitive help. \Click on any input field or use the TAB key to \get more information about the input field.”];
function helpText(messageNum) {
document.myForm.helpBox.value = helpArray[messageNum];
}
function formSubmit() {
window.event.returnValue = false;
if (confirm(“Are you sure you want to submit?”))
window.event.returnValue = true;
// so in this case it now performs the action
}
function formReset() {
window.event.returnValue = false;
if (confirm(“Are you sure you want to reset?”))
window.event.returnValue = true;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME = “myForm” ONSUBMIT = “formSubmit()”
ACTION=http://localhost/cgi-bin/mycgi ONRESET = “return formReset()”>
Name: <INPUT TYPE = “text” NAME = “name” ONFOCUS = “helpText(0)” ONBLUR = “helpText(6)”><BR>
Email: <INPUT TYPE = “text” NAME = “email” ONFOCUS = “helpText(1)” ONBLUR = “helpText(6)”><BR>
Click here if you like this site
<INPUT TYPE = “checkbox” NAME = “like” ONFOCUS = “helpText(2)” ONBLUR = “helpText(6)”><BR>
Any comments?<BR>
<TEXTAREA NAME = “comments” ROWS = 5 COLS = 45 ONFOCUS = “helpText(3)” ONBLUR = “helpText(6)”></TEXTAREA><BR>
<INPUT TYPE = “submit” VALUE = “Submit” ONFOCUS = “helpText(4)” ONBLUR = “helpText(6)”>
<INPUT TYPE = “reset” VALUE = “Reset” ONFOCUS = “helpText(5)” ONBLUR = “helpText(6)”>
<TEXTAREA NAME = “helpBox” STYLE = “position: absolute; right:0; top: 0” ROWS = 4 COLS = 45>
This TEXTAREA provides context-sensitive help. Click on any input field or use the TAB key to get more information about the input field.</TEXTAREA>
</FORM>
</BODY>
</HTML>
//Element objects & ONLOAD
<HTML>
<HEAD>
<TITLE>Object Model</TITLE>
<SCRIPT>
function start() {
alert(pText.innerText);
pText.innerText = “Thanks for coming.”;
}
</SCRIPT>
</HEAD>
<BODY ONLOAD = “start()”>
<P ID = “pText”>Welcome to our Web page!</P>//Changes when alert box is clicked.
//pText.innerText or document.getElementById(“pText”).innerHTML
</BODY>
</HTML>
//More inner text – from Microsoft (Altering Text)
<P ID=oPara>Here's the text that will change.</P>
<BUTTON onclick=“oPara.innerText=‘WOW! It changed!’”>Change text</BUTTON>
<BUTTON onclick=“oPara.innerText=‘And back again’”>Reset</BUTTON>