Introduction to JavaScrtipt
Download as PPTX, PDF0 likes210 views
This document provides an introduction to JavaScript, covering topics such as what JavaScript is, how it works, data types, variables, operators, flow control, objects, arrays, strings, error handling, and DOM manipulation. It discusses key JavaScript concepts like dynamic typing, primitive data types, the var keyword, logical operators, conditional statements, functions, prototypes, and the Document Object Model.
![Array
Array – to store multiple values in single variable
Var myarr = [‘one’, ‘two’, ‘three’];
Accessing array items – myarr[1]
Changing elements myarr[1]
STACK principle – LIFO
Properties
Length
Push
Pop
toString()
Join(“ “)
Shift – removed element at first place (index 0)
Unshift – adds element at firstplace
Splice(2, 0 , obj1, obj2) – add items at position 2, 0 don’t delete any items
Sort – default sort
Concat – arr1.concat(arr2) – will add arr2 to arr1
Slice(1, 3) – slice elements from index 1 to 3.](https://image.slidesharecdn.com/introductiontojavascript-151025192757-lva1-app6891/85/Introduction-to-JavaScrtipt-14-320.jpg)
Introduction to JavaScrtipt
- 1. Introduction to JavaScript HTML5, CSS3, Javascript and Jquery by: Seshu Puvvada 1
- 2. Introduction What is JavaScript How does it work Any PC, any OS, any Browser ECMAScript 5 ECMAScript 6/ ES6/ ES Next Case Sensitive
- 3. Prototype-based programming Class less programming Prototype-based programming is an OOP model that doesn't use classes, but rather it first accomplishes the behavior of any class and then reuses it by decorating existing prototype objects.
- 4. Script block Internal scripting <script> </script> External scripting <script src="js/filename.js"></script>
- 6. Document Object Model AXP Internal
- 7. Simple DOM Manipulation What is function What is event <!DOCTYPE html> <html> <head> <title>Welcome to JS</title> <script> function changedata(){ document.getElementById('description').innerHTML = "Text has been changed"; } </script> </head> <body> <p id="description" > Testing paragraph </p> <input type="submit" value="Change Data" onclick="changedata()"> </body> </html>
- 8. Dynamic Typing JavaScript is a loosely typed or a dynamic language. That means you don't have to declare the type of a variable ahead of time. The type will get determined automatically while the program is being processed. That also means that you can have the same variable as different types var foo = 42; // foo is now a Number var foo = "bar"; // foo is now a String var foo = true; // foo is now a Boolean
- 9. Data types Primitive Data type Boolean (true/false) Null (null) Undefined(not assigned any value) Number String Symbol (ES 6) Object
- 10. Variables var keyword Scope Global and local variable Variable declaration var x = 1; var str = ‘hai’; var isStr = true; Printing variable – console.log(var names) typeof -- to find variable type
- 11. Logical Operators == equal to === equal value and equal type != not equal !== not equal value or not equal type > greater than < less than >= greater than or equal to <= less than or equal to
- 12. Program Flow Conditional statements if if, else if, else, else if while do while for break switch Functions Function Function with input parameters Function with and without return
- 13. Object An Object is collection of properties. These properties can either be primitive datatypes or other objects or functions. Predefined objects array, date etc… Custom objects Var obj = { };
- 14. Array Array – to store multiple values in single variable Var myarr = [‘one’, ‘two’, ‘three’]; Accessing array items – myarr[1] Changing elements myarr[1] STACK principle – LIFO Properties Length Push Pop toString() Join(“ “) Shift – removed element at first place (index 0) Unshift – adds element at firstplace Splice(2, 0 , obj1, obj2) – add items at position 2, 0 don’t delete any items Sort – default sort Concat – arr1.concat(arr2) – will add arr2 to arr1 Slice(1, 3) – slice elements from index 1 to 3.
- 15. String properties Str.length Escape char – “I am ”frontend developer”” n – for new line indexOf lastIndexOf Replace Search Split – convert string to array Substr Substring toLowerCase toUpperCase
- 16. Error handling Try Catch Finally Throw try{ //something here throw “custom error” ; }catch(err){ }finally{ //something here }
- 17. DOM Manipulation methods AXP Internal
Editor's Notes
- #10: Primitive Data type – is data that is not an object and has no methods. s