-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript-university-tutorial-examples.html
172 lines (150 loc) · 6.3 KB
/
javascript-university-tutorial-examples.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning JavaScript</title>
<!-- List of imported JavaScript files -->
<script type ="text/javascript" src="readinput.js"></script>
<script type ="text/javascript" src="converttocelsius.js"></script>
<script type ="text/javascript" src="dayoftheweek.js"></script>
<script type ="text/javascript" src="radioBtn.js"></script>
<script type ="text/javascript" src="removeFriends.js"></script>
<script type ="text/javascript" src="addFriends.js"></script>
<script type ="text/javascript" src="sortFriends.js"></script>
<script type ="text/javascript" src="sortNumber.js"></script>
<script type ="text/javascript" src="sortAgeASC.js"></script>
<script type ="text/javascript" src="getElements.js"></script>
<script type ="text/javascript" src="getHTMLContent.js"></script>
<script type ="text/javascript" src="changeHTMLContent.js"></script>
<script type ="text/javascript" src="changeHTMLContentWithUserInput.js"></script>
<script type ="text/javascript" src="checkPhoneNumber.js"></script>
<script type ="text/javascript" src="swapText.js"></script>
<script type ="text/javascript" src="createList.js"></script>
<script type ="text/javascript" src="createTable.js"></script>
<script type ="text/javascript" src="paragraphEventHandler.js"></script>
<!--A list of stylesheets being used for this web page -->
</head>
<body>
<br />
<h1>Learning JavaScript (DOM)</h1>
<h3>Form1 - Read input text</h3>
<form name="form1" method="GET" action= "parse.php">
<input type="text" name="textEntry1" />
<input type="button" value="Click me" onclick="readInput(textEntry1.value);" />
</form>
<br />
<h3>Form2 - Convert temperature from Fahrenheit to Celsius (Centigrade)</h3>
<form name="form2" method="GET" action= "parse.php">
<input type="text" name="textEntry2" />
<input type="button" value="Click for temp." onclick="convertToCelsius(textEntry2.value);" />
</form>
<br />
<h3>Form3 - What Day of the Week is now (enter a number)</h3>
<form name="form3" method="GET" action= "parse.php">
<input type="text" name="textEntry3" />
<input type="button" value="Click for day of the week" onclick="DayOfTheWeek(textEntry3.value);" />
</form>
<br />
<h3>Form4 - Brings up your choice</h3>
<form name="form4" method="GET" action="parse.php">
<input type="radio" name="CourseOption" value="SE">Software Engineering<br>
<input type="radio" name="CourseOption" value="CS">Computer Science<br>
<input type="radio" name="CourseOption" value="DM">Digital Media<br>
<input type="button" value="Select Course" onclick="radioBtn();" />
</form>
<br />
<h3>Form5 - Adds/removes item (friend) to/from an array</h3>
<form name="form5" method="GET" action="parse.php">
<input type="button" value="Remove friend / Add another" onclick="removeFriends();" />
</form>
<br />
<h3>Form6 - Adds user's input (friend) to an array</h3>
<form name="form6" method="GET" action="parse.php">
Enter name:<input type="text" name="name" value="">
<input type="button" value="Add friend" onclick="addFriends();" />
</form>
<br />
<h3>Form7 - Sorts items (friends) by name</h3>
<form name="form7" method="GET" action="parse.php">
<input type="button" value="Sort Friends by name" onclick="sortFriends();" />
</form>
<br />
<h3>Form8- Sorts items by their age (ascending)</h3>
<form name="form8" method="GET" action="parse.php">
<input type="button" value="Sort Friends by number" onclick="compare();" />
</form>
<br />
<h3>Form9 - Sorts friends by their age (descending)</h3>
<form name="form9" method="GET" action="parse.php">
<input type="button" value="Sort Friends by age" onclick="compare2()" />
</form>
<br />
<h3>Form10 - Get element by its ID</h3>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Fourth paragraph</p>
<form name="form10" method="GET" action="parse.php">
<input type="button" value="Display elements" onclick="getElements()" />
</form>
<br />
<h3 id="h3Tag">Form11 - Get HTML content and replace it with input</h3>
<div id="my-content">
<p>This is <em>my</em> content.</p>
</div>
<form name="form11" action="parse.php">
<input type="button" value="Get HTML content" onclick="getHTMLContent()" />
<input type="button" value="Change HTML content" onclick="changeHTMLContent()" />
<input type="text" value="Enter text here" id="userInput" />
<input type="button" value="Change HTML content with the text you entered" onclick="changeHTMLContentWithUserInput()" />
</form>
<br />
<h3>Form12 - Check if phone number entered is valid</h3>
<form name="form12" action="parse.php">
Phone: <input type="text" id="phoneNumber" value="" onkeyup="checkPhoneNumberKeyUp()">
<input type="button" value="Validate" onclick="checkPhoneNumberOnClick()" /><br/>
<span id="invalid-number"></span>
</form>
<br />
<h3>Form13 - Dynamically swapping text</h3>
<h4 id="h4Tag1">First heading text</h4>
<h4 id="h4Tag2">Second heading text</h4>
<form name="form13" action="parse.php">
<input type="button" value="Swap Text" onclick="swapText()" />
</form>
<br />
<h3>Form14 - Dynamically create an ordered list</h3>
<span id="list1"></span>
<form name="form14" action="parse.php">
<input type="text" id="text1">
<input type="button" value="Add an element to a list" onclick="createList()" />
</form>
<br />
<h3>Form15 - Dynamically create a table</h3>
<div id="tableArea"></div>
<form name="form15" action="parse.php">
Student name: <input type="text" id="studentName"><br />
Student age: <input type="text" id="studentAge"><br />
Student degree: <input type="text" id="studentDegree"><br />
<input type="button" value="Create a table" onclick="createTable()" />
</form>
<h3>Storing information: Cookies</h3>
<!-- Cookies script format -->
<script language="JavaScript" type="text/javascript">
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth() + 6);
document.cookie = "UserName=Donatas;expires=" + expireDate.toGMTString() + ";path=/ds286" + ";domain=itsuite.it.brighton.ac.uk" + ";secure=false;";
</script>
<h1> Dynamic HTML (DHTML)</h1>
<h3>Using the type Property</h3>
<p onmouseover="paragraph_eventHandler()">
Move your mouse over me.
</p>
<p onclick="paragraph_eventHandler()">
Click me!
</p>
<br />
<!-- Document validation -->
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fitsuite.it.brighton.ac.uk%2Fds286%2Fjavascript-la%2Fjavascript-university-tutorial-examples.html">HTML5 valid document</a>
</body>
</html>