-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathjavascript-with-html-lec.html
More file actions
158 lines (95 loc) · 3.43 KB
/
javascript-with-html-lec.html
File metadata and controls
158 lines (95 loc) · 3.43 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Javascript with HTML</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Javascript with HTML</h1>
<hr>
<div>
<h3>An Inline Example</h3>
<p>Script is in a script tag in the HTML file!</p>
<p>TODO: Check script todo</p>
</div>
<hr>
<div>
<h3>An External Example</h3>
<p>Javascript is added in a separate file but referenced using the src attribute</p>
<p><script src="js/external_js.js"></script></p>
<p>TODO: Create external_js.js and link to html file</p>
</div>
<hr>
<div>
<h3>Using Strict</h3>
<p>Use Strict allows JavaScript's silent errors to be shown. This makes for a more restrictive check against your code thus making the overall quality of your code better. Use strict is easy to add to any of your JavaScript code. See below for the code snippet.
</p>
<p>TODO: Check script todo</p>
</div>
<hr>
<div>
<h3>User Interaction</h3>
<ul>
<li>Alert</li>
<li>Confirm</li>
<li>Prompt</li>
</ul>
<p>Review the MDN docs for these interactions</p>
<p>TODO: Check script todo</p>
</div>
</div>
<!-- <script>-->
<!-- //This is an inline example-->
<!-- // function inlineJS(){-->
<!-- // return "Hello,World! From inline JS";-->
<!-- // }-->
<!-- // //TODO: Console.log "Hello, World! From inline" from an inline JS script-->
<!-- // console.log(inlineJS());-->
<!-- // console.log("Hello,World! From inline JS");-->
<!-- </script>-->
<!--<script src="js/js.external-lec.js"></script>-->
<!-- <script>-->
<!-- "use strict";-->
<!-- //This is a use strict example-->
<!-- var myAge = 25-->
<!-- //TODO: add "use strict"; above myAge. What do you notice in the console?-->
<!-- //NOTE** Be sure to use this at the top of your JavaScript code from now on.-->
<!-- </script>-->
<script>
"use strict";
// This is for the user interactions
//TODO: Comment out previous scripts
/* *******************
* ALERTS
* ********************/
//TODO TOGETHER: Write an alert ---> alert("Message goes here.");
// alert("Welcome back to Codeup!");
// alert("Get ready to jump in to JavaScript!");
//TODO: Write an alert with an alert message
/* *******************
* Confirm
* ********************/
//TODO TOGETHER: Write a confirm interaction and console.log the result
// the following line will show the OK/CANCEL confirm dialog
var confirmed = confirm("Are you sure you want to exit?");
console.log(confirmed);
// ok == true
// cancel == false
var confirmPage = confirm("Are you sure you want to leave this page?");
console.log(confirmPage);
// TODO: Select the OK option. View the result. Select the confirm option. View the result.
/* *******************
* Prompts
* ********************/
var userInput = prompt("Please enter your name.");
console.log(userInput);
// TODO TOGETHER: Write a prompt interaction. Console.log the result
// TODO: Write an additional prompt. Console.log the result
</script>
</body>
</html>