Web programming
- 2. JavaScript JavaScript is a programming language used to make web pages interactive. It runs on your visitor's computer and doesn't require constant downloads from your website. JavaScript is the programming language of HTML and the Web.
- 3. JS Where To JavaScript can be placed in the <body> and the <head> sections of an HTML page.
- 4. The <script> Tag In HTML, JavaScript code must be inserted between <script> and </script> tags.
- 5. JavaScript Functions and Events A JavaScript function is a block of JavaScript code, that can be executed when "asked" for. A function can be executed when an event occurs, like when the user clicks a button.
- 6. JavaScript in <head> or <body> You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
- 9. External JavaScript Scripts can also be placed in external files: External scripts are practical when the same code is used in many different web pages. JavaScript files have the file extension .js.
- 10. External JavaScript To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:
- 11. External JavaScript Advantages Placing JavaScripts in external files has some advantages: It separates HTML and code It makes HTML and JavaScript easier to read and maintain Cached JavaScript files can speed up page loads
- 12. JS Output JavaScript can "display" data in different ways: Writing into an alert box, using window.alert(). Writing into the HTML output using document.write(). Writing into an HTML element, using innerHTML. Writing into the browser console, using console.log().
- 13. Using window.alert() You can use an alert box to display data:
- 15. Using document.write() Using document.write() after an HTML document is fully loaded, will delete all existing HTML:
- 16. Using innerHTML To access an HTML element, JavaScript can use the document.getElementById(id) method. The id attribute defines the HTML element. The innerHTML property defines the HTML content:
- 17. Using console.log() In your browser, you can use the console.log() method to display data. Activate the browser console with F12, and select "Console" in the menu.
- 18. JavaScript Programs A computer program is a list of "instructions" to be "executed" by the computer. In a programming language, these program instructions are called statements. JavaScript is a programming language. JavaScript statements are separated by semicolons.
- 19. JavaScript Statements JavaScript statements are composed of: Values Operators Expressions Keywords Comments.
- 20. JavaScript Values The JavaScript syntax defines two types of values: Fixed values variable values. Fixed values are called literals. Variable values are called variables.
- 21. JavaScript Literals The most important rules for writing fixed values are: Numbers are written with or without decimals: Strings are text, written within double or single quotes:
- 22. JavaScript Variables In a programming language, variables are used to store data values. JavaScript uses the var keyword to declare variables. An equal sign is used to assign values to variables. In this example, x is defined as a variable. Then, x is assigned (given) the value 6:
- 23. JavaScript Operators JavaScript uses an assignment operator ( = ) to assign values to variables: JavaScript uses arithmetic operators ( + - * / ) to compute values:
- 24. JavaScript Expressions An expression is a combination of values, variables, and operators, which computes to a value. The computation is called an evaluation. For example, 5 * 10 evaluates to 50: Expressions can also contain variable values: The values can be of various types, such as numbers and strings. For example, "John" + " " + "Doe", evaluates to "John Doe":
- 25. JavaScript Keywords JavaScript keywords are used to identify actions to be performed. The var keyword tells the browser to create a new variable:
- 26. JavaScript Comments Not all JavaScript statements are "executed". Code after double slashes // or between /* and */ is treated as a comment. Comments are ignored, and will not be executed:
- 27. JavaScript Identifiers Identifiers are names. In JavaScript, identifiers are used to name variables (and keywords, and functions, and labels). The rules for legal names are much the same in most programming languages. In JavaScript, the first character must be a letter, an underscore (_), or a dollar sign ($). Subsequent characters may be letters, digits, underscores, or dollar signs.
- 28. JavaScript is Case Sensitive All JavaScript identifiers are case sensitive. The variables lastName and lastname, are two different variables. JavaScript does not interpret VAR or Var as the keyword var.
- 29. JavaScript and Camel Case Historically, programmers have used three ways of joining multiple words into one variable name: Hyphens: first-name, last-name, master-card, inter-city. Underscore: first_name, last_name, master_card, inter_city. Camel Case: FirstName, LastName, MasterCard, InterCity. In programming languages, especially in JavaScript, camel case often starts with a lowercase letter: firstName, lastName, masterCard, interCity.
- 30. JavaScript Statements JavaScript statements are "instructions" to be "executed" by the web browser. This statement tells the browser to write "Hello Dolly." inside an HTML element with id="demo":
- 31. JavaScript Programs Most JavaScript programs contain many JavaScript statements. The statements are executed, one by one, in the same order as they are written. In this example x, y, and z are given values, and finally z is displayed:
- 32. Semicolons ; Semicolons separate JavaScript statements. Add a semicolon at the end of each executable statement: When separated by semicolons, multiple statements on one line are allowed:
- 33. JavaScript White Space JavaScript ignores multiple spaces. You can add white space to your script to make it more readable. The following lines are equivalent: A good practice is to put spaces around operators ( = + - * / ):
- 34. JavaScript Line Length and Line Breaks For best readability, programmers often like to avoid code lines longer than 80 characters. If a JavaScript statement does not fit on one line, the best place to break it, is after an operator:
- 35. JavaScript Code Blocks JavaScript statements can be grouped together in code blocks, inside curly brackets {...}. The purpose of code blocks is to define statements to be executed together. One place you will find statements grouped together in blocks, are in JavaScript functions:
- 36. JavaScript Comments – Single Line Comments Single line comments start with //. Any text between // and the end of the line will be ignored by JavaScript (will not be executed). This example uses a single-line comment before each code line:
- 37. JavaScript Comments – Single Line Comments This example uses a single line comment at the end of each line to explain the code:
- 38. Multi-line Comments Multi-line comments start with /* and end with */. Any text between /* and */ will be ignored by JavaScript. This example uses a multi-line comment (a comment block) to explain the code:
- 39. Using Comments to Prevent Execution Using comments to prevent execution of code is suitable for code testing. Adding // in front of a code line changes the code lines from an executable line to a comment. This example uses // to prevent execution of one of the code lines:
- 40. Using Comments to Prevent Execution This example uses a comment block to prevent execution of multiple lines:
- 41. JavaScript Variables JavaScript variables are containers for storing data values. In this example, x, y, and z, are variables: From the example above, you can expect: x stores the value 5 y stores the value 6 z stores the value 11
- 42. Much Like Algebra In this example, price1, price2, and total, are variables: we use variables (like price1) to hold values. we use variables in expressions (total = price1 + price2).
- 43. JavaScript Data Types JavaScript variables can hold numbers like 100, and text values like "John Doe". In programming, text values are called text strings. JavaScript can handle many types of data, but for now, just think of numbers and strings. Strings are written inside double or single quotes. Numbers are written without quotes. If you put quotes around a number, it will be treated as a text string.
- 44. Declaring (Creating) JavaScript Variables Creating a variable in JavaScript is called "declaring" a variable. You declare a JavaScript variable with the var keyword: After the declaration, the variable has no value. (Technically it has the value of undefined) To assign a value to the variable, use the equal sign:
- 45. Declaring (Creating) JavaScript Variables You can also assign a value to the variable when you declare it: we create a variable called carName and assign the value "Volvo" to it. Then we "output" the value inside an HTML paragraph with id="demo":
- 46. One Statement, Many Variables You can declare many variables in one statement. Start the statement with var and separate the variables by comma: A declaration can span multiple lines:
- 47. Value = undefined In computer programs, variables are often declared without a value. The value can be something that has to be calculated, or something that will be provided later, like user input. A variable declared without a value will have the value undefined. The variable carName will have the value undefined after the execution of this statement:
- 48. Re-Declaring JavaScript Variables If you re-declare a JavaScript variable, it will not lose its value. The variable carName will still have the value "Volvo" after the execution of these statements:
- 49. JavaScript Arithmetic As with algebra, you can do arithmetic with JavaScript variables, using operators like = and +: You can also add strings, but strings will be concatenated (added end-to-end):
- 50. JavaScript Operators Arithmetic Operators Arithmetic operators are used to perform arithmetic on numbers (literals or variables).
- 51. JavaScript Operators Arithmetic Operators The addition operator (+) adds numbers: The multiplication operator (*) multiplies numbers.
- 52. JavaScript Assignment Operators Assignment operators assign values to JavaScript variables.
- 53. JavaScript String Operators The + operator can also be used to add (concatenate) strings.
- 54. Adding Strings and Numbers Adding two numbers, will return the sum, but adding a number and a string will return a string:
- 55. JavaScript Comparison and Logical Operators
- 56. JavaScript Data Types JavaScript variables can hold many data types: numbers, strings, arrays, objects and more:
- 57. JavaScript Has Dynamic Types JavaScript has dynamic types. This means that the same variable can be used as different types:
- 58. JavaScript Strings A string (or a text string) is a series of characters like "John Doe". Strings are written with quotes. You can use single or double quotes:
- 59. JavaScript Numbers JavaScript has only one type of numbers. Numbers can be written with, or without decimals: Extra large or extra small numbers can be written with scientific (exponential) notation:
- 60. JavaScript Booleans Booleans can only have two values: true or false.
- 61. JavaScript Arrays JavaScript arrays are written with square brackets. Array items are separated by commas. The following code declares (creates) an array called cars, containing three items (car names): Array indexes are zero-based, which means the first item is [0], second is [1], and so on.
- 62. JavaScript Objects JavaScript objects are written with curly braces. Object properties are written as name:value pairs, separated by commas.
- 63. Empty Values An empty value has nothing to do with undefined. An empty string variable has both a value and a type.