-
Notifications
You must be signed in to change notification settings - Fork 0
/
the-console.html
76 lines (68 loc) · 3.09 KB
/
the-console.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Force IE to use its standard document rendering mode - I found this line at https://stackoverflow.com/questions/10975107/forcing-internet-explorer-9-to-use-standards-document-mode -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width">
<title>The Console | Jschool</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="images/js-icon.png" type="image/x-icon">
</head>
<body>
<header>
<!-- Page header containing logo/site title, with a navigation bar
nested inside of it-->
<a href="index.html"><h1 id="header-logo">Jschool</h1></a>
<!-- navigation bar in the semantically nice nav element -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html#tutorial-section">Tutorials</a></li>
<li><a href="quizzes.html">Quizzes</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<div id="tutorial-container" class="fade-in">
<section class="lead">
<h1>The Console</h1>
<p>The console is a quick and highly effective method to prototype and test JavaScript functions, snippets and
scripts. Here, we'll talk about how to use it.</p>
</section>
<section>
<h2>Accessing the Console</h2>
<p>To access the Console, click the Console tab within the Web Inspector. The console allows you to define
variables (with the var keyword), define functions, and call/use them by writing in raw lines of JavaScript
and pressing enter to have them executed - this makes it ideal for simple rapid prototyping. Errors and logs
are also displayed within the console, making it an essential debugging tool. Below is a short video
tutorial...</p>
<div class="video-container">
<video controls>
<source src="videos/console-tutorial.mp4" type="video/mp4">
Terribly sorry but it doesn't look like your web browser supports HTML5 video - please try another
browser (such as Google Chrome).
</video>
</div>
</section>
</div>
<!-- Consistent footer containing links and other information -->
<footer>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html#tutorial-section">Tutorials</a></li>
<li><a href="quizzes.html">Quizzes</a></li>
<li><a href="about.html">About</a></li>
<li><a href="credits.html">Credits</a></li>
</ul>
<p>© Dylan McKee 2015 - for Newcastle University.</p>
</footer>
<!-- linking JavaScript at the end for page load speed benefits.
Using RequireJS has meant that I only need to link one file into the actual
HTML, allowing my HTML to be semantically beautiful.
I can also load JavaScript in Async, which is ideal to speed up loading,
again thanks to RequireJS.
-->
<script data-main="js/main" type="text/javascript" src="js/lib/require.js" async></script>
</body>
</html>