1. HTML

2. CSS

3. JavaScript

4. jQuery

5. PHP (or server side code)

6. JavaScript

8. JavaScript What is JavaScript? A scripting language
Executed by the browser
JavaScript and Java are not the same thing
Lines of executable code
Can be small snippets to large amounts
Can be embedded directly into your webpage or imported from an outside file.

9. JavaScript
Code that runs in the web browser (on the web page). Does not run on the server.
Enables you to interact with the web page without having to submit to the sever.
Popup boxes.
Display total of numeric input on screen while you are typing.
Custom verification.

10. Script Tags To enter JavaScript in a webpage:
Use an HTML <script> tag within the page
Use an external JavaScript file (library)
<script>
alert("Hello world!");
</script>
<script src="my_file.js"> </script>

11. comments
Comments allow you to document your code (add notes to the code). Ignored by the browser.
Line comments start with "//"
Everything from the "//" to the end of the line is ignored by the browser
Multi-line comments "/*" and "*/"
x = y + z; // x is the sum of y and z
/* The respondent’s income is calculated
with the following formula: */
x = y + z;

12. JavaScript - Variables
Variables - "Containers" that store data
var total = 0; // this declares one variable
total = 3 + 4; // this assigns a value
//The variable total can now be used.
var GrandTotal = total ;
// Words (non-numeric) must be surrounded in quotes.
var BaseName = "Quest";
//QName below will be "QuestA"
var QName = BaseName + "A";

13. JavaScript - Arrays Arrays - List of values.
var MonthArray = ["Jan", "Feb", "Mar", "Apr"];
MonthArray[0]; //returns "Jan"
MonthArray[3]; //returns "Apr" 1 2 3 4
Jan
Feb
Mar
Apr
May
var ScoresArray = [34, 23, 54, 23];
var OneValue = 0;
/* Assign 2nd value in array. Arrays are 0 based */
OneValue = ScoresArray[1];

14. JavaScript - Math Math operations, similar to Excel var Years = 38;
var Total = 0;
Total = (Years – 13) * 20;
//++ Quick way to add 1. Used in loops.
Total++;

15. JavaScript - Branching
Branching with "if"
var base_income = 70000;
var income_level = 0;
if (base_income < 50000) {
// This code only runs if income < income_level = 1; }
// This line always runs
income_level = income_level * 4;

16. JavaScript - Branching
Branching with "if, else if, else"
if (income < 50000)
{ IncomeLevel = 1; }
else if ((income >= 50000) && (income < ))
{ IncomeLevel = 2;
else {
IncomeLevel = 3;
/* IncomeLevel will only get assigned once, 1,2,or 3.
&& AND
|| OR
== Compare if two values are equal.
!= Not Equal */

17. JavaScript - Looping Looping with "for"
Use when code should be run a known number of times
var ScoresArray = [23, 45, 32, 12];
var ArraySize = ScoresArray.length;
var Sum = 0;
//Initialize, test, increment
for (i = 0; i < ArraySize; i++) {
//Same as Sum = Sum + ScoresArray[i];
Sum += ScoresArray[i]; }
//Sum now contains 112 or

18. JavaScript - Functions
Allows you to package up and reuse JavaScript code over and over.
function ComputeNums (Num1, Num2) {
var Result = (Num1 + Num2) * 17;
return Result; }
var Result1 = ComputeNums(52, 43);
var Result2 = ComputeNums(18, 68);

19. JavaScript - Objects
Variables that give you access to different fields and functions.
The "." notation.
var ArraySize = ScoresArray.length;
var CurDate = new Date();
var Year = CurDate.getFullYear();
//Write to screen the current year.
document.write("Year is " + Year);

20. Make sure it’s a number
Often you need to make sure what you are dealing with is a number.
parseInt();
parseFloat();
var first_num = parseInt(input);

21. JavaScript - Debugging
Make sure you can see JavaScript errors.
Many times JavaScript has an error to show you but you can't see it.
Chrome Developer Tools – More Tools, Developer Tools (F12) , Console tab.
IE - Tools, Internet Options, Advanced, Browsing, "Display a notification about every script error." Also, Developer Tools (F12).
alert("Message here"); // print out values at certain points in the code.
console.log("Message here"); //prints to developer tools console.
Test outside of Lighthouse in text editor (Notepad++, Brackets, Sublime).
Simplify your problem so that you can track down where the error is.

22. JavaScript - References
Great JavaScript tutorial:

23. jQuery (JavaScript Library)

25. jQuery Rocks!
jQuery is a JavaScript library. It allows you to write powerful JavaScript in a simple way.
jQuery is compatible across multiple browsers.
Google: jquery addclass

26. jQuery - Objects $("#n1").val("Please type here");
jQuery makes it simple to interact with HTML. Using a bit of CSS to select the HTML you can create a powerful jQuery/JavaScript object.
//Assume this HTML
<input id="n1" name="n1" type="text">
$("#n1").val("Please type here");
CSS Selector
Function call

27. jQuery – Objects
jQuery objects are not regular JavaScript DOM objects. To get the DOM object do this:
$("#n1")[0].value("blah blah");
To check for jQuery object existence:
if($("#n1_div .footer").length) {
//Item exists, change HTML in footer to "hello"
$("#n1_div .footer").html("Hello"); }

28. Document ready <script> $(document).ready(function() {
Often you will want to make sure the web page has loaded before your code runs.
<script>
$(document).ready(function() {
//This code runs after the page loads. $("#n1").val("Please type here"); });
</script>

29. jQuery - Each
Using the Each function makes it easy to walk through all items on the page that match a certain selector.
//Loop through all HTML with class "options"
//Turn each one red.
$(".options").each(function(){
//"this" represents current instance.
$(this).css("background-color", "red");
});
//Does the same thing, but cannot code for each instance.
$(".options").css("background-color", "red");
All items matched with selector (".options" above) will be affected.
"this" keyword represents current instance.

30. jQuery - Traversing jQuery makes it easy to get around in the HTML
//Assume HTML
<tr class="clickable">
<td class="input_cell">
<input id="s_1" type="text">
</td>
</tr>
//Get parent and turn it red
ClickableObj = $("#s_1").closest(".clickable");
ClickableObj.css("background-color", "red");
Two great Traversing functions:
.closest() – Looks through HTML above you.
.find() – Looks at HTML inside of you.
See:

31. jquery – Events Events happen as the user interacts with the browser.
See
//Change question background color when mouseover
$(".question").on("mouseover", (function(){
$(this).css("background-color", "blue");
});
//Change back to white on mouseout
$(".question").on("mouseout", (function(){
$(this).css("background-color", "white");