Skip to content

Commit 5b5faf6

Browse files
theClarkSelltheClarkSell
committed
added the dom query selector lab code
1 parent 889a0c2 commit 5b5faf6

12 files changed

Lines changed: 10612 additions & 65 deletions

File tree

‎5-JavaScript/Labs/DOM Query Selectors/begin/Web.config‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<?xml version="1.0"?>
2+
3+
<configuration>
4+
5+
<system.web>
6+
<compilation debug="false" targetFramework="4.0" />
7+
</system.web>
8+
9+
<system.webServer>
10+
<httpProtocol>
11+
<customHeaders>
12+
<add name="Access-Control-Allow-Origin" value="*" />
13+
</customHeaders>
14+
</httpProtocol>
15+
16+
<staticContent>
17+
<mimeMap fileExtension=".md" mimeType="text/html"/>
18+
</staticContent>
19+
</system.webServer>
20+
21+
</configuration>

‎5-JavaScript/Labs/DOM Query Selectors/begin/default.htm‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
7+
<title>JavaScript Lab | 2012 CodeMash's HTML5 Precompiler</title>
8+
<meta name="author" content="Clark Sell, Brandon Satrom" />
9+
10+
<link href="./style/style.css" rel="stylesheet" type="text/css" />
11+
12+
</head>
13+
14+
<body>
15+
16+
<article>
17+
<h1>Query Selectors</h1>
18+
<hr/>
19+
</article>
20+
21+
<article>
22+
23+
<input id="inputElement" type="file"/> </br>
24+
<button id="buttonElement">one awesome button</button> </br>
25+
<div id="messages"></div> </br>
26+
27+
<ol id="list">
28+
<li id="li_one" draggable="true">
29+
<a id="a_one" data-something="true" href="#">list one</a></li>
30+
31+
<li id="li_two" draggable="true">
32+
<a id="a_two" data-something="false" href="#">list two</a></li>
33+
34+
<li id="li_three" draggable="true">
35+
<a id="a_three" data-something="true" href="#">list three</a></li>
36+
</ol>
37+
38+
</article>
39+
40+
<script src="./scripts/default.js" type="text/javascript"></script>
41+
42+
</body>
43+
</html>

‎5-JavaScript/Labs/DOM Query Selectors/begin/readme.htm‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Instructions</title>
7+
8+
<script src="./scripts/jquery-1.6.2.js" type="text/javascript"></script>
9+
<script src="./scripts/Markdown.Converter.js" type="text/javascript"></script>
10+
11+
</head>
12+
13+
<body>
14+
<input id="markdownFile" type="file" /> </br>
15+
16+
<div id="markdown"></div>
17+
18+
<script>
19+
20+
// It doesn't look like you can grab local files outside of a webserver.. suck it security!
21+
22+
var markdownFile = document.getElementById("markdownFile");
23+
var markdownResult = document.getElementById("markdown");
24+
25+
var origin = self.location.origin;
26+
27+
if ('file://' !== origin ) {
28+
markdownFile.style.display = 'none';
29+
} else {
30+
markdownResult.textContent = '';
31+
};
32+
33+
document.getElementById('markdownFile').addEventListener('change', readFile, false);
34+
35+
function readFile (e) {
36+
37+
var reader = new FileReader();
38+
var f = e.target.files[0];
39+
40+
reader.onload = ( function (f) {
41+
return function(evt) {
42+
console.log('in onload for fileReader');
43+
44+
displayMarkdown(evt.target.result);
45+
};
46+
})(f);
47+
48+
49+
reader.onerror = function (evt) {
50+
markdownResult.textContent = 'BIG OLE ERROR... Error Code: ' + reader.error.code + ' <- no clue what that really means';
51+
};
52+
53+
reader.readAsText(f);
54+
55+
};
56+
57+
var displayMarkdown = function (toBeConverted) {
58+
59+
var convertedMarkdown = converter.makeHtml(toBeConverted);
60+
61+
$('#markdown').text('');
62+
$('#markdown').append(convertedMarkdown);
63+
}
64+
65+
66+
if ( 'http://' === origin ) {
67+
68+
( function () {
69+
70+
var xhr;
71+
72+
if (window.XMLHttpRequest) {
73+
xhr = new XMLHttpRequest();
74+
75+
} else if (window.ActiveXObject) {
76+
xhr = new ActiveXObject("Microsoft.XMLHTTP");
77+
78+
}
79+
80+
var sUrl = "http://"
81+
+ self.location.hostname
82+
+ ":"
83+
+ self.location.port
84+
+ "/readme.md";
85+
86+
87+
xhr.open('GET', sUrl);
88+
89+
xhr.onload = function (e) {
90+
displayMarkdown(this.resonseText)
91+
};
92+
93+
xhr.onerror = function (e) {
94+
markdownResult.textContent = 'umm opps:' + e;
95+
};
96+
97+
xhr.send();
98+
99+
})();
100+
};
101+
102+
</script>
103+
104+
</body>
105+
</html>

‎5-JavaScript/Labs/DOM Query Selectors/begin/readme.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# 2012 CodeMash HTML5 Precompiler
2+
Contributors: Brandon Satrom, Clark Sell
3+
4+
Tags: HTML5, JavaScript, CSS3
5+
6+
This contains all of the source and presentations used for the 2012 CodeMash HTML5 precompiler.
7+
8+
## Prerequisites
9+
10+
* Network Access
11+
*
12+
13+
## What will you learn?
14+
15+
In this lab you will learn the basics for using XHR L2.
16+
17+
* How to create an XHR Object
18+
* How to open and send a request
19+
* How to handle the XHR events
20+
* How to post data using the XHR object
21+
22+
## The Lab
23+
24+
### Step #1
25+
26+
In this section we are going to learn how to create the basic XHR object and retrieve text from some endpoint.
27+
28+
### Step #2
29+
30+
TBD
31+
32+
### Step #3
33+
34+
At time time of writing this, the image would only be correctly displayed in firefox.
35+
TBD
36+
37+
### Step #4
38+
39+
TBD
40+
41+
## Resources
42+
43+
* W3C XHR Spec: http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html
44+
* CORS Spec: http://dvcs.w3.org/hg/cors/raw-file/tip/Overview.html
45+
* New Tricks in XMLHTtpRequest2: http://www.html5rocks.com/en/tutorials/file/xhr2/
46+
* MDN Using FormData: https://developer.mozilla.org/en/DOM/XMLHttpRequest/Using_XMLHttpRequest#Using_FormData_objects
47+
* MDN Using URLs to display images: https://developer.mozilla.org/en/Using_files_from_web_applications#Example.3a_Using_object_URLs_to_display_images

0 commit comments

Comments
 (0)