forked from elmerland/js_intro
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (88 loc) · 2.51 KB
/
index.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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="jquery-2.1.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="normalize.css"/>
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/base-min.css">
<link type="text/css" rel="stylesheet" href="main.css"/>
<title></title>
</head>
<body>
<article>
<section>
<h1>JavaScript Intro</h1>
<hr/>
</section>
<section class="sample-01">
<h2>Sample Function</h2>
<pre>
<code class="sample-code">
var my_function = function() {
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
return "Result: " + sum;
};
var car = {type:"Fiat", model:500, color:"white"};
</code>
</pre>
<pre><code class="output"></code></pre>
</section>
<section class="sample-02">
<h2>Interacting With The DOM</h2>
<pre><code class="sample-code">
$('.sample-02 .output').css('border', '2px solid blue');
</code></pre>
<pre class="output"><code>
<section class="sample-02">
<pre>
<code class="output">
My code
</code>
</pre>
</section>
</code></pre>
</section>
<section class="sample-03">
<h2>Action Listeners</h2>
<pre><code class="sample-code">
$('.sample-03 .output').html(
'Click count: <span class="counter-div">0</span>');
$('.sample-03 .my-button').on('click', increase_counter);
counter = 0;
increase_counter = function() {
counter++;
$('.sample-03 .output .counter-div').html(counter);
};
</code></pre>
<button class="my-button" type="button">Click Me!</button>
<pre><code class="output"></code></pre>
</section>
<section class="sample-04">
<h2>Web Scraping</h2>
<pre>
<code class="sample-code">
warning: must open chrome with security disabled to test:
windows 8:
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
global.sample_04 = function() {
$.ajax({
url: "http://edwardmcenrue.com/",
dataType: 'text',
success: function(data) {
console.log($(data).find('h2')[0].firstChild.textContent);
$('.sample-04 .output').html("I am a: " + $(data).find('h2')[0].firstChild.textContent.toString());
}
});
};
</code>
</pre>
<pre><code class="output"></code></pre>
</section>
<script src="basic.js"></script>
</article>
</body>
</html>