-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
765 lines (752 loc) · 34.8 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
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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta name='description' content=''>
<meta name='author' content=''>
<link rel='shortcut icon' href=''>
<title>Start Guide</title>
<link href='tomorrow.css' rel='stylesheet' type='text/css'>
<script src='highlight.pack.js'></script>
<script>
window.onload = function() {
var codeElements = document.getElementsByTagName('code');
for (var i = 0; i < codeElements.length; i++) {
var el = codeElements[i];
if (el.hasAttribute('data-code')) {
el.appendChild(document.createTextNode(el.getAttribute('data-code').trim()));
}
hljs.highlightBlock(el);
}
};
</script>
<style>
@import url(http://fonts.googleapis.com/css?family=PT+Sans|PT+Serif|Inconsolata);
body {
max-width: 640px;
padding: 65px 50px;
margin: 0 auto;
font-family: 'PT Serif';
line-height: 1.6em;
color: #444;
}
header#mainheader{
margin-top:2em;
font-size:2em;
}
header#mainheader a{
float: none;
vertical-align: baseline;
text-decoration:none;
}
header {
color: #222;
font-family: 'PT Sans';
font-size: 1.2em;
}
header a{
float: right;
vertical-align: top;
}
h1{font-size:1.5em;margin-top:3em;}
h2{font-size:1.2em;}
code {
color: black;
font-family: 'Inconsolata';
}
td {
border: 1px solid black;
padding: 5px;
}
pre {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
</style>
</head>
<body>
<a id="top" style="position:absolute;top:0;"></a>
<header id="mainheader">
<a href="http://lexhack.org" style="font-weight:bold;color:black;">Lex<span style="color:#ffc747;">Hack</span></a> Start Guide
</header>
<article>
<section id="intro">
<header>
<h1>Introduction</h1>
</header>
<p> Welcome to <a href="http://lexhack.org">LexHack</a>! To get started, first we’ll have to do a little bit of computer set-up. If you have problems doing any of the below, ask a LexHack mentor for assistance. </p>
<p>
<h1>Table of Contents</h1>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#javascript">JavaScript</a></li>
<li><a href="#jquery">jQuery</a> </li>
<li><a href="#firebase">Firebase</a></li>
</ul>
</section>
<section id="html">
<header>
<a href="#top">top</a>
<h1>Part 1: HTML</h1>
</header>
<p>All web pages are written in <em>HTML</em>, which stands for Hypertext Markup Language. A <em>markup language</em> is a system for annotating text that indicates to a computer how the text should be processed. Specifically, HTML tells a web browser how different content on a web page should be displayed.</p>
<p>HTML consists of <em>tags</em>, which are essentially labels for content. Tags are made up of keywords surrounded by angle brackets <code><></code>. For example, <code><h1></code> is a tag which indicates when text is a heading. Most tags, such as the <code><h1></code> tag, come in pairs that encapsulate the relevant content. You can think of HTML as similar to a set of parenthesis. After this opening tag, fill in the content “inside” the tag, and close it with a "closing tag" (kind of like how you "close" a set of parenthesis), which is same except with a forward slash before the keyword: <code></h1></code>. A pair of such tags and the content it describes is together called an HTML element. Thus:
</p>
<code><h1>This is a heading.</h1></code>
<p>This is an example of a <code>h1</code> element. Try typing this into your text editor and saving it as a .html file (e.g. index.html). Then open the file in your browser. You should see something like this:</p>
<h1>This is a heading.</h1>
<p>Great, you've made your first HTML page! Now, every HTML page has a similar basic structure, looking something like this:</p>
<pre><code class='code-block' data-code='
<html>
<head>
<title>LexHack!</title>
</head>
<body>
<h1>LexHack!</h1>
<p>This is a very empty LexHack website.</p>
</body>
</html>
'></code></pre>
<p>Notice that the entire thing is surrounded by <code><html></code> tags. Makes sense, right? It's HTML, after all. Inside, there are two main tags.</p>
<p>The first, <code><head></code>, is all about the metadata. Stuff like search engine index information, character set, style and script importation, author, and title go here. <code><title></code> is pretty straightforward - it's what shows up in the title of the browser tab or window.</p>
<p>The second, <code><body></code>, is all about content. It's what shows up in the main display area of the browser. Most of the rest of this HTML tutorial is how to structure this content with more tags, such as the <code><h1></code> header tag you saw earlier.</p>
<p>Here are some basic tags and what they do - try them out now! Just copy the example into the <code><body></code> of the HTML document, and see what shows up. Modify as you wish.</p>
<div dir="ltr">
<table>
<colgroup>
<col width="207"/>
<col width="228"/>
<col width="196"/>
</colgroup>
<tbody>
<tr>
<td>
<p dir="ltr">
Tag
</p>
</td>
<td>
<p dir="ltr">
Example
</p>
</td>
<td>
<p dir="ltr">
Result
</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">
<strong> Bolds the text inside.
</p>
</td>
<td>
<p dir="ltr">
<strong>Word</strong>: defn
</p>
</td>
<td>
<p dir="ltr">
<strong>word</strong>: defn
</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">
<em> Italicizes the text inside.
</p>
</td>
<td>
<p dir="ltr">
This is <em>really</em> important.
</p>
</td>
<td>
<p dir="ltr">
This is <em>really</em> important.
</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">
<p> Forms a paragraph (doesn’t mean it’s indented!)
</p>
</td>
<td>
<p dir="ltr">
<p>LexHack is a programming competition.</p>
</p>
<p dir="ltr">
<p>You should come!</p>
</p>
</td>
<td>
<p dir="ltr">
LexHack is a programming competition.
</p>
<p dir="ltr">
You should come!
</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> Header tags: used for page titles and such, sized according to
number (<h1> is biggest)
</p>
</td>
<td>
<p dir="ltr">
<h1>Welcome!</h1>
</p>
<p dir="ltr">
<h2>Subtitle</h2>
</p>
<p dir="ltr">
<h3>SubSubTitle</h3>
</p>
<p dir="ltr">
text
</p>
</td>
<td>
<p dir="ltr">
<header>
<h1>Welcome!</h1>
</header>
</p>
<p dir="ltr">
<h2>Subtitle</h2>
</p>
<p dir="ltr">
<h3>SubSubTitle<h3>
</p>
<p dir="ltr">
text
</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">
<br> Line break: puts a line break between content (does not require a closing tag!)
</p>
</td>
<td>
<p dir="ltr">
This is some text!
</p>
<p dir="ltr">
<br><br>
</p>
<p dir="ltr">
This text is on a different line!
</p>
</td>
<td>
<p dir="ltr">
This is some text!
</p>
<br/>
<p dir="ltr">
This text is on a different line!
</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">
<!-- --> Comment: does absolutely nothing. You can use it to insert annotations explaining your code, or to temporarily remove
code you don’t want to delete but which you don’t want to show.
</p>
</td>
<td>
<p dir="ltr">
<!-- This is the top of the code. -->
</p>
<p dir="ltr">
<!-- <p> ahhhhhhhhhhh this needs to be revised</p> -->
</p>
</td>
<td>
<br/>
</td>
</tr>
<tr>
<td>
<p dir="ltr">
<img src=”imageurl"> Image: inserts an image, specified by the URL in quotes. SRC is called an “attribute”; attributes can be
used for many things. See below. Also, note how the img tag does not have a closing tag.
</p>
</td>
<td>
<p dir="ltr">
<img src="http://goo.gl/hE6opY">
</p>
</td>
<td>
<p dir="ltr">
<img
src="https://lh5.googleusercontent.com/g5Kfhqj4rPGGA8Mi2Tu2mCwKm98Rgs9Hw-Rs6HhDXT_BXMKu_e_k0r9gSlJ3Wfr4lwgL8Tnxh_2KjDULdfinxHJn3lYWE1ekHSFJgtp7ymtoQ04LpjEoBm8DaGiD6S42bQ"
width="155px;"
height="155px;"
alt="http://images.sodahead.com/polls/000932077/moo_xlarge.jpeg"
/>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<p>
Did it work? Ask a LexHack mentor now if you weren’t able to see what’s described in the table.
For further reference, check out the example application provided with the start guide, called Chirp (<a href="https://github.com/lexhack/chirp">download here</a>). Open up index.html in Sublime Text to view the code, and open it up in your browser to run the application. You can “Chirp” messages to our database that will be visible to everyone else at LexHack! Now take a look at the HTML again. You should be able to find some tags you recognize, and most likely a couple new ones. Don’t worry about those too much, but try playing around with the code a little bit.
</p>
<p>
<strong>Suggested Exercise:</strong>
Try adding some “how-to” text of your choice right below the heading.
</p>
</section>
<section id="css">
<header>
<a href="#top">top</a>
<h1>Part 2: CSS</h1>
</header>
<p>You may have noticed that Chirp, our example application, and generally most websites, look much better than the plain one you've made so far.</p>
<p>Although a number HTML elements already have some basic formatting, because HTML is a <em>markup language</em>, like we mentioned earlier, its primary use is for labeling different types of webpage content, such as identifying a paragraph or a heading.</p>
<p>Cascading Style Sheets, or CSS, is the language used to apply formatting and appearance to a webpage. To include CSS in an HTML file, we include the CSS code between <code><style></code> tags, which should generally be included inside of the <code><head></code> element. Let's write that into our file:</p>
<pre><code class='code-block' data-code='
<html>
<head>
<title>LexHack!</title>
<style>
</style>
</head>
<body>
<h1>LexHack!</h1>
<p>This is a very empty LexHack website.</p>
</body>
</html>
'></code></pre>
<strong>CSS Syntax</strong>
<p>Despite being closely tied to HTML, CSS syntax looks quite different from that of HTML. CSS is made up primarily of three components: selectors, properties, and values. CSS properties are set to specific values through what is called a <em>declaration</em>, which is a property and value pair. Selectors specify which HTML element(s) the declarations are applied to. Here is a look of the format of CSS (leaving out the HTML):</p>
<pre><code class='code-block' data-code='
selector {
property: value;
}
'></code></pre>
<p>Keep in mind that this isn't valid CSS, just an example of what CSS looks like. CSS declarations for the HTML elements specified are contained within the brackets: <code>{ }</code>. Inside the brackets, we have <code>property: value;</code>, which sets what is called a <em>property</em>, which is a keyword like <code>color</code>, to a value, like <code>red</code>. Finally, we have the semicolon at the end of the declaration in order to separate each declaration. Here's what some actual CSS might look like:</p>
<pre><code class='code-block' data-code='
h1 {
color: red;
}
'></code></pre>
<p>This CSS snippet would take all the <code><h1></code> elements, and apply <code>color: red;</code> to each one. <code>color</code> is the text color, and <code>red</code> is the, you guessed it, the color red, so this snippet would turn all of the <code><h1></code> elements and turn their text to the color red. Putting this into the <code><style></code> tags, we would get:</p>
<div>
<h1 style='color:red;'>LexHack!</h1>
<p>This is a very empty LexHack website.</p>
</div>
<a href='http://htmldog.com/reference/cssproperties/'>Here</a> is a link to an extended list of CSS properties and their different values. We recommend you take a look at several important properties like: color, font-size, height, width, and background-color.
<strong>HTML Classes</strong>
<p>CSS selectors can also select more than just elements. When you don't want to apply a style to all the elements of your site, you use an HTML attribute called <em>classes</em> and <em>ids</em>, which can be named anything. Here is an example of a <code><p></code> element with a "important" class: </p>
<pre><code class='code-block' data-code='
<p class="important">This paragraph has the class "important" associated with it! Neato.</p>
'></code></pre>
<p>As you can see, in order to associate the "important" class, inside the <code><p></code> tag, there's <code>class="important"</code>. Always remember to put the name of the class in the quotation marks! To add additional classes, just separate the class names by a space (such as <code>class="classone classtwo"</code>, which would set the HTML element to the classes "classone" and "classtwo"). </p>
<p>With classes, we can be more flexible with our CSS, and use selectors to specify more than just a type of HTML element. With a class selector, we can specify styling to all elements associated with a specific class. To write a class selector, we prefix a normal selector with a period. Here's how looks with the "important" class as an example:</p>
<pre><code class='code-block' data-code='
.important {
color: red;
}
'></code></pre>
<p>This code snippet would make all elements with the "important" class have red text.</p>
<strong>Fonts</strong>
<p>Typography is an integral part of web design, and fonts being an important choice for any website. Fonts are a complicated business in CSS. Usually you only have access to the local computer's fonts, which generally mean that you have to stick to common fonts like Helvetica or Times, in order for it to render consistently across browser. However, thanks to <a href=' http://www.google.com/fonts/'>Google Fonts</a> (hit up that link), fonts are made trivial. Select a few fonts, and follow the steps provided by Google. Here's a full example:</p>
<pre><code class='code-block' data-code="
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<style>
p{
font-family: 'Raleway', sans-serif;
}
</style>
</head>
<body>
<p>This text is in the font Raleway!</p>
</body>
</html>
">
</code></pre>
<p>What this is doing is getting the "Raleway" font using Google Fonts. Then, the <a href='https://developer.mozilla.org/en-US/docs/Web/CSS/font-family'>font-family</a> property in the CSS is applying the font.
</section>
<section id="javascript">
<header>
<a href="#top">top</a>
<h1>Part 3: Javascript</h1>
</header>
<p>
Javascript is a programming language that is designed to make websites interactive. Right now, we've shown you the technologies necessary to build a website that displays static (not interactive) content. While cool, this doesn't allow you to build a useful application. Javascript allows you to dynamically change content, interact with data from external sources, and take input from the user.
</p>
<p>
Before we can talk about using Javascript in your own site, we need to go over some basic programming concepts.
</p>
<p>
<strong>Variables</strong>
Variables in programming are similar to variables in other branches of science/math. They represent some value that can change over time, and this value can be of a variety of different data types. For example, if you were programming a video game, you might have a numeric variable that stores your health level. When you get hit by an enemy, the program might decrease that variable by 1. In Javascript, to define a variable you use the keyword var, which initializes a variable, followed by a space and the name of the variable. Then you use an = and a value to set the initial value of the variable. For example, this sets the value of "foo" to 2.
</p>
<code>
var foo = 2;
</code>
<p>
To change the value of a variable after creating it, you use the equals sign without using the var keyword. For example:
</p>
<pre><code class='code-block' data-code='
var bar = 5;
console.log(bar); // outputs 5
bar = 16;
console.log(bar); //outputs 16, because value of bar has changed
'></code></pre>
<p>
(A quick comment on comments - any code preceded by // is ignored by the Javascript interpreter, just like <!-- --> in HTML - we'll be using this to annotate our examples, and you can do the same in your own code).
</p>
<p>
Variables don't have to be numbers, either. The other type of variable you might commonly use is called a "string". Strings store text, and work the same way except you define them with quotations surrounding the text. For example,
</p>
<code>
var greeting = "hello world!"; //sets value of greeting to "hello world"
</code>
<p>
<strong> Mathematical Operations</strong> <br>
In Javascript, you can use basic mathematical operations on variables/numbers. This is done in a very intuitive way:
<pre><code class='code-block' data-code='
var a = 2; // a is set to 2
var b = a + 3; // b is set to 5
'></code></pre>
The above code block will set b to 5, because it evaluates a + 3, which is equal to 5 for a = 2.
</p>
<p>
You can do this for all four of the basic operators: +, -, *, and /. There is one other operator that is seen fairly commonly, the modulo operator, represented by %. a % b is equal to the remainder of dividing a by b. For example:
<pre><code class='code-block' data-code='
var a = 4;
var b = 3;
var c = a % b;
'></code></pre>
This block sets c to 1, since the remainder when dividing 4 by 3 is 1.
</p>
<p>
<strong>Control Structures</strong>
<p>
An important part of programming is the logic that allows your program to interpret and change based on different input. The following are some of the most important control structures in basic programming:
</p>
<em>If Statement</em>: Very intuitive, executes the code in curly braces if the statement in parentheses is true. <br>
<em>Example</em>:
<pre><code class='code-block' data-code='
if(a == 2) {
console.log("a equals 2");
}
else {
console.log("a does not equal 2");
}
'></code></pre>
</p>
** Important note - a single equals sign is reserved for assigning variables. To test for equality like in the example above, use 2 equals signs (==).
<p>
Finally, the <em>else-if</em> clause runs a code block if the previous statements are false, but the statement in the if-else clause is true. For example:
<pre><code class='code-block' data-code='
if(a > 0) {
console.log("a is positive");
}
else if(a == 0) {
console.log("a equals 0");
}
else {
console.log("a is negative");
}'></code></pre>
You can see here how the cases are checked one at a time, with the code under the else statement used kind of like a "default".
<br>
<em>While loops</em>:
While loops are kind of like if statements, except they run continuously while the statement is true, instead of running once. <br>
<em>Example</em>:
<pre><code class='code-block' data-code='
var a = 1;
while(a < 11) {
console.log(a);
a ++;
}
'></code></pre>
<p>
Since the above while loop runs until the statement is not true (a >= 11), it will print numbers from 1 up to 10. Read it like "while a is less than 11, print out a and increment a."
</p>
</p>
<p>
<strong>Functions</strong> <br>
Functions are blocks of code that can be executed multiple times in different places. The syntax of a function looks like this:
<pre><code class='code-block' data-code='
function printGreeting() {
console.log("hello world!");
}
'></code></pre>
This defines a function called "printGreeting." When this function is executed, the program outputs "hello world!". To execute the function, do this:
<code> printGreeting(); </code>
Functions can also take in what are called parameters. Parameters are values that act like a variables "local" to the function. For example
<pre><code class='code-block' data-code='
function addTwo(a) {
console.log(a + 2);
}
'></code></pre>
This function outputs the value "passed into" the function added to the number 2. addTwo(3) will output 5, while addTwo(7) will output 9.
<br>
Functions can also return values.
<pre><code class='code-block' data-code='
function add(a, b){
return a + b;
}
'></code></pre>
This, instead of printing it out like with console.log(), returns the expression, replacing the original function call. Thus: <br>
<code>var result = add(3, 5);</code> <br>
runs and reduces to <br>
<code>var result = 8;</code> <br>
which will make the variable result have a value of 8.
</section>
<section id="jquery">
<h1>Part 3.5: jQuery</h1>
<p>
Now that you’ve learned how to create, format, and style content on a webpage, and been exposed to some basic programming concepts, it’s time to practically apply these skills to a web application. Manipulating HTML ("the DOM") can be done entirely in JavaScript, but to make life easier we’re going to be using JQuery, a library of pre-written JavaScript code. jQuery’s slogan is "write less, do more," and might be helpful for you in trying to prototype your application in as little time as possible. You’re technically still writing in JavaScript, though, so all of the above is applicable.
</p>
<strong>jQuery basics:</strong>
<em>Selecting HTML</em> -You can select a set of HTML elements just like you would in CSS:
<pre><code class='code-block' data-code='
$("#messages") // references element with id "messages"
$(".buttons") // references all elements with class "buttons"
$("#main p") // selects any paragraphs in #main
$("#main>section") // selects any sections that are direct descendants of #main
'></code></pre>
<p>
Modifying selected HTML - Once you have selected HTML, you need to be able to manipulate it. Manipulations of HTML include changing its contents, moving things around, adding/removing elements, and changing its CSS. In jQuery, these manipulations are already-included functions that are appended to the HTML "selector" with a period. A basic example might look like this:
</p>
<p>
Suppose you have some HTML like below:
<pre><code class='code-block' data-code='
<p id="dinosaur-paragraph">
Nothing here right now!
</p>
'></code></pre>
As you should know at this point, this will display a paragraph that says "Nothing here right now!", with the id "dinosaur-paragraph". It's also possible there might be some CSS applied to that paragraph, but that doesn't matter right now.
Now, the following jQuery will change the text of the paragraph:
<code>$("#dinosaur-paragraph").html("Dinos are cool!");</code>
Here's how this statement works bit-by-bit:
<code>$("#dinosaur-paragraph")</code>
Selects the HTML element with the id "dinosaur-paragraph"
<code>.html("Dinos are cool!");</code>
Changes the HTML between the tags of the element specified in the previous part (in this case "dinosaur-paragraph") to the text specified between the parentheses. In this case, the text is "Dinos are cool!". Remember - quotes denote a string in JavaScript.
</p>
<p>
Here's a table of some basic jQuery manipulations:
<!-- this was built with some online tool, i'm lazy -->
<div dir="ltr">
<table>
<colgroup>
<col width="256"/>
<col width="368"/>
</colgroup>
<tbody>
<tr>
<td>
<p dir="ltr">
Function
</p>
</td>
<td>
<p dir="ltr">
Description
</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">
<code>("#example").html("text here")</code>
</p>
</td>
<td>
<p dir="ltr">
Changes content of tag "example" to "text here".
</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">
<code>("#example").append("text to append")</code>
</p>
</td>
<td>
<p dir="ltr">
Appends "text to append" to the content of tag "example".
</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">
<code>("#example").prepend("text to prepend")</code>
</p>
</td>
<td>
<p dir="ltr">
Prepends "text to prepend" to the content of tag "example".
</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">
<code>("#example").toggle()</code>
</p>
</td>
<td>
<p dir="ltr">
Makes element "example" visible if it's currently invisible, or vice-versa.
</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">
<code>("#example").css("property", "value")</code>
</p>
</td>
<td>
<p dir="ltr">
Modifies the CSS that applies to id "example", setting the value of "property" to "value".
</p>
</td>
</tr>
</tbody>
</table>
</div>
<p>
See more DOM manipulation functions at <a href="http://api.jquery.com/category/manipulation/">http://api.jquery.com/category/manipulation/</a>.
</p>
<p>
<em>Getting input with jQuery</em> - So far, we can change how we display things by using jQuery functions. The next step is to get input from the user. For the purposes of the example, we're going to be looking at two types of input - text and button.
</p>
<p>
To get the value of a text box, simply use a selector that selects the text box with the function .val(). <br>
Example:
</p>
<code>var myInput = $("#input").val();</code>
<p>
The above statement makes myInput represent the value of the text box with the id "input" at the time that function was used. Then, you can use the variable as a value for other functions.<br>
Example:
</p>
<code>$("#what-did-i-input").html(myInput);</code>
<p>
This will set the text of the element with id "what-did-i-input" to the text you inputted. Remember that myInput is a variable - so don’t put quotes around it!Keep in mind, you don't use quotes with your variable name (otherwise it will literally display as the word "myInput").
</p>
<p>
Next up is detecting when a user clicks on a button, or some other element on the page. The way we do this is by setting what is called a "callback" to the click event. A callback is a function that gets called when some event occurs. Here's an example:
</p>
<code><button id="click-me">Click me!</button></code>
<pre><code class='code-block' data-code='
$("#click-me").click(function() {
$("#click-me").html("You just clicked me!");
});
'></code></pre>
<p> Basically, the way that this works is you're calling a function called "click" to a selector, then putting another function in between the parentheses. It's called an "anonymous function," which is a temporary function that is passed to the Click event. When the Click event is triggered, that anonymous function is run.
You can also define a function outside of it: </p>
<pre><code class='code-block' data-code='
function clickmeclicked(){
$("#click-me").html("You just clicked me!");
}
$("#click-me").click(clickmeclicked);"
'></code></pre>
<p>
For more info, the following is an excellent reference on using jQuery: <a href="http://jqfundamentals.com/chapter/jquery-basics">http://jqfundamentals.com/chapter/jquery-basics</a>.
</p>
<p>
Finally, coming back to our example app Chirp, you can look in main.js to see the Javascript that governs the application. Everything is wrapped in the $(document).ready function described in the jQuery link, and it sets a click listener on the selected submit button $("#submit"). However, the majority of this code you won't understand yet - it requires knowledge of Firebase.
</p>
</section>
<section id="firebase">
<header>
<a href="#top">top</a>
<h1>Part 4: Firebase</h1>
</header>
<p>
The final part of your application is called the "backend" or "server-side" component. This is the part of an application that runs on a server, and deals with things like serving your webpage and interacting with your database. The backend can be enormously complex - like search indexing, file management, email sending and receiving, database (especially user data) management, etc. - but for simplicity, you're going to use a service called Firebase, which handles your backend for you. Using Firebase, you can access data stored on the cloud using Javascript on the "client side" of the application.
</p>
<p>
First, sign up for Firebase (<a href="https://www.firebase.com/signup/">https://www.firebase.com/signup/</a>). You should see a little box titled "My First App", with a URL kind of like https://flickering-inferno-1483.firebaseio.com/. This URL is your Firebase's URL, and is how you access your data in the code. In Javascript, here is how you "initialize" your Firebase: <br>
<code>var fb = new Firebase('https://your-firebase-0000.firebaseio.com');</code> <br>
This lets you use the variable <code>fb</code> to access the Firebase at that URL.
</p>
<p>
In Firebase, you can think of your data stored as sort of an online file system. Here's a line that gets run at the very beginning of Chirp: <br>
<code>var postsRef = fb.child('posts');</code> <br>
This sets the variable <code>postsRef</code> to a reference to a "child" of the Firebase called "posts". This essentially narrows down the scope of what you're looking at to data under "posts". You can think of posts as a folder on your online filesystem, and everything you do with <code>postsRef</code> will take place in that folder.
</p>
<p>
Next, you can see that in Chirp we run a function on postsRef when the submit button is clicked. This function adds data to the filesystem, and looks like this: <br>
<pre><code class='code-block' data-code='
postsRef.push({
content: $("#message").val(),
date: new Date().toLocaleDateString("en-US")
});
'></code></pre>
The function is called "push", and you can literally think of it as "pushing" more data into the folder. The data is written as a Javascript Object Literal, which for all intents and purposes is a key-value system. "Content" and "date" are keys, and each one corresponds to the value after it. In this case, the current value of the message box is stored as "content", while the current date is stored as "date" (don't worry about the fancy code to get the date for now).
</p>
<p>
To load data, we use a callback like in jQuery. This callback is called for every single piece of data already stored, as well as data that is entered while the site is loaded (allowing for real-time data transfer - how cool is that!) The code looks like this:
<pre><code class='code-block' data-code='
postsRef.on("child_added", function(data) {
var postData = data.val();
var content = postData.content;
var date = postData.date;
$("#messages").prepend("<div>"+date+"</div>");
$("#messages").prepend("<div>"+content+"</div>");
});
'></code></pre>
The anonymous function passed into this callback has a parameter called data which contains the data added. To access the data, you first call <code>data.val()</code> and store that in another variable, in this case <code>postData</code>. Next, you can load the stored data using the same keys as the ones you "pushed" with. For example, <code>var content = postData.content;</code> loads the content of the post you're reading into the variable content. Finally, using jQuery we can edit messages to display the date and content.
</p>
<p>
And that's it for a basic posting app using Firebase! There's a lot more you can do with it, and you can read all about it here - <a href="https://www.firebase.com/docs/web/guide/">https://www.firebase.com/docs/web/guide/</a>.
</p>
<p>
Good luck, happy hacking, and don't be afraid to seek out a mentor if you need help!
</p>
</section>
</article>
<!-- <article>
<section id="wolfram">
<header>
<a href="#top">top</a>
<h1>Appendix: Wolfram</h1>
</header>
<p>Wolfram has generously provided complete access to their Programming Cloud for 30 days! Access it at <a href="http://www.wolframcloud.com/access?code=LEXHACK2015">http://www.wolframcloud.com/access?code=LEXHACK2015</a>; you have to register an account with Wolfram.</p>
<p>This account will give access to three immensely powerful tools:</p>
<h2>Wolfram Language</h2>
<p>Allows you to program using built-in functions so that anything you create can instantly be deployed through API, web, mobile, and embedded code. You can use it for visualization and graphics, data manipulation and analysis, and all sorts of computation.</p>
<p>Check out examples here: <a href="https://www.wolfram.com/language/gallery/">https://www.wolfram.com/language/gallery/</a></p>
<h2>Wolfram Programming Cloud</h2>
<p>Allows you to write, test, and deploy your code directly in the cloud through any web browser - instantly.</p>
<p><a href="https://www.wolfram.com/programming-cloud/">https://www.wolfram.com/programming-cloud/</a></p>
<h2>Wolfram|Alpha API</h2>
<p>Computes complex natural-language-processing results delivered in a variety of formats.</p>
<p>Basics: <a href="http://products.wolframalpha.com/api/documentation.html#2">http://products.wolframalpha.com/api/documentation.html#2</a></p>
<p>Example: <a href="http://products.wolframalpha.com/api/documentation.html#4">http://products.wolframalpha.com/api/documentation.html#4</a></p>
</section>
</article> -->
<footer style="color:#ddd;text-align:center;margin-top:4em;">made with <3 for <a style="color:#ddd;" href="http://lexhack.org">lexhack</a></footer>
</body>
</html>