IT 304 Web Systems and Technologies I - Javascript PDF

IT 304 WEB SYSTEMS AND TECHNOLOGIES I UNIT 3: MAKING INTERACTIVE WEBSITES LESSON 1: THE BASICS OF JAVASCRIPT WHAT IS JAVASCRIPT? JavaScript was invented by Brendan Eich. JavaScript is the programming language used with HTML in Web Development. It is easy to learn and provides functions that makes...

IT 304 WEB SYSTEMS AND TECHNOLOGIES I UNIT 3: MAKING INTERACTIVE WEBSITES LESSON 1: THE BASICS OF JAVASCRIPT WHAT IS JAVASCRIPT? JavaScript was invented by Brendan Eich. JavaScript is the programming language used with HTML in Web Development. It is easy to learn and provides functions that makes computers do what you want them to do. JavaScript is one of the most popular and in demand skills in the web industry. WHAT IS JAVASCRIPT? Brendan Eich (born July 4, 1961) is an American computer programmer and technology executive. He created the JavaScript programming language and co- founded the Mozilla project, the Mozilla Foundation, and the Mozilla Corporation. He served as the Mozilla Corporation's chief technical officer before he was appointed chief executive officer, but resigned shortly after his appointment due to pressure over his firm opposition to same-sex marriage. He subsequently became the CEO of Brave Software. WHY LEARN JAVASCRIPT? To be able to develop interactive websites JavaScript needs to embed with HTML (content) and CSS (layout) in order to program the behavior of the pages. WHY LEARN JAVASCRIPT? scripts Content/ structure styles JAVASCRIPT CAPABILITIES 1. Retrieve and change HTML contents 2. Alter HTML attributes 3. Modify HTML Styles (CSS) 4. Hide/ Show HTML Elements 5. Respond to an event 6. Identify the visitor’s browser 7. Validate Forms before passing to the server 8. Serve as a foundation for other programming languages such as AJAX, DOM and Jquery. JAVA vs. JAVASCRIPT Both Java and Java Script are Object Oriented Programming languages and many of their programming structures are similar. However, These two are totally different languages. Java can stand on its own while JavaScript must be placed to an HTML document to function. WHAT IS JAVASCRIPT? JavaScript is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we have protected in many more features in other parts of the Learning Area. Image Source: https://developer.mozilla.org/ showing the three-layer cake of standard of web technologies FEATURES OF JAVASCRIPT Object Orient Script Language Handling Events Client Edge Technology Statements Looping Validation of User’s Input Light Weight and Delicate Else and If Statement Case sensitive format Interpreter Centered Ability to perform Image Source: https://www.educba.com/ showing the features of JavaScript INSERTING JAVASCRIPT INTO HTML DOCUMENT The following are the stages on how to integrate a JavaScript in a document: 1. Into the HTML document add the tag 2. To define the scripting language, add type attribute into the tag. The type attribute is optional since HTML 5. It is made optional because the default script of all modern browsers is JavaScript. 3. Type the JavaScript command in between the and tag. Example: Output: My First JavaScript Experience document.write(“web development so easy!”); INSERTING JAVASCRIPT INTO HTML DOCUMENT JavaScript in the Body Section The script will be performed and composed with other HTML elements, while the page loads into the browsers. Example: JavaScript in the body section // JS codes here INSERTING JAVASCRIPT INTO HTML DOCUMENT JavaScript in the Head Section The script is loaded earlier when somebody uses it. Nonetheless, it will be performed when it is called, or an event is generated. Example: JavaScript in the head section // JS codes here INSERTING JAVASCRIPT INTO HTML DOCUMENT JavaScript in an External File The scripts can be written in an external file saved with a.js extension name. External files are suggested when the same script will be used in several web pages. External file cannot contain a tag since it will be called in a tag in an HTML document. To use the external script, assign the whole filename of the script to the "src" attribute in the tag. Example: JavaScript in the head section JAVASCRIPT VARIABLES To state a variable, use the var statement. A value may directly be allocated to the variable (use quotes around the values that are treated as text). Examples: JAVASCRIPT VARIABLES If a variable that is not yet been declared has assigned a value, the variable will implicitly be declared. Examples: JAVASCRIPT VARIABLES If a variable that is not yet been declared has assigned a value, the variable will implicitly be declared. Examples: JAVASCRIPT VARIABLES Camel case currentTempC, anIdentifierName (so named because the capital letters look like the humps in a camel's back). Snake case current_temp_c, an_identifier_name (slightly less popular). It can use whichever agreement is preferred, but consistency is a good idea. Select one and stick with it. If working on a team or making a project available to a community, try choosing whatever the preferred convention is. JAVASCRIPT OPERATORS Arithmetic Operators To perform arithmetic operations on numbers. Operator Description + Addition - Subtraction * Multiplication / Division % Modulus (Division Remainder) ++ Increment -- Decrement JAVASCRIPT OPERATORS Assignment Operators To assign values to JavaScript variables. Operator Example Same As = x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y %= x%=y x=x%y JAVASCRIPT OPERATORS String Operators To concatenate string, you can also use the + operator. Example: var text1= “Albert”; var text2= “Jason”; var text3= text1 + “ ” + text2; Output: Albert Jason JAVASCRIPT OPERATORS Comparison Operators Comparison operators are used in conditional statements to compare the differences or equality of values or variables to determine the action to be taken based on the result. Operator Description == Is equal to != Is not equal > Greater than < Less than >= Greater than or equal to