5. JavaScript¶
For detailed JavaScript tutorials, and as a great reference, see W3Schools JavaScript section.
Go through the JS Tutorial, and stop before you get to the JS Forms.
Here is an example I’ll talk through:
Start with a web page test_javascript.html
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>This is a document in which to test JavaScript</title> </head> <body> <h1>This is a document in which to test JavaScript</h1> <p>Hi, this is a JavaScript test document.</p> <p>JavaScript should be loaded right before the closing body tag for the best performance.</p> <script src="test_javascript.js"></script> </body> </html> |
In the same directory, create your JavaScript file test_javascript.js
:
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 | /* This is a quick primer on JavaScript. For more detail on how the language works, see: http://www.w3schools.com/js/default.asp */ /* * Multiline comments work like this. */ // Single line comments work like this // Print to the JavaScript console. // Hit F12 in your browser to bring up the console. // Also, note that statements end with a semi-colon in JavaScript. console.log("This is a test message that will print on the console."); // Variables // By convention, we usually use CamelCase for variable names, and not underscores. // So myAccountNumber as an example. // Before you use a variable, you should declare it.For example: var variableOne, variableTwo; // New with ES6, you can use either 'let' or 'const': let variableThree; const variableFour = 3.14; // After that you can use it: variableOne = 5; variableTwo = variableOne + 2; console.log("variableOne: " + variableOne + " - variableTwo: " + variableTwo ); // Functions work like this: function addNumbers(numberOne, numberTwo) { return numberOne + numberTwo; } var functionResult = addNumbers(20, 30); console.log("Function result: " + functionResult); // Function pointers are used a lot in JavaScript. Figure this out: var anotherAddNumberFunction = addNumbers; functionResult = anotherAddNumberFunction(40, 50); console.log("Function result: " + functionResult); // Simple objects using JSON JavaScript Object Notation: var personA = {name: "Paul", email: "paul.craven@simpson.edu"}; console.log("personA.name: " + personA.name); console.log("person['name']: " + personA['name']); // This doesn't print much: console.log("personA: " + personA); // But check out this print: console.log(personA); // Class creation using 'class' keyword. New in ES6 class PersonB { constructor() { this.first = ""; this.last = ""; } } personB = new PersonB(); personB.first = "Paul"; personB.last = "Craven"; console.log("personB.first: " + personB.first); // Another example, with a method and using parameters class PersonC { constructor(first, last) { this.first = first; this.last = last; } fullName() { return this.first + " " + this.last; } } personC = new PersonC("Paul", "Craven"); console.log("personC.fullName: " + personC.fullName()); // Old-school pre-ES6 objects with methods: var personD = { first: "Paul", last: "Craven", fullName: function() { return this.first + " " + this.last; }, email: "paul.craven@simpson.edu" }; console.log("personD.name: " + personD.fullName()); // Loop for (let i = 0; i < 10; i++) { console.log(i); } // Loop through an array let colors = ["Red", "Blue", "Green"]; for (i = 0; i < colors.length; i++) { console.log(colors[i]); } // Loop through fields in an object let personE = {name: "Paul", email: "paul.craven@simpson.edu"}; for (var field in personE) { console.log(field + " = " + personE[field]); } // Testing numbers x = 5; y = 6; if(x == y) { console.log("x == y"); } else { console.log("x != y"); } // Testing strings // Use === not == // http://stackoverflow.com/questions/3586775/what-is-the-correct-way-to-check-for-string-equality-in-javascript x = "Orange"; y = "Orange"; if(x === y) { console.log("x == y"); } else { console.log("x != y"); } // Convert to string x = 5; y = 6; z = x + y; console.log("z = " + z); z = x.toString() + y.toString(); console.log("z = " + z); // Convert to number x = "5"; y = "6"; z = x + y; console.log("z = " + z); // Use Number to convert to a number. You can also use parseInt() as well. z = Number(x) + Number(y); console.log("z = " + z); |