Javascript 01 fundamentals

JavaScript Fundamentals Content Why JavaScript? JavaScript Versions Server-Side & Client-Side Programming Introducing JavaScript Placement Debugging Your Codes The Basics Conditional Statements Iteration Statements 10 Functions 11 Running Timed Commands Why JavaScript?  JavaScript is a lightweight, interpreted programming language It is designed for creating network-centric applications JavaScript is very easy to implement because it is integrated with HTML It is open and cross-platform  Applications of JavaScript Programming – Client side validation – Manipulating HTML Pages – User Notifications (pop-up) – Back-end Data Loading (Ajax) – Presentations (animation, effect) – Server Applications (NodeJS)  JavaScript frameworks: Angular, React, jQuery, Vue.js, Ext.js, Ember.js, Meteor, Mithril, Node.js, Polymer, Aurelia, Backbone.js JavaScript Versions Server-Side & Client-Side Programming  Server-side programming: the program code is run from the server hosting the website  Client-side programming: programs are run on the user’s computer using scripts that are downloaded along with the HTML and CSS files Introducing JavaScript  JavaScript is an interpreted language, meaning that the program code is executed directly without requiring an application known as a compiler to translate the code into machine language  You need only two things to use JavaScript: a text editor to write the JavaScript code and a browser to run the commands  JavaScript code can be inserted directly into an HTML file, or it can be placed in a separate text file that is linked to the HTML file Inserting the script Element  To link a web page to an external script file, add the following script element to the HTML file  To embed a script within the HTML file, add the following script element code  To load an external script file asynchronous with the HTML file, add the attribute async to the script element  To load an external script file after the HTML file has finished loading, add the attribute defer to the script element Loading HTML & JavaScript code 9.3 For Loop  The for includes the following three important parts: – The loop initialization: initialize the counter to a starting value It’s executed before the loop begins – The test statement: test if a given condition is true or not • True: the code given inside will be executed • False: stop the loop – The iteration statement: increase or decrease the counter  Syntax 9.4 for in loop  for in statement loops through the properties of an object or loop over the elements of an array  Syntax  ss 9.5 Loop Control  break Statement is used to exit a loop early  continue Statement tells the interpreter to immediately start the next iteration of the loop and skip the remaining code block 10 Functions 10.1 Function Definition 10.2 Calling a Function 10.3 Function Parameters 10.4 The return Statement 10.1 Function Definition  The most common way to define a function in JavaScript is by using the function keyword, followed by a unique function name, a list of parameters (that might be empty), and a statement block surrounded by curly braces  Syntax 10.2 Calling a Function  To invoke a function somewhere later in the script, you would simply need to write the name of that function and pass arguments (if any) 10.3 Function Parameters  A function can take one or many parameters separated by comma 10.4 The return Statement  A JavaScript function can have an optional return statement This is required if you want to return a value from a function 11 Running Timed Commands  Two ways to update the current time and the remaining time constantly – Time-delayed commands – Timed-interval commands 11.1 Working with Time-Delayed Commands  Time-delayed command - run after a specified amount of time has passed  Time delay is defined using the following: setTimeout(“command”, delay); where command is a JavaScript command and delay is the delay time in milliseconds before a browser runs the command  The command must be placed within either double or single quotation marks  To cancel a time-delayed command: clearTimeout();  Browser can process unlimited number of time-delayed commands  Can assign a unique identification number to distinguish commands var timeID = setTimeout("command", delay); where timeID is a variable that stores the ID of the time-delayed command 11.2 Running Commands at Specified Intervals  A timed-interval command instructs browsers to run a command repeatedly at a specified interval  Timed-interval command syntax: setInterval("command", interval); where interval is the interval in milliseconds before the command is run again  Timed-interval commands are halted using the following statement: clearInterval();  Distinguish one timed-interval command from another by storing the time ID in a variable var timeID = setInterval("command", interval);  Halt the timed-interval command by applying the clearInterval() method with timeID as the parameter value: clearInterval(timeID); THE END ...Content Why JavaScript? JavaScript Versions Server-Side & Client-Side Programming Introducing JavaScript Placement Debugging Your Codes The Basics Conditional... 11 Running Timed Commands Why JavaScript?  JavaScript is a lightweight, interpreted programming language It is designed for creating network-centric applications JavaScript is very easy to implement... machine language  You need only two things to use JavaScript: a text editor to write the JavaScript code and a browser to run the commands  JavaScript code can be inserted directly into an HTML