Introduction to JavaScript Programming

Introduction to JavaScript Programming

• 1.
  Introduction to JavaScript Programming www.collaborationtech.co.in BengaluruINDIA Presentation By Ramananda M.S Rao
• 2.
  Introduction to JavaScriptBasics Content What is JavaScript ? Where JavaScript is used? JavaScript Frameworks Writing JavaScript Code Using External JavaScript File Benefits of using External Files JavaScript Variables JavaScript Operators Arrays Control Structures Using JavaScript in HTML code About Us www.collaborationtech.co.in
• 3.
  Introduction to JavaScriptBasics What is JavaScript?  Interpreted programming or scripting language from Netscape.  Easier to code than the compiled languages like C and C++.  Lightweight and most commonly used script in web pages.  Allow client-side user to interact and create dynamic pages.  Cross-platform and object-oriented scripting language.  Most popular programming language in the world.  High level, dynamic and untyped programming language.  Standardized in the ECMAScript language specification.  Used for shorter programs  Takes longer time to process than compiled languages. www.collaborationtech.co.in
• 4.
  Introduction to JavaScriptBasics Where JavaScript is used ?  When a user requests an HTML page with JavaScript in it, the script is sent to the browser.  JavaScript used for creating dynamic web pages.  The JavaScript language is a free, client-side scripting language  Scripting adds interactivity to Hypertext Markup Language (HTML) pages.  Client-side means that the JavaScript language runs in the browser and is not used on the server side.  Client-side scripting allows user interactivity with a web page after the web page is served by the server and loaded by the browser.  Used in Web Forms Validations.  Used in Web and Mobile Development  Used to create Windows desktop applications  Used to create cross-platform applications via frameworks.  Used for Inserting and swapping Contents in Web Pages  Used across various platforms and browsers www.collaborationtech.co.in
• 5.
  Introduction to JavaScriptBasics Writing JavaScript Code The script tags and type attribute are required to include JavaScript code in an HTML file <head> <script type="text/javascript"> /*Example statement here */ // hello world </script> </head> www.collaborationtech.co.in
• 6.
  Introduction to JavaScriptBasics Using External JavaScript File <script type="text/javascript"> </script> Use comments to hide JavaScript code from browsers that do not support it <script type="text/javascript" src=“js/javascript.js"> </script> www.collaborationtech.co.in
• 7.
  Introduction to JavaScriptBasics Benefits of using External Files  External JavaScript files are the most common way to include JavaScript code for a number of practical reasons  Search engines can crawl and index web site faster if there is less code within HTML page.  Keeping your JavaScript code separate from HTML is cleaner and ultimately easier to manage.  On Including multiple JavaScript files in HTML code we can separate the JavaScript files into different folder structures on web server.  Clean, organized code is always key to easily managing your website. www.collaborationtech.co.in
• 8.
  Introduction to JavaScriptBasics JavaScript Variables There are two types of variables: local and global. You declare local variables using the var keyword and global variables without using the var keyword. With the var keyword the variable is considered local because it cannot be accessed anywhere outside the scope of the place you declare it. For example, declaring a local variable inside a function, it cannot be accessed outside of that function, which makes it local to that function. Declaring the same variable without the var keyword, it is accessible throughout the entire script, not only within that function. Which makes it global within script tag. Declaring a local variable var num = 10; To access the value of the num variable at another point in the script, you simply reference the variable by name Ex: document.write("The value of num is: "+ num); www.collaborationtech.co.in
• 9.
  Introduction to JavaScriptBasics JavaScript Operators I. You need operators when performing any operation in the JavaScript language. Operations include addition, subtraction, comparison, and so on. There are four types of operators in the JavaScript language. II. Arithmetic III. Assignment IV. Comparison V. Logical www.collaborationtech.co.in
• 10.
  Introduction to JavaScriptBasics Logical operators  Logical operators are generally used in conditional statements to combine comparison operators.  list describes all the logical operators available in the JavaScript language. Logical operators  Operator Description  && AND  || OR  ! NOT www.collaborationtech.co.in
• 11.
  Introduction to JavaScriptBasics Arrays  Arrays are similar to variables, but they can hold multiple values.  There is no limit to the amount or type of data that you can store in a JavaScript array  We can access any value of any item in an array at any time after declaring it.  Arrays can hold any data type in the JavaScript language.  Arrays can store only similar data in any one array. Storing similar values in an array var colors = new Array("orange", "blue", "red", "brown"); var shapes = new Array("circle", "square", "triangle", "pentagon"); Accessing values in an array is easy, but there is a catch. Arrays always start with an ID of 0, rather than 1. To access an array item you must use its ID, which refers to the item's position in the array www.collaborationtech.co.in
• 12.
  Introduction to JavaScriptBasics Storing similar values in an array var colors = new Array("orange", "blue", "red", "brown"); document.write("Orange: "+ colors[0]); document.write("Blue: "+ colors[1]); document.write("Red: "+ colors[2]); document.write("Brown: "+ colors[3]); It is also possible to assign a value to a position in an array or update an item's value in an array, just as you accessed an item in an array Assigning values to specific positions in an array var colors = new Array(); colors[0] = "orange"; colors[1] = "blue"; colors[2] = "red"; colors[3] = "brown"; document.write("Blue: "+ colors[1]); // Update blue to purple colors[1] = "purple"; document.write("Purple: "+ colors[1]); www.collaborationtech.co.in
• 13.
  Introduction to JavaScriptBasics Control Structures Conditional statements  Conditional statements are the backbone for creating any type of logic in a scripting or programming language, and the JavaScript language is no exception.  Conditional statements determine what action to take based on the conditions you script. There are four ways to write conditional statements in the JavaScript language, which are described in Table Conditional statements Statement If -Used to execute a script if a specific condition is true if...else -Used to execute one script if a specific condition is true or another script if the condition is false if...else if...else -Used to execute one script if one of unlimited conditions is true or another script if all conditions are false Switch- Used to execute one of many scripts A>B ? document.write(‘a’): document.write(‘b’) www.collaborationtech.co.in
• 14.
  Introduction to JavaScriptBasics Functions  Functions are containers for script that is only to be executed by an event or a call to the function.  Functions do not execute when the browser initially loads and executes the script that is included in a web page.  The purpose of a function is to contain script that has a task so that you then have the ability to execute that script and run that task at any time. Structuring a simple function var num = 10; function changeVariableValue() { num = 11; } changeVariableValue(); document.write("num is: "+ num); www.collaborationtech.co.in
• 15.
  Follow us onSocial Facebook: https://www.facebook.com/collaborationtechnologies/ Twitter : https://twitter.com/collaboration09 Google Plus : https://plus.google.com/100704494006819853579 LinkedIn : https://www.linkedin.com/in/ramananda-rao-a2012545 Instagram : https://instagram.com/collaborationtechnologies YouTube : https://www.youtube.com/channel/UCm9nK56LRbWSqcYWbzs8CUg Skype : msrnanda WhatsApp : +91 9886272445 www.collaborationtech.co.in THANK YOU
• 16.
  About Us