Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

CSS Unit I - Basics of JavaScript Programming

103 vues

Publié le

Course Title - Client Side Scripting Language (JavaScript)
Couse Code - 22519
Unit - I - Basics of JavaScript Programming

Publié dans : Ingénierie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

CSS Unit I - Basics of JavaScript Programming

  1. 1. Basics of JavaScript Programming Prepared By Prof. Rahul S. Tamkhane Unit - I Subject - Client Side Scripting Language (CSS-22519)
  2. 2. Compiled By - Prof. Rahul S. Tamkhane Unit Outcomes (UOs) 1a. Create object to solve the given problem. 1b. Develop JavaScript to implement the switch-case statement for the given problem. 1c. Develop JavaScript to implement loop for solving the given iterative problem. 1d. Display properties of the given object using getters and setters. 1e. Develop program using basic features of JavaScript to solve the given problem. Unit I - Basics of JavaScript Programming (12 Marks) 2 Course Outcome (CO) – Create interactive web pages using program flow control statements.
  3. 3. Compiled By - Prof. Rahul S. Tamkhane Content ■ Features of JavaScript ■ Object Name, Property, Methods, Dot Syntax, Main Event0 ■ Values and Variables ■ Operators and Expressions - Primary Expressions, Object and Array initializers, function definition expression, property access expressions, invocation expressions ■ If Statement, if...else, nested if statement ■ Switch...case Statement ■ Loop Statement - for loop, for…in loop, while loop, do...while loop, continue ■ Querying and setting properties and deleting properties, property getters and setters. Unit I - Basics of JavaScript Programming (12 Marks) 3
  4. 4. Compiled By - Prof. Rahul S. Tamkhane Introduction to JavaScript (Contd..) ■ A scripting language most often used for client-side web development ■ A JavaScript (also name as ECMAScript) is an interpreted, client- side, event-based, object-oriented scripting language that is use to add dynamic interactivity to web page. ■ Developed by Brendan Eich at Netspace in Sept 1995 ■ The language was initially called LiveScript and was later renamed JavaScript. Unit I - Basics of JavaScript Programming (12 Marks) 4
  5. 5. Compiled By - Prof. Rahul S. Tamkhane Introduction to JavaScript (Contd..) Unit I - Basics of JavaScript Programming (12 Marks) 5 ■ You can make your webpage more lively and interactive, with the help of JavaScript. ■ JavaScript is also being used widely in game development and Mobile application development.
  6. 6. Compiled By - Prof. Rahul S. Tamkhane Introduction to JavaScript ■ A script is a small piece of program ■ For example, – pop up alert box message – script to provide a drop down – Menus ■ Some examples of most popular scripting languages are JavaScript, Jscript, Perl, PHP, Python, VBScript Unit I - Basics of JavaScript Programming (12 Marks) 6
  7. 7. Compiled By - Prof. Rahul S. Tamkhane Features of JavaScript ■ Light-weight, interpreted language ■ Browser support ■ Object oriented language (provides predefined objects) ■ Gives more control over browser ■ Interpreter based ■ Most of control statements syntax same as C language Unit I - Basics of JavaScript Programming (12 Marks) 7
  8. 8. Compiled By - Prof. Rahul S. Tamkhane Advantages ■ Speed ■ Simplicity ■ Versatility ■ Server load ■ Less server interaction ■ Richer interface ■ Immediate feedback to visitors ■ Validate information in forms Unit I - Basics of JavaScript Programming (12 Marks) 8
  9. 9. Compiled By - Prof. Rahul S. Tamkhane Disadvantages ■ Security ■ Relying on end user ■ Reading or writing of files not allowed ■ Not used for networking applications ■ Does not have multitasking or multi-purpose capabilites Unit I - Basics of JavaScript Programming (12 Marks) 9
  10. 10. Compiled By - Prof. Rahul S. Tamkhane Applications ■ Websites ■ Web applications ■ Presentations ■ Server applications ■ Games, etc. Unit I - Basics of JavaScript Programming (12 Marks) 10
  11. 11. Compiled By - Prof. Rahul S. Tamkhane Types of Scripting Languages ■ There are two types of scripting languages 1) Client-side scripting 2) Server -side scripting Unit I - Basics of JavaScript Programming (12 Marks) 11
  12. 12. Compiled By - Prof. Rahul S. Tamkhane 1) Client-side scripting (Contd..) ■ It is used to run scripts is usually a browser. ■ The processing takes place on the end users computer. ■ The source code is transferred from the web server to the users computer over the internet & run directly in the browser. ■ Examples of client side scripting languages are: JavaScript(primarily), VBScript, HTML, CSS. Unit I - Basics of JavaScript Programming (12 Marks) 12
  13. 13. Compiled By - Prof. Rahul S. Tamkhane 1) Client-side scripting Unit I - Basics of JavaScript Programming (12 Marks) 13
  14. 14. Compiled By - Prof. Rahul S. Tamkhane 2) Server-side scripting (Contd..) ■ The server-side environment that runs a scripting language is a web server. ■ A user’s request is fulfilled by running a script directly on the web server to generate dynamic HTML pages. This HTML is then sent to the client browser. ■ It is usually based to provide interactive web sites that interface to database or other data stores on the server. ■ Examples of server-side scripting are: PHP, ASP.Net in C#, C++, or visual Basic. Unit I - Basics of JavaScript Programming (12 Marks) 14
  15. 15. Compiled By - Prof. Rahul S. Tamkhane 2) Server-side scripting Unit I - Basics of JavaScript Programming (12 Marks) 15
  16. 16. Compiled By - Prof. Rahul S. Tamkhane Required softwares ■ You can use Notepad and Browser. ■ You can also choose following IDE or software – Notepad++ – Sublime – Atom – Visual Studio Code (VS Code) – Microsoft FrontPage – Macromedia Dreamweaver – WebStorm – NetBeans, etc Unit I - Basics of JavaScript Programming (12 Marks) 16
  17. 17. Compiled By - Prof. Rahul S. Tamkhane How to Add JavaScript to a Page (Contd..) ■ Web browsers are built to understand HTML and CSS and convert those languages into a visual display on the screen. ■ The part of the web browser that understands HTML and CSS is called the layout or rendering engine. But most browsers also have something called a JavaScript interpreter. ■ The web browser is usually expecting HTML, so you must specifically tell the browser when JavaScript is coming by using the <script> tag. Unit I - Basics of JavaScript Programming (12 Marks) 17
  18. 18. Compiled By - Prof. Rahul S. Tamkhane How to Add JavaScript to a Page ■ The <script> tag is regular HTML. ■ When the web browser encounters the closing </script> tag, it knows it’s reached the end of the JavaScript program and can get back to its normal duties. ■ You’ll add the <script> tag in the web page’s <head> section, like this: Unit I - Basics of JavaScript Programming (12 Marks) 18
  19. 19. Compiled By - Prof. Rahul S. Tamkhane First JavaScript program Step 1 – Open Notepad and type the following code Step 2 – Save the file with name “MyJavaScript.html” Step 3 – Now double click on HTML file, then it will open in browser Unit I - Basics of JavaScript Programming (12 Marks) 19 <html> <head> <title>My First JavaScript</title? <script> alert(“Hello World!”); </script> </head> <body> </body> </html>
  20. 20. Compiled By - Prof. Rahul S. Tamkhane JavaScript Syntax (Contd..) ■ JavaScript code can be placed within the <script>... </script> HTML tags in a web page. ■ You can place the <script> tags, anywhere within your web page (recommended to keep it within the <head> tags). ■ The <script> tag alerts the browser program to start interpreting all the text between these tags as a script. ■ A simple syntax of your JavaScript will appear as follows. Unit I - Basics of JavaScript Programming (12 Marks) 20
  21. 21. Compiled By - Prof. Rahul S. Tamkhane JavaScript Syntax (Contd..) ■ The script tag takes two important attributes −  Language − Specifies what scripting language you are using. Typically, its value will be javascript. (not used in recent versions of HTML)  Type − Indicate the scripting language in use and its value should be set to "text/javascript". Unit I - Basics of JavaScript Programming (12 Marks) 21
  22. 22. Compiled By - Prof. Rahul S. Tamkhane JavaScript Syntax (Contd..) ■ Whitespace and Line Breaks - JavaScript ignores spaces, tabs, and newlines ■ Semicolons are Optional – JavaScript allows you to omit semicolon ■ Case Sensitivity - JavaScript is a case-sensitive language. ■ Comments in JavaScript - JavaScript supports both C-style and C++- style comments – Single line comment //----- – Multiple line comment /* */ – JavaScript Comment <!-- //--> Unit I - Basics of JavaScript Programming (12 Marks) 22
  23. 23. Compiled By - Prof. Rahul S. Tamkhane JavaScript Output (Contd..) ■ JavaScript can "display" data in different ways:  Writing into an HTML element, using innerHTML.  Writing into the HTML output using document.write().  Writing into an alert box, using window.alert().  Writing into the browser console, using console.log(). Unit I - Basics of JavaScript Programming (12 Marks) 23
  24. 24. Compiled By - Prof. Rahul S. Tamkhane 1.2 Object Name (Contd.) ■ A typical web page contains many objects. ■ For example, a web page has two forms which has objects like buttons, textarea, etc. ■ Each object must be uniquely identified by name or ID. ■ In JavaScript, objects are created by using two ways 1) Using Constructor 2) Using Literal Notation Unit I - Basics of JavaScript Programming (12 Marks) 24
  25. 25. Compiled By - Prof. Rahul S. Tamkhane 1.2 Object Name (Contd.) By Using Constructor ■ The new operator is used to create an instance of object var obj = new Object(); // Generic object var dob = new Date(1995, 4, 10); // Date object var mycar = new Car(); // User-defined object Unit I - Basics of JavaScript Programming (12 Marks) 25
  26. 26. Compiled By - Prof. Rahul S. Tamkhane 1.2 Object Name (Contd.) By Using Literal Notation ■ A object literal consists of comma separated list of name-value pairs wrapped in curly braces. var user = { }; // An empty object var circle = { x:10, y:21, radius:4 }; // User-defined object Unit I - Basics of JavaScript Programming (12 Marks) 26
  27. 27. Compiled By - Prof. Rahul S. Tamkhane 1.2 Property ■ The value that is associated with an object. ■ It is a kind of information ■ Object can have many values which are called as property. ■ For example, a form have properties like – title, – width, – height, etc. Unit I - Basics of JavaScript Programming (12 Marks) 27
  28. 28. Compiled By - Prof. Rahul S. Tamkhane 1.2 Methods ■ It is basically an action performed by an object. ■ An object is like a noun and method is like as verb ■ It is a kind of behaviour ■ For example, – A submit button on login form will submit the form data to server. ■ In JavaScript, we can create a method by using function keyword Unit I - Basics of JavaScript Programming (12 Marks) 28
  29. 29. Compiled By - Prof. Rahul S. Tamkhane 1.2 Dot Syntax ■ An object is associated with properties and methods ■ For example, – A document object has a property bgColor and method write ■ In JS, we can access object property and method using dot syntax along with object name document.bgColor // Accessing property document.write( ) // Accessing method Unit I - Basics of JavaScript Programming (12 Marks) 29
  30. 30. Compiled By - Prof. Rahul S. Tamkhane 1.2 Main Event (Contd.) ■ An event is something that causes JavaScript to start executing the code. ■ It is a specific circumstance which is monitored by JavaScript and that script can respond to it. ■ Some examples of events are: – A document loading – User clicking a mouse button – The browser screen changing size ■ An event handler which is a part of JavaScript that reacts to important events. ■ For example, an event handler on flipkart website will enlarge image when user mouse over the product Unit I - Basics of JavaScript Programming (12 Marks) 30
  31. 31. Compiled By - Prof. Rahul S. Tamkhane Build-in objects in JavaScript (Contd.) ■ Web browsers have an object named window. ■ It is called as global object. ■ Some of objects are: – window – document – navigator – history Unit I - Basics of JavaScript Programming (12 Marks) 31
  32. 32. Compiled By - Prof. Rahul S. Tamkhane 1.3 Values (Contd.) ■ In HTML, all values are treated as text ■ JavaScript uses six kinds of values 1) Number 2) String 3) Boolean 4) Null 5) Objects 6) Functions Unit I - Basics of JavaScript Programming (12 Marks) 32
  33. 33. Compiled By - Prof. Rahul S. Tamkhane 1.3 Values ■ You can also use literals to represent values in JS. These are fixed values. ■ Different types of literals are 1) Array literals – a list of zero or more expressions enclosed in square brackets ( [ ] ) 2) Boolean literals – true or false 3) Integer literals – Expressed in decimal (without leading with 0), hexadecimal (leading with 0x), octal (leading with 0) & binary (leading with 0b or 0B) 4) Floating-point literals – decimal integer, decimal point, fraction & exponent 5) String literals – zero or more characters enclosed in double or single quotes Unit I - Basics of JavaScript Programming (12 Marks) 33
  34. 34. Compiled By - Prof. Rahul S. Tamkhane 1.3 Variables (Contd.) ■ Variables are the “containers” for storing information ■ Used to store values ■ Rules for creating variable in JavaScript ■ Declaring a variable – Use var keyword, which tells browser that text follow will be the variable name – Syntax: var variable-name; – Example var color; Unit I - Basics of JavaScript Programming (12 Marks) 34
  35. 35. Compiled By - Prof. Rahul S. Tamkhane 1.3 Variables ■ Initializing a variable – Use assignment operator to assign value to variable – Syntax: variable-name = value; – Example color = “Red”; or color = ’Red’; ■ Sample program ■ Make use of typeof Unit I - Basics of JavaScript Programming (12 Marks) 35
  36. 36. Compiled By - Prof. Rahul S. Tamkhane 1.4 Operators (Contd.) ■ JavaScript statement contains mathematical expressions which is used to tell the browser to do something ■ The expression contains two parts – Operand – Operator ■ An operand is the value or variable ■ An operator is a special symbol indicates an action or operation Unit I - Basics of JavaScript Programming (12 Marks) 36
  37. 37. Compiled By - Prof. Rahul S. Tamkhane 1.4 Operators (Contd.) ■ Arithmetic operators ■ Comparison operators ■ Logical operators ■ Bitwise operators ■ Assignment operators ■ Conditional operators (Ternary) Unit I - Basics of JavaScript Programming (12 Marks) 37
  38. 38. Compiled By - Prof. Rahul S. Tamkhane 1.4 Operators (Contd.) ■ Arithmetic operators Arithmetic operators are used to perform mathematical operations between numeric operands. Unit I - Basics of JavaScript Programming (12 Marks) 38 Operator Description + Adds two numeric operands. - Subtract right operand from left operand * Multiply two numeric operands. / Divide left operand by right operand. % Modulus operator. Returns remainder of two operands. ++ Increment operator. Increase operand value by one. -- Decrement operator. Decrease value by one.
  39. 39. Compiled By - Prof. Rahul S. Tamkhane 1.4 Operators (Contd.) ■ Comparison operators JavaScript language includes operators that compare two operands and return Boolean value true or false. Unit I - Basics of JavaScript Programming (12 Marks) 39 Operators Description == Compares the equality of two operands without considering type. === Compares equality of two operands with type. != Compares inequality of two operands. > Checks whether left side value is greater than right side value. If yes then returns true otherwise false. < Checks whether left operand is less than right operand. If yes then returns true otherwise false. >= Checks whether left operand is greater than or equal to right operand. If yes then returns true otherwise false. <= Checks whether left operand is less than or equal to right operand. If yes then returns true otherwise false.
  40. 40. Compiled By - Prof. Rahul S. Tamkhane 1.4 Operators (Contd.) ■ Logical operators JavaScript language includes operators that compare two operands and return Boolean value true or false. Unit I - Basics of JavaScript Programming (12 Marks) 40 Operator Description && && is known as AND operator. It checks whether two operands are non-zero (0, false, undefined, null or "" are considered as zero), if yes then returns 1 otherwise 0. || || is known as OR operator. It checks whether any one of the two operands is non- zero (0, false, undefined, null or "" is considered as zero). ! ! is known as NOT operator. It reverses the boolean result of the operand (or condition)
  41. 41. Compiled By - Prof. Rahul S. Tamkhane 1.4 Operators (Contd.) ■ Assignment operators JavaScript includes assignment operators to assign values to variables. Unit I - Basics of JavaScript Programming (12 Marks) 41 Assignment operators Description = Assigns right operand value to left operand. += Sums up left and right operand values and assign the result to the left operand. -= Subtract right operand value from left operand value and assign the result to the left operand. *= Multiply left and right operand values and assign the result to the left operand. /= Divide left operand value by right operand value and assign the result to the left operand. %= Get the modulus of left operand divide by right operand and assign resulted modulus to the left operand.
  42. 42. Compiled By - Prof. Rahul S. Tamkhane 1.4 Operators (Contd.) ■ Bitwise operators – The JavaScript Bitwise Operators perform bit operations. – All the decimal values converted into binary values (sequence of bits, i.e., 0100, 1100, 1000, 1001, etc.). – Next, JavaScript bitwise operator will work on these bits such as shifting them left to right or converting bit value from 0 to 1, etc. Unit I - Basics of JavaScript Programming (12 Marks) 42
  43. 43. Compiled By - Prof. Rahul S. Tamkhane 1.4 Operators (Contd.) ■ Bitwise operators Unit I - Basics of JavaScript Programming (12 Marks) 43 Operator Name Description & AND Sets each bit to 1 if both bits are 1 | OR Sets each bit to 1 if one of two bits is 1 ^ XOR Sets each bit to 1 if only one of two bits is 1 ~ NOT Inverts all the bits << Zero fill left shift Shifts left by pushing zeros in from the right and let the leftmost bits fall off >> Signed right shift Shifts right by pushing copies of the leftmost bit in from the left, and let the rightmost bits fall off >>> Zero fill right shift Shifts right by pushing zeros in from the left, and let the rightmost bits fall off
  44. 44. Compiled By - Prof. Rahul S. Tamkhane 1.4 Operators (Contd.) ■ Ternary operator – JavaScript includes special operator called ternary operator : ? that assigns a value to a variable based on some condition. – This is like short form of if-else condition. Unit I - Basics of JavaScript Programming (12 Marks) 44
  45. 45. Compiled By - Prof. Rahul S. Tamkhane 1.4 Expressions (Contd.) ■ When one or more operators are combined with one or more operands then it is called an expression. ■ JavaScript has following category of expressions: 1) Primary expressions 2) Object and Array initializers 3) Function definition expressions 4) Property access expressions 5) Invocation expressions Unit I - Basics of JavaScript Programming (12 Marks) 45
  46. 46. Compiled By - Prof. Rahul S. Tamkhane 1.4 Expressions Primary Expressions ■ Standalone simplest expressions, don’t include any simpler expression ■ In JavaScript these are constants, literal values, keywords & variable references. 1.23 // A number literal “hello” // A string literal /pattern/ // A regular expression literal true, false, null, this // Keywords i, sum // Variables Unit I - Basics of JavaScript Programming (12 Marks) 46
  47. 47. Compiled By - Prof. Rahul S. Tamkhane 1.4 Expressions Object and Array Initializers(Contd.) ■ These are newly created object or array sometimes called as “object literals” and “array literals”. ■ An “array initializer” is a comma-separated list of expressions contained within square brackets. ■ The value of an array initializer is a newly created array. [ ] // An empty array: no expressions inside brackets means no elements [1+2, 3+4] // A 2-element array. First element is 3, second is 7 var matrix = [[1,2,3], [4,5,6], [7,8,9]]; // Nested array Unit I - Basics of JavaScript Programming (12 Marks) 47
  48. 48. Compiled By - Prof. Rahul S. Tamkhane 1.4 Expressions Object and Array Initializers ■ An “object initializer” (like array initializer expressions) but the square brackets are replaced by curly brackets ■ Each subexpression is prefixed with a property name and a colon: var p = { x:2.3, y:-1.2 }; // An object with 2 properties var q = { }; // An empty object with no properties q.x = 2.3; q.y = -1.2; // Now q has the same properties as p ■ Object literals can be nested. For example: var rectangle = { upperLeft: { x: 2, y: 2 }, lowerRight: { x: 4, y: 5 } }; Unit I - Basics of JavaScript Programming (12 Marks) 48
  49. 49. Compiled By - Prof. Rahul S. Tamkhane 1.4 Expressions Function Definition Expressions ■ It defines a JavaScript function & the value of expression is newly created function also known as “function literal”. ■ A function definition expression typically consists of – the keyword function followed by a comma-separated list of zero or more identifiers (the parameter names) in parentheses and – a block of JavaScript code (the function body) in curly braces. ■ For example: // This function returns the square of the value passed to it. var square = function(x) { return x * x; } Unit I - Basics of JavaScript Programming (12 Marks) 49
  50. 50. Compiled By - Prof. Rahul S. Tamkhane 1.4 Expressions Property Access Expressions ■ Evaluates the value of an object property or an array element. ■ JavaScript defines two syntaxes for property access: expression . identifier expression [ expression ] ■ For example, var o = {x:1, y:{z:3}}; // An example object var a = [o, 4, [5, 6]]; // An example array that contains the object o.x // => 1: property x of expression o o["x"] // => 1: property x of object o o.y.z // => 3: property z of expression o.y a[1] // => 4: element at index 1 of expression a a[0].x // => 1: property x of expression a[0] Unit I - Basics of JavaScript Programming (12 Marks) 50
  51. 51. Compiled By - Prof. Rahul S. Tamkhane 1.4 Expressions Invocation Expressions ■ An invocation expression is JavaScript’s syntax for calling (or executing) a function or method. ■ It starts with a function expression that identifies the function to be called. ■ The function expression is followed by an open parenthesis, a comma- separated list of zero or more argument expressions, and a close parenthesis. Some examples: ■ For example, f(0) // f is the function expression; 0 is the argument expression. Math.max(x,y,z) // Math.max is the function; x, y and z are the arguments. a.sort() // a.sort is the function; there are no arguments. Unit I - Basics of JavaScript Programming (12 Marks) 51
  52. 52. Compiled By - Prof. Rahul S. Tamkhane 1.5 Condition Statements ■ A condition statement is a type of JavaScript statement tells the browser to evaluate a condition and based upon this evaluation, either execute or skip one or more statements. ■ The three types of condition statements are the 1) if statement 2) switch... case statement and 3) the loop statement. Unit I - Basics of JavaScript Programming (12 Marks) 52
  53. 53. Compiled By - Prof. Rahul S. Tamkhane 1.5 if statement (Contd.) ■ The if statement is most powerful statement that allows JavaScript used for decision making. ■ There are four versions of the if statement. ■ The if statement has three parts: – the if keyword, – a conditional expression, and – the code block statements ■ Syntax: if (conditional expression) { // code block statements here. } Unit I - Basics of JavaScript Programming (12 Marks) 53
  54. 54. Compiled By - Prof. Rahul S. Tamkhane 1.5 if statement Unit I - Basics of JavaScript Programming (12 Marks) 54 <!-- Write a program to check whether a person is eligible to vote or not -->
  55. 55. Compiled By - Prof. Rahul S. Tamkhane 1.5 if…else statement (Contd.) ■ The if...else statement simply tells the browser “if the condition is true, then execute these statements, else execute these other statements.” ■ The if…else statement has five parts: – the if keyword, – a conditional expression, and – the code block statements executed when condition is true – the else keyword. – a code block statements executed when the condition is false. ■ Syntax: if (conditional expression) { // code block statements here. } else { // code block statements here. } Unit I - Basics of JavaScript Programming (12 Marks) 55
  56. 56. Compiled By - Prof. Rahul S. Tamkhane 1.5 if…else statement Unit I - Basics of JavaScript Programming (12 Marks) 56 <!-- Write a program to check for valid login -->
  57. 57. Compiled By - Prof. Rahul S. Tamkhane 1.5 if…else if statement (Contd.) ■ The if...else if statement tells the browser, “If the condition is true, then execute these statements, else evaluate another condition. If the other condition is true, then execute these other statements. ■ Syntax: if (conditional expression) { //Place statements here. } else if (conditional expression) { //Place statements here. } else { } Unit I - Basics of JavaScript Programming (12 Marks) 57 if...else if...else statement
  58. 58. Compiled By - Prof. Rahul S. Tamkhane 1.5 if…else if statement Unit I - Basics of JavaScript Programming (12 Marks) 58 <!-- Write a program to display greetings -->
  59. 59. Compiled By - Prof. Rahul S. Tamkhane 1.6 switch…case statement (Contd.) ■ A switch...case statement tells the browser to compare a switch value with a series of case values. ■ If the switch value matches a case value, then the browser executes statements that are placed beneath the case value. Unit I - Basics of JavaScript Programming (12 Marks) 59
  60. 60. Compiled By - Prof. Rahul S. Tamkhane 1.6 switch…case statement (Contd.) ■ A switch…case statement has eight parts: 1) The switch keyword 2) The switch value (must be placed within parentheses) 3) The case keyword 4) The case value (must be placed between the case keyword and a colon 5) The case statements 6) The break keyword (optional) 7) The default keyword (optional) 8) The Open and close French braces define the body of the switch...case statement. Unit I - Basics of JavaScript Programming (12 Marks) 60 switch (value) { case value1: //Place statements here. break; case value2: //Place statements here. break; default: //Place statements here. }
  61. 61. Compiled By - Prof. Rahul S. Tamkhane 1.7 Looping Statement ■ You can also control how a browser makes a decision by using a loop. ■ A loop is used to execute one or more statements repeatedly, without your having to duplicate those statements in your JavaScript. ■ You can use four types of loops in a JavaScript: 1) a for loop 2) for in loop 3) while loop 4) do...while loop Unit I - Basics of JavaScript Programming (12 Marks) 61
  62. 62. Compiled By - Prof. Rahul S. Tamkhane 1.7 Looping Statement The for loop ■ The for loop tells the browser to execute statements within the for loop until a condition statement returns false. ■ The for loop has five parts: 1) The for keyword 2) The initializer 3) The conditional expression 4) The post loop statements 5) The code block Unit I - Basics of JavaScript Programming (12 Marks) 62 for ( initializer; conditional expression ; post loop statements) { //Place statements here. }
  63. 63. Compiled By - Prof. Rahul S. Tamkhane 1.7 Looping Statement The for in loop (Contd.) ■ The for in loop is a special kind of for loop that is used whenever you don’t know the number of times that the browser should loop. ■ The for in loop tells the browser to execute statements within the code block for each item on a list. ■ If the list has five items, then the browser executes those statements five times. ■ The for loop has four parts: 1) The for keyword 2) The list, which is placed between parentheses 3) The Open and close French braces that define the code block 4) the code block Unit I - Basics of JavaScript Programming (12 Marks) 63 for(list) { //Place statements here. }
  64. 64. Compiled By - Prof. Rahul S. Tamkhane 1.7 Looping Statement The for in loop (Contd.) Unit I - Basics of JavaScript Programming (12 Marks) 64 Write a program to use the for in loop to display the properties of the window object of a browser Run In Browser
  65. 65. Compiled By - Prof. Rahul S. Tamkhane 1.7 Looping Statement The for in loop (Contd.) Unit I - Basics of JavaScript Programming (12 Marks) 65 Write a program to use the for in loop to display the properties of the document object of a browser Run In Browser For more details check JavaScript and HTML DOM Reference/
  66. 66. Compiled By - Prof. Rahul S. Tamkhane 1.7 Looping Statement The while loop ■ The while loop tells the browser to execute one or more statements continually as long as a condition is true. ■ A kind of entry-controlled loop. ■ Loop executes zero or more times. ■ The while loop has four parts: 1) The while keyword 2) The conditional expression 3) The Open and close French braces that define the code block 4) the code block Unit I - Basics of JavaScript Programming (12 Marks) 66 while (conditional expression) { //Place statements here. }
  67. 67. Compiled By - Prof. Rahul S. Tamkhane 1.7 Looping Statement The do…while loop (Contd.) ■ The do…while loop is same as while loop, except that statements within the code block executes at least once. ■ A kind of exit-controlled loop. ■ Loop executes one or more times. ■ The do…while loop has four parts: 1) The do keyword 2) The Open and close French braces that define the code block 3) The while keyword 4) The conditional expression placed within parenthesis Unit I - Basics of JavaScript Programming (12 Marks) 67 do { //Place statements here. } while (conditional expression) ;
  68. 68. Compiled By - Prof. Rahul S. Tamkhane 1.7 Looping Statement Unit I - Basics of JavaScript Programming (12 Marks) 68 Difference between while and do…while loop while loop do…while
  69. 69. Compiled By - Prof. Rahul S. Tamkhane 1.7 continue statement ■ The continue statement "jumps over" one iteration in the loop. ■ The continue keyword instructs the browser – to stop executing statements within the loop immediately and – return to top of the loop to evaluate the conditional expression ■ It breaks iteration in the loop and continues executing the next iteration in the loop. Unit I - Basics of JavaScript Programming (12 Marks) 69 continue;
  70. 70. Compiled By - Prof. Rahul S. Tamkhane 1.8 Querying and Setting properties (Contd..) ■ To obtain (or query) the value of a object property 1) Use dot syntax  While using dot operator, the RHS must be identifier  For example var author = book.author; var name = student.surname; 2) Use square brackets  While using square brackets, the value within brackets must be a property name  For example var title = book[“main_title”]; var author = book[“author”]; Unit I - Basics of JavaScript Programming (12 Marks) 70
  71. 71. Compiled By - Prof. Rahul S. Tamkhane 1.8 Querying and Setting properties ■ To create (or set) a object property use dot or square brackets but put them on LHS of an assignment expression. ■ For example book.edition = 5; book[“main_title”] = “ECMAScript”; Unit I - Basics of JavaScript Programming (12 Marks) 71
  72. 72. Compiled By - Prof. Rahul S. Tamkhane 1.8 Deleting properties ■ The delete operator is used to remove the property from an object. ■ For example delete book.author; // The object now has no author property delete book[“main_title”]; // The object now has no main_title property Unit I - Basics of JavaScript Programming (12 Marks) 72
  73. 73. Compiled By - Prof. Rahul S. Tamkhane 1.8 Getters and Setters (Contd.) ■ There are two kinds of object properties. 1) Data properties – These have a simple value 2) Accessor properties. They are essentially functions that execute on getting and setting a value ■ Accessor properties are represented by “getter” and “setter” methods. Unit I - Basics of JavaScript Programming (12 Marks) 73
  74. 74. Compiled By - Prof. Rahul S. Tamkhane 1.8 Getters and Setters (Contd.) ■ In an object literal they are denoted by get and set: ■ The getter works when obj.propName is read ■ The setter – when it is assigned. Unit I - Basics of JavaScript Programming (12 Marks) 74
  75. 75. Compiled By - Prof. Rahul S. Tamkhane 1.8 Getters and Setters (Contd.) ■ For instance, we have a user object with name and surname: let user = { name: "John", surname: "Smith" }; Unit I - Basics of JavaScript Programming (12 Marks) 75
  76. 76. Compiled By - Prof. Rahul S. Tamkhane 1.8 Getters and Setters (Contd.) ■ Now we want to add a fullName property, that should be "John Smith". ■ We don’t want to copy-paste existing information, so we can implement it as an accessor: Unit I - Basics of JavaScript Programming (12 Marks) 76 let user = { name: "John", surname: "Smith", get fullName() { return `${this.name} ${this.surname}`; } }; alert(user.fullName); // John Smith
  77. 77. Compiled By - Prof. Rahul S. Tamkhane 1.8 Getters and Setters (Contd.) ■ For adding a setter for user.fullName add the following: Unit I - Basics of JavaScript Programming (12 Marks) 77 let user = { name: "John", surname: "Smith", get fullName() { return `${this.name} ${this.surname}`; }, }; // set fullName is executed with the given value. user.fullName = "Alice Cooper"; alert(user.name); // Alice alert(user.surname); // Cooper
  78. 78. Compiled By - Prof. Rahul S. Tamkhane 1.8 Getters and Setters (Contd.) Unit I - Basics of JavaScript Programming (12 Marks) 78 Program to create getter and setter for fullName
  79. 79. Compiled By - Prof. Rahul S. Tamkhane 1.8 Getters and Setters (Contd.) Unit I - Basics of JavaScript Programming (12 Marks) 79
  80. 80. Compiled By - Prof. Rahul S. Tamkhane Unit I - Basics of JavaScript Programming (12 Marks) 80

×