Web Site Design and Development JavaScript CS 0134 Fall 2018 Tues and Thurs 1:00 – 2:15PM
JavaScript ● JavaScript is a programming language that was designed to run in your web browser. 2
Some Definitions ● Script – A script is a collection of code that is used to solve some problem ● Code – Code is a term that refers to the statements and blocks written in JavaScript that make up a script ● Statement – A statement is an instruction for a computer to process ● Block – A block is a group of statements surrounded by {} 3
Script element ● The script element is used to define client-side scripts for a web page ● In HTML5, by default, the browser assumes any scripts defined by the script element to be written in JavaScript ● You can define JavaScript with the script element in two ways – Place the code inside the script element as a child – Use the src attribute to point to a separate file that contains the code 4
Script element continued ● While not required, it is beneficial to place the script element as the last child before the body’s closing tag as this speeds up the loading of your web pages ● Like CSS, it is advisable to keep your JavaScript in a separate file 5
Code as child example <script> console.log("Hello World!"); </script> 6
Code in a separate file ● script.js console.log("Hello World!"); ● In HTML file just before closing body tag <script src="script.js"></script> 7
The console ● Modern desktop web browsers come with a console ● The console lets you see messages, warnings and errors related to your web page ● You open the console with Ctrl+Shift+J (Cmd+Option+J) in Chrome and Ctrl+Shift+K (Cmd+Option+K) in Firefox 8
console.log( msg ) ● You can use console.log( msg ) to write msg to the console. ● This is useful because you may want to have your script print out helpful messages while you are developing it ● Example console.log("Hello World!"); 9
Variables ● Variables are used to store data ● To define a variable you use the keyword let followed by a variable name ● Naming variables – Names are made up of letters, numbers and underscores. – The first character of a name must be a letter or underscore – Do not use one of the language's keywords as a variable name as this can cause confusion, you can find a list here, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe rence/Lexical_grammar#Keywords 10
Variables continued ● You can assign a value to a variable using the form "variable = value" ● You can do this assignment both when you define the variable as well as further on in the script ● JavaScript variables have scope, more on that later ● JavaScript is a language that uses dynamic typing . What this means is that you can assign any value to a variable and change the type of the value throughout the script 11
Variable examples ● let num; ● let name = "Adam"; ● let live = true; ● let increment = 2; ● let userAddress; ● num = 4; ● userAddress = "123 Alphabet Rd"; 12
Types of data ● JavaScript has the following types of data that we can work with – Numbers – Strings – Booleans – Null – Undefined – Arrays 13
Numbers ● Numbers are numerical values between -(2 53 - 1) and (2 53 – 1) (also known as - 9,007,199,254,740,991 and 9,007,199,254,740,991) ● Numbers can be written as integers, decimals and scientific notation ● In addition to explicit numbers, a number can be represented with -Infinity, +Infinity and NaN (not a number) 14
Strings ● A string is a set of characters surrounded by quotations ● Strings are typically words and sentences ● You can join two strings together by using the plus sign ● Example – name = "Adam"; console.log("Hello, my name is " + name); 15
Booleans ● Booleans are the values true and false ● Examples – result = true; – passed = false; 16
Null and undefined ● null represents no value ● Undefined happens when a variable has been declared but no value has been defined ● Examples – result = null; – let a; console.log(a); //will print undefined 17
Arrays ● Arrays are an ordered collection of data ● Arrays can consist of data in any type, including other arrays ● You define an array with a series of values separated by commas all surrounded by brackets ● Example – a = [1, 2, 3, 4]; 18
Arrays continued ● You can access a value in an array by using the arrays variable name followed by the values index in brackets ● An array index is a numerical value that points to where the value exists in the array; The index for the first value in an array is 0 and increments for every value in the array ● Example – a = [1, 2, 3, 4]; console.log(a[0]); 19
Math ● Math in JavaScript uses the follow operators – Addition: + – Subtraction: - – Multiplication: * – Division: / – Exponentiation: ** (does not work in IE) – Remainder: % – Increment by 1: ++ – Decrement by 1: -- 20
Math Continued ● You can also use parenthesis ● Math in JavaScript will follow the order of operations from algebra ● If you have a variable whose value is not a number and you try to do math on it, JavaScript will try to convert the variable to a number before doing the math.* * This will work unless one of the operands is a string and you are doing addition. In this case, the other operand is turned into a string and the values are concatenated 21
Math Examples ● result = 2 + 5; ● result = a / 13; ● result = (a ** 2 + b ** 2) / (c ** 2); ● incr++; ● ++incr; 22
Assignment Operators ● In addition to using an equal sign to assign a value to a variable, you can use one of the following – += – -= – *= – /= – **= – %= ● What these assignment operators do is perform a mathematical equation using the variable is the first operand and assigns the result to the variable 23
Assignment Operator Examples ● let x = 5; x += 3; ● The above can also be written as – let x = 5; x = x + 3; ● In both cases, the variable x has the value of 8 after the assignment 24
A note on semicolons ● As you have seen from the examples, every statement ends with a semicolon ● You can leave the semicolon off of a statement in certain situations but not others, thus you may see statements online without semicolons ● I recommend that you always end your statements with a semicolon because having the semicolon there when it can be omitted does not hurt but missing one where it cannot be omitted will cause errors 25
If statement ● The if statement gives us the ability to execute code based on if something is true or false ● The format is if(condition) { execute if true } else { execute if false } 26
The if condition ● The if condition can be anything that will have a final value of true or false ● This is often written in the form of a comparison between two values but can also be the value of a particular variable or the result of a function, more on functions later 27
Comparison Operators ● You can compare values in JavaScript using the following – == (Equality): two values are equal, JavaScript will attempt to convert the values to the same type to do the comparison – != (Inequality): two values are not equal, JavaScript will attempt to convert the values to the same type to do the comparison – === (Strict Equality): two values are equal and the same type – !== (Strict Inequality): two values are not the same and/or not the same type 28
Comparison Operators Continued – > (greater than) – < (less than) – >= (greater than or equal to) – <= (less than or equal to) – The last four comparison operators will try to to get numeric values from both operands before doing the comparison 29
Comparison Operator Examples ● 2 < 4 ● a === undefined ● color == "red" ● count >= 10 ● answer !== false 30
Logical Operators ● In addition to being able to have a single variable, comparison of two values or result of a function in our conditions, we can also group these into larger conditions ● We group these using logical operators, those operators are – && (and) – || (or) – ! (not) 31
Logical Operator Examples ● answer > 5 && answer <= 10 ● !booleanResponse ● color == "blue" || color == "green" 32
Else if ● You can also stitch together a series of if statements using else if . ● This works by evaluating the condition of the first if , if the condition is false, it goes to the else if and evaluates the condition for it. It continues in this fashion until an else if condition is true or the final else is found if it exists. 33
If example if (color == "red" || color == "orange") { console.log("warm color found"); } else if (color == "blue" || color == "green") { console.log("cool color found"); } else { console.log("color of unknown type found: " + color); } 34
Recommend
More recommend
