Skip to content

Commit 3dd71c6

Browse files
huang303513huang303513
committed
OC与JS交互Demo理解学习
1 parent b1f66f0 commit 3dd71c6

File tree

37 files changed

+1338
-21
lines changed

37 files changed

+1338
-21
lines changed

‎Head First Javascript学习代码/chapter7/bannerocity.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
body{
2+
font: 14px arial;
3+
text-align: center;
4+
}
5+
6+
div.heading{
7+
margin-bottom: 25px;
8+
}
9+
10+
div.field{
11+
margin-bottom: 5px;
12+
text-align: left;
13+
}
14+
15+
span.help{
16+
color: #660000;
17+
font-style: italic;
18+
}

‎Head First Javascript学习代码/chapter7/bannerocity.html

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>这是一个测试</title>
6+
<link rel="stylesheet" type="text/css" href="bannerocity.css">
7+
<script type="text/javascript">
8+
function validateRegEx(regex, input, helpText, helpMessage) {
9+
// See if the input data validates OK
10+
if (!regex.test(input)) {
11+
// The data is invalid, so set the help message and return false
12+
if (helpText != null)
13+
helpText.innerHTML = helpMessage;
14+
return false;
15+
}
16+
else {
17+
// The data is OK, so clear the help message and return true
18+
if (helpText != null)
19+
helpText.innerHTML = "";
20+
return true;
21+
}
22+
}
23+
24+
function validateNonEmpty(inputField, helpText) {
25+
// See if the input value contains any text
26+
return validateRegEx(/.+/,
27+
inputField.value, helpText,
28+
"Please enter a value.");
29+
}
30+
31+
function validateLength(minLength, maxLength, inputField, helpText) {
32+
// See if the input value contains at least minLength but no more than maxLength characters
33+
return validateRegEx(new RegExp("^.{" + minLength + "," + maxLength + "}$"),
34+
inputField.value, helpText,
35+
"Please enter a value " + minLength + " to " + maxLength +
36+
" characters in length.");
37+
}
38+
39+
function validateZipCode(inputField, helpText) {
40+
// First see if the input value contains data
41+
if (!validateNonEmpty(inputField, helpText))
42+
return false;
43+
44+
// Then see if the input value is a ZIP code
45+
return validateRegEx(/^\d{5}$/,
46+
inputField.value, helpText,
47+
"Please enter a 5-digit ZIP code.");
48+
}
49+
50+
function validateDate(inputField, helpText) {
51+
// First see if the input value contains data
52+
if (!validateNonEmpty(inputField, helpText))
53+
return false;
54+
55+
// Then see if the input value is a date
56+
return validateRegEx(/^\d{2}\/\d{2}\/(\d{2}|\d{4})$/,
57+
inputField.value, helpText,
58+
"Please enter a date (for example, 01/14/1975).");
59+
}
60+
61+
function validatePhone(inputField, helpText) {
62+
// First see if the input value contains data
63+
if (!validateNonEmpty(inputField, helpText))
64+
return false;
65+
66+
// Then see if the input value is a phone number
67+
return validateRegEx(/^\d{3}-\d{3}-\d{4}$/,
68+
inputField.value, helpText,
69+
"Please enter a phone number (for example, 123-456-7890).");
70+
}
71+
72+
function validateEmail(inputField, helpText) {
73+
// First see if the input value contains data
74+
if (!validateNonEmpty(inputField, helpText))
75+
return false;
76+
77+
// Then see if the input value is an email address
78+
return validateRegEx(/^[\w\.-_\+]+@[\w-]+(\.\w{2,3})+$/,
79+
inputField.value, helpText,
80+
"Please enter an email address (for example, johndoe@acme.com).");
81+
}
82+
83+
function placeOrder(form) {
84+
if (validateLength(1, 32, form["message"], form["message_help"]) &&
85+
validateZipCode(form["zipcode"], form["zipcode_help"]) &&
86+
validateDate(form["date"], form["date_help"]) &&
87+
validateNonEmpty(form["name"], form["name_help"]) &&
88+
validatePhone(form["phone"], form["phone_help"]) &&
89+
validateEmail(form["email"], form["email_help"])) {
90+
// Submit the order to the server
91+
form.submit();
92+
} else {
93+
alert("I'm sorry but there is something wrong with the order information.");
94+
}
95+
}
96+
</script>
97+
</head>
98+
<body onload="document.getElementById('message').focus()">
99+
<div class="heading">
100+
<img src="logo.png" id="logo" alt="Bannerocity" />
101+
</div>
102+
103+
<form name="orderform" action="bannerocity.php" method="POST">
104+
<div class="field">
105+
Enter the banner message:
106+
<input id="message" name="message" type="text" size="32" onblur="validateLength(1, 32, this, document.getElementById('message_help'))" />
107+
<span id="message_help" class="help"></span>
108+
</div>
109+
110+
<div class="field">
111+
Enter ZIP code of the location:
112+
<input id="zipcode" name="zipcode" type="text" size="5" onblur="validateZipCode(this, document.getElementById('zipcode_help'))"/>
113+
<span id="zipcode_help" class="help"></span>
114+
</div>
115+
116+
<div class="field">
117+
Enter the date for the message to be shown:
118+
<input id="date" name="date" type="text" size="10"
119+
onblur="validateDate(this, document.getElementById('date_help'))" />
120+
<span id="date_help" class="help"></span>
121+
</div>
122+
<div class="field">
123+
Enter your name:
124+
<input id="name" name="name" type="text" size="32"
125+
onblur="validateNonEmpty(this, document.getElementById('name_help'))" />
126+
<span id="name_help" class="help"></span>
127+
</div>
128+
<div class="field">
129+
Enter your phone number:
130+
<input id="phone" name="phone" type="text" size="12"
131+
onblur="validatePhone(this, document.getElementById('phone_help'))" />
132+
<span id="phone_help" class="help"></span>
133+
</div>
134+
<div class="field">
135+
Enter your email address:
136+
<input id="email" name="email" type="text" size="32"
137+
onblur="validateEmail(this, document.getElementById('email_help'))" />
138+
<span id="email_help" class="help"></span>
139+
</div>
140+
141+
<input type="button" value="Order Banner" onclick="placeOrder(this.form);" />
142+
</form>
143+
144+
145+
</body>
146+
</html>

‎Head First Javascript学习代码/chapter7/bannerocity.php

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<html>
2+
<body>
3+
<?php
4+
$num = rand(1000, 10000);
5+
$message = $_POST['message'];
6+
$zipcode = $_POST['zipcode'];
7+
$date = $_POST['date'];
8+
$name = $_POST['name'];
9+
$phone = $_POST['phone'];
10+
$email = $_POST['email'];
11+
12+
echo "<h1>Bannerocity</h1>";
13+
echo "<h2>Order Confirmation</h2>";
14+
echo "<strong>Order #" . $num . "</strong><br />";
15+
echo "Banner message: <span style='font-family:monospace; font-size:x-large'><strong>" . $message . "</strong></span><br />";
16+
echo "ZIP code: " . $zipcode . "<br />";
17+
echo "Fly date: " . $date . "<br />";
18+
echo "Customer name: " . $name . "<br />";
19+
echo "Phone number: " . $phone . "<br />";
20+
echo "Email: " . $email . "<br />";
21+
?>
22+
</body>
23+
</html>

‎Head First Javascript学习代码/chapter7/logo.png

26.2 KB
Loading

‎Head First Javascript学习代码/chapter8/sfa/scene0.png

108 KB
Loading

‎Head First Javascript学习代码/chapter8/sfa/scene1.png

116 KB
Loading

‎Head First Javascript学习代码/chapter8/sfa/scene2.png

117 KB
Loading

‎Head First Javascript学习代码/chapter8/sfa/scene3.png

121 KB
Loading

‎Head First Javascript学习代码/chapter8/sfa/scene4.png

123 KB
Loading

‎Head First Javascript学习代码/chapter8/sfa/scene5.png

114 KB
Loading

‎Head First Javascript学习代码/chapter8/sfa/scene6.png

120 KB
Loading

‎Head First Javascript学习代码/chapter8/sfa/scene7.png

117 KB
Loading

‎Head First Javascript学习代码/chapter8/sfa/scene8.png

96.8 KB
Loading

‎Head First Javascript学习代码/chapter8/sfa/scene9.png

95.4 KB
Loading

‎Head First Javascript学习代码/chapter8/sfa/sfa.html

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>测试</title>
6+
<style type="text/css">
7+
span.decision {
8+
font-weight:bold;
9+
border:thin solid #000000;
10+
padding:5px;
11+
background-color:#DDDDDD;
12+
}
13+
14+
span.decisionhover {
15+
font-weight:bold;
16+
border:thin solid #000000;
17+
padding:5px;
18+
background-color:#EEEEEE;
19+
}
20+
</style>
21+
22+
<script type="text/javascript">
23+
// Initialize the current scene to Scene 0 (Intro)
24+
var curScene = 0;
25+
26+
function replaceNodeText(id, newText) {
27+
var node = document.getElementById(id);
28+
while (node.firstChild)
29+
node.removeChild(node.firstChild);
30+
node.appendChild(document.createTextNode(newText));
31+
}
32+
33+
function changeScene(decision) {
34+
// Clear the scene message
35+
var message = "";
36+
var decision1 = "", decision2 = "";
37+
38+
switch (curScene) {
39+
case 0:
40+
curScene = 1;
41+
message = "Your journey begins at a fork in the road.";
42+
decision1 = "Take the Path";
43+
decision2 = "Take the Bridge";
44+
45+
// Show the second decision
46+
document.getElementById("decision2").style.visibility = "visible";
47+
break;
48+
case 1:
49+
if (decision == 1) {
50+
curScene = 2
51+
message = "You have arrived at a cute little house in the woods.";
52+
decision1 = "Walk around Back";
53+
decision2 = "Knock on Door";
54+
}
55+
else {
56+
curScene = 3;
57+
message = "You are standing on the bridge overlooking a peaceful stream.";
58+
decision1 = "Walk across Bridge";
59+
decision2 = "Gaze into Stream";
60+
}
61+
break;
62+
case 2:
63+
if (decision == 1) {
64+
curScene = 4
65+
message = "Peeking through the window, you see a witch inside the house.";
66+
decision1 = "Sneak by Window";
67+
decision2 = "Wave at Witch";
68+
}
69+
else {
70+
curScene = 5;
71+
message = "Sorry, a witch lives in the house and you just became part of her stew.";
72+
decision1 = "Start Over";
73+
decision2 = "";
74+
75+
// Hide the second decision
76+
document.getElementById("decision2").style.visibility = "hidden";
77+
}
78+
break;
79+
case 3:
80+
if (decision == 1) {
81+
curScene = 6
82+
message = "Sorry, a troll lives on the other side of the bridge and you just became his lunch.";
83+
decision1 = "Start Over";
84+
decision2 = "";
85+
86+
// Hide the second decision
87+
document.getElementById("decision2").style.visibility = "hidden";
88+
}
89+
else {
90+
curScene = 7;
91+
message = "Your stare is interrupted by the arrival of a huge troll.";
92+
decision1 = "Say Hello to Troll";
93+
decision2 = "Jump into Stream";
94+
}
95+
break;
96+
case 4:
97+
if (decision == 1) {
98+
curScene = 8
99+
decision1 = "?";
100+
decision2 = "?";
101+
}
102+
else {
103+
curScene = 5;
104+
message = "Sorry, you became part of the witch's stew.";
105+
decision1 = "Start Over";
106+
decision2 = "";
107+
108+
// Hide the second decision
109+
document.getElementById("decision2").style.visibility = "hidden";
110+
}
111+
break;
112+
case 5:
113+
curScene = 0;
114+
decision1 = "Start Game";
115+
decision2 = "";
116+
break;
117+
case 6:
118+
curScene = 0;
119+
decision1 = "Start Game";
120+
decision2 = "";
121+
break;
122+
case 7:
123+
if (decision == 1) {
124+
curScene = 6
125+
message = "Sorry, you became the troll's tasty lunch.";
126+
decision1 = "Start Over";
127+
decision2 = "";
128+
129+
// Hide the second decision
130+
document.getElementById("decision2").style.visibility = "hidden";
131+
}
132+
else {
133+
curScene = 9;
134+
decision1 = "?";
135+
decision2 = "?";
136+
}
137+
break;
138+
case 8:
139+
// TO BE CONTINUED
140+
break;
141+
case 9:
142+
// TO BE CONTINUED
143+
break;
144+
}
145+
146+
// Update the scene image
147+
document.getElementById("sceneimg").src = "scene" + curScene + ".png";
148+
149+
// Update the scene description text and decisions
150+
replaceNodeText("scenetext", message);
151+
replaceNodeText("decision1", decision1);
152+
replaceNodeText("decision2", decision2);
153+
154+
// Update the decision history
155+
var history = document.getElementById("history");
156+
if (curScene != 0) {
157+
// Add the latest decision to the history
158+
var decisionElem = document.createElement("p");
159+
decisionElem.appendChild(document.createTextNode("Decision " + decision + " -> Scene " + curScene + " : " + message));
160+
history.appendChild(decisionElem);
161+
}
162+
else {
163+
// Clear the decision history
164+
while (history.firstChild)
165+
history.removeChild(history.firstChild);
166+
}
167+
}
168+
</script>
169+
</head>
170+
<body>
171+
<div style="margin-top:100px; text-align:center">
172+
<img src="scene0.png" id="sceneing" alt="Stick Figure Adventure" /><br/>
173+
<div id="scenetext"></div><br/>
174+
<span id="decision1" class="decision" onclick="changeScene(1)" onmouseover="this.className = 'decisionhover'" onmouseout="this.className = 'decision'">开始游戏</span>
175+
<span id="decision2" class="decision" onclick="changeScene(2)"
176+
onmouseover="this.className = 'decisionhover'"
177+
onmouseout="this.className = 'decision'"
178+
style="visibility:hidden"></span>
179+
<div id="history" style="background-color:#EEEEEE"></div>
180+
</div>
181+
</body>
182+
</html>

‎README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,10 @@
4040
第五章：数组的使用、与或非运算符的使用、break，continue的使用。
4141

4242
第六章：函数的介绍、使用原则、回调函数、字面量函数的使用。
43+
44+
第七章：表单的使用与表单数据的验证、通过正则表达式等。
45+
46+
第八章：DOM的使用、原理、initHTML的使用等等。通过DOM来改变网页的结构等。
47+
48+
第九章：JS对象的介绍、使用、Date与string对象的相互转换。
49+

‎有趣的Demo/JS-Call-OC/JS-Call-OC.xcodeproj/project.xcworkspace/xcuserdata/huangchengdu.xcuserdatad/UserInterfaceState.xcuserstate

2.05 KB
Binary file not shown.

0 commit comments

Comments
 (0)