Java script Dr. Wed Ghabban
Pseudocode Pseudocode is an informal way of programming description that does not require any strict programming language syntax or underlying technology considerations. It is used for creating an outline or a rough draft of a program. Pseudocode summarizes a program’s flow, but excludes underlying details. System designers write pseudocode to ensure that programmers understand a software project's requirements and align code accordingly. Pseudocode is not an actual programming language.
The benefit of Pseudocode • Pseudocode is understood by the programmers of all types. It enables the programmer to concentrate only on the algorithm part of the code development. • Improves the readability of any approach. It’s one of the best approaches to start implementation of an algorithm. • Acts as a bridge between the program and the algorithm or flowchart. Also works as a rough documentation, so the program of one developer can be understood easily when a pseudo code is written out. In industries, the approach of documentation is essential. • The main goal of a pseudo code is to explain what exactly each line of a program should do, hence making the code construction phase easier for the programmer.
How to write Psuedo code 1. Arrange the sequence of tasks and write the pseudocode accordingly. 2. Start with the statement of a pseudo code which establishes the main goal or the aim. EX: 3. The way the if-else, for, while loops are indented in a program, indent the statements likewise, as it helps to comprehend the decision control and execution mechanism. They also improve the readability to a great extent.
Java script (JS) • JavaScript is a dynamic programming language that's used for web development, in web applications, for game development, and lots more. It allows you to implement dynamic features on web pages that cannot be done with only HTML and CSS. • HTML and CSS are often called markup languages rather than programming languages, because they, at their core, provide markups for documents with very little dynamism. • JavaScript, on the other hand, is a dynamic programming language that supports Math calculations, allows you to dynamically add HTML contents to the DOM, creates dynamic style declarations, fetches contents from another website, and lots more.
Java script (JS) How to Use JavaScript in HTML Just like with CSS, JavaScript can be used in HTML in various ways 1. Inline JavaScript you have the JavaScript code in HTML tags in some special JS-based attributes. For example, HTML tags have event attributes that allow you to execute some code inline when an event is triggered. Here's what I mean: <button onclick="alert('You just clicked a button’)”> Click me! </button>
JS How to Use JavaScript in HTML 2. Internal JavaScript, with the script tag Just like the style tag for style declarations within an HTML page, the script tag exists for JavaScript. Here's how it's used: <script> function(){ alert("I am inside a script tag") } </script>
JS 3. External JavaScript You may want to have your JavaScript code in a different file. External JavaScript allows this. For such uses-cases, here's how it's done: <!-- index.html --> <script src="./script.js"> </script> // script.js alert("I am inside an external file"); The src attribute of the script tag allows you to apply a source for the JavaScript code. That reference is important because it notifies the browser to also fetch the content of script.js. script.js can be in the same directory with index.html, or it can be gotten from another website. For the latter, you'll need to pass the full URL (https://.../script.js). How to Use JavaScript in HTML
Variable declaration in JS Variables in JavaScript • Variables are containers for values of any data type. They hold values such that when the variables are used, JavaScript uses the value they represent for that operation. • Variables can be declared and can be assigned a value. When you declare a variable, you're doing this: let name; • Here's what it means to assign a value to a variable: let name; name = "JavaScript"; • Declarations and assignments can be done on one line like so: let name = "JavaScript"; name has been declared, but it doesn't have a value yet.
Variable declaration in JS Variables in JavaScript function print() { console.log(name); console.log(age); var name = "JavaScript"; let age = 5; } print(); On calling the print function (print()), the first console.log prints undefined while the second console.log throws an error that it "Cannot access age before initialization". function print() { var name; console.log(name); console.log(age); name = "JavaScript"; let age = 5; } print();
Variable declaration in JS Variables in JavaScript • The var operator. You can declare variables and assign values to them which can be changed later in the code. var name = "JavaScript"; name = "Language"; • The let operator: this is also very similar to var – it declares and assigns values to variables that can be changed later in the code. The major difference between these operators is that var hoists such variables, while let does not hoist
Data types in JS Different types of variable can be identified: • Number (for example, 6, 7, 8.9): on which you can apply arithmetic operations (like addition) and many more • String (like "javascript", 'a long sentence', a short paragraph): anything found between single quotes ('...'), double quotes ("...") and backticks (...). There's no difference between single and double quotes let str = `I am a multiline string`; • Boolean (can only be of two values: true or false): more like yes (true) or no (false) • Array (for example, [1, 2, "hello", false]): a group of data (which can be of any type, including arrays) separated by a comma. Indexing starts from 0. Accessing the content of such a group can be like so: array[0] • Object (for example {name: 'javascript', age: 5}): also a group of data but in the form of a key:value pair. The key has to be a string, and the value can be any type including another object. Accessing the content of the group is done with the key, for example obj.age or obj["age"] will return 5.
Data types in JS • Undefined (the only data this type supports is undefined): This data can be assigned to a variable explicitly, or implicitly (by JavaScript) if a variable has been declared but not assigned a value. Later in this article, we'll look at variable declaration and value assignment. • Null (the only data this type supports is null): Null means there is no value. It holds a value, but not a real value – rather, null. • Function (for example, function(){ console.log("function") }): A function is a data type that invokes a block of code when called. More on functions later in this article.
Comments in JS Comments in JavaScript Just like HTML, sometimes we may want to put a note beside our code which does not need to be executed. We can do this in JavaScript in two ways: • with single-line comments, like this: // a single line comment • or with multi-line comments, like this: /* a multi line comment */
Functions in JS Functions in JavaScript With functions, you can store a block of code that can be used in other places in your code. Say you wanted to print "JavaScript" and "Language" at different places in your code. Instead of doing this:
Naming Conventions in JS 1. Naming Convention for variables: JavaScript variable names are case-sensitive. Lowercase and uppercase letters are distinct. var DogName = 'Scooby-Doo’; var dogName = 'Droopy’; var DOGNAME = 'Odie’; 2. Naming Convention for Booleans When it comes to Boolean variables, we should use is or has as prefixes // bad var bark = false; // bad var ideal = true; // bad var owner = true; // good var isBark = false; // good var areIdeal = true; // good var hasOwner = true;
Naming Conventions in JS 3. Naming Convention for Functions JavaScript function names are also case-sensitive. So, similar to variables, the camel case approach is the recommended way to declare function names. // bad function name(dogName, ownerName) { return '${dogName} ${ownerName}’; } // good function getName(dogName, ownerName) { return '${dogName} ${ownerName}’; }
Naming Conventions in JS 4. Naming Convention for Constants JavaScript constants are also case-sensitive. However, these constants should be written in uppercase var LEG = 4; var TAIL = 1;
Java script Arithmetic Operator Operator Description + Addition - Subtraction * Multiplication ** Exponentiation (ES2016) / Division % Modulus (Remainder) ++ Increment -- Decrement
Java script arithmetic operator Incrementing Let x=5; X++; Decrementing Let x=5; X++; Exponentiation Let x=5; Let z= x**2; let x = 5; let z = Math.pow(x,2);
Java script arithmetic operator Operator Precedence Let x=100+50 *3; Let x= (100+50)*3; Let x=100+50-3;
Java script arithmetic operator // Assign values to x and y let x = 10; let y = 20; // Add x and y and assign the sum to z let z = x + y; console.log(z); Answer = 30
Java script arithmetic operator Answer = 10 // Assign values to x and y let x = 10; let y = 20; // Subtract x from y and assign the difference to z let z = y - x; console.log(z);
Java script arithmetic operator Answer = 10 // Assign values to x and y let x = 10; let y = 20; // Subtract x from y and assign the difference to z let z = y - x; console.log(z);
Java script arithmetic operator Answer = 11 let x = 1 + "1"; console.log(x); typeof x;
Java script arithmetic operator Answer = 100 // Assign values to x and y let x = 20; let y = 5; // Multiply x by y to get the product let z = x * y; console.log(z);
Java script arithmetic operator Answer = 4 // Assign values to x and y let x = 20; let y = 5; // Divide y into x to get the quotient let z = x / y; console.log(z);
Java script arithmetic operator Answer = 0 9 % 3; 10 ** 5; Answer = 10*10*10*10*10= 100000
Assignment operator Operator Example Same As = x = y 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 <<= 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 |= x |= y x = x | y **= x **= y x = x ** y
String Concatenation How to concatenate strings in Java script. There are different ways to do this: The + Operator onst str = 'Hello' + ' ' + 'World'; str; // 'Hello World’ String#concat() JavaScript strings have a built-in concat() method. let text1 = "sea"; let text2 = "food"; let result = text1.concat(text2); let text1 = "Hello"; let text2 = "world!"; let result = text1.concat(" ", text2);
JavaScript Comparison and Logical Operators Operator Description Example == Equal to X==5 === Equal value and equal type X===5 != Not equal X!=3 !== Not equal value or not equal type X!==3 > Greater than X>3 < Less than X<3 >= Greater than or equal X>=5 <= Less than or equal X<=5
Condition statements • Use if to specify a block of code to be executed, if a specified condition is true • Use else to specify a block of code to be executed, if the same condition is false • Use else if to specify a new condition to test, if the first condition is false • Use switch to specify many alternative blocks of code to be executed if (condition) { // block of code to be executed if the condition is true } if (hour < 18) { greeting = "Good day"; }
Condition statements Else-statement if (condition) { // block of code to be executed if the condition is true } else { // block of code to be executed if the condition is false } if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; }
Condition statements Else if statement if (condition1) { // block of code to be executed if condition1 is true } else if (condition2) { // block of code to be executed if the condition1 is false and condition2 is true } else { // block of code to be executed if the condition1 is false and condition2 is false } if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; }
Which editor can be used to write JS? Atom Visual Studio Code Brackets
Break time 20 minutes

Learning space presentation1 learn Java script

  • 1.
  • 2.
    Pseudocode Pseudocode is aninformal way of programming description that does not require any strict programming language syntax or underlying technology considerations. It is used for creating an outline or a rough draft of a program. Pseudocode summarizes a program’s flow, but excludes underlying details. System designers write pseudocode to ensure that programmers understand a software project's requirements and align code accordingly. Pseudocode is not an actual programming language.
  • 3.
    The benefit ofPseudocode • Pseudocode is understood by the programmers of all types. It enables the programmer to concentrate only on the algorithm part of the code development. • Improves the readability of any approach. It’s one of the best approaches to start implementation of an algorithm. • Acts as a bridge between the program and the algorithm or flowchart. Also works as a rough documentation, so the program of one developer can be understood easily when a pseudo code is written out. In industries, the approach of documentation is essential. • The main goal of a pseudo code is to explain what exactly each line of a program should do, hence making the code construction phase easier for the programmer.
  • 4.
    How to writePsuedo code 1. Arrange the sequence of tasks and write the pseudocode accordingly. 2. Start with the statement of a pseudo code which establishes the main goal or the aim. EX: 3. The way the if-else, for, while loops are indented in a program, indent the statements likewise, as it helps to comprehend the decision control and execution mechanism. They also improve the readability to a great extent.
  • 5.
    Java script (JS) •JavaScript is a dynamic programming language that's used for web development, in web applications, for game development, and lots more. It allows you to implement dynamic features on web pages that cannot be done with only HTML and CSS. • HTML and CSS are often called markup languages rather than programming languages, because they, at their core, provide markups for documents with very little dynamism. • JavaScript, on the other hand, is a dynamic programming language that supports Math calculations, allows you to dynamically add HTML contents to the DOM, creates dynamic style declarations, fetches contents from another website, and lots more.
  • 6.
    Java script (JS) Howto Use JavaScript in HTML Just like with CSS, JavaScript can be used in HTML in various ways 1. Inline JavaScript you have the JavaScript code in HTML tags in some special JS-based attributes. For example, HTML tags have event attributes that allow you to execute some code inline when an event is triggered. Here's what I mean: <button onclick="alert('You just clicked a button’)”> Click me! </button>
  • 7.
    JS How to UseJavaScript in HTML 2. Internal JavaScript, with the script tag Just like the style tag for style declarations within an HTML page, the script tag exists for JavaScript. Here's how it's used: <script> function(){ alert("I am inside a script tag") } </script>
  • 8.
    JS 3. External JavaScript Youmay want to have your JavaScript code in a different file. External JavaScript allows this. For such uses-cases, here's how it's done: <!-- index.html --> <script src="./script.js"> </script> // script.js alert("I am inside an external file"); The src attribute of the script tag allows you to apply a source for the JavaScript code. That reference is important because it notifies the browser to also fetch the content of script.js. script.js can be in the same directory with index.html, or it can be gotten from another website. For the latter, you'll need to pass the full URL (https://.../script.js). How to Use JavaScript in HTML
  • 9.
    Variable declaration inJS Variables in JavaScript • Variables are containers for values of any data type. They hold values such that when the variables are used, JavaScript uses the value they represent for that operation. • Variables can be declared and can be assigned a value. When you declare a variable, you're doing this: let name; • Here's what it means to assign a value to a variable: let name; name = "JavaScript"; • Declarations and assignments can be done on one line like so: let name = "JavaScript"; name has been declared, but it doesn't have a value yet.
  • 10.
    Variable declaration inJS Variables in JavaScript function print() { console.log(name); console.log(age); var name = "JavaScript"; let age = 5; } print(); On calling the print function (print()), the first console.log prints undefined while the second console.log throws an error that it "Cannot access age before initialization". function print() { var name; console.log(name); console.log(age); name = "JavaScript"; let age = 5; } print();
  • 11.
    Variable declaration inJS Variables in JavaScript • The var operator. You can declare variables and assign values to them which can be changed later in the code. var name = "JavaScript"; name = "Language"; • The let operator: this is also very similar to var – it declares and assigns values to variables that can be changed later in the code. The major difference between these operators is that var hoists such variables, while let does not hoist
  • 12.
    Data types inJS Different types of variable can be identified: • Number (for example, 6, 7, 8.9): on which you can apply arithmetic operations (like addition) and many more • String (like "javascript", 'a long sentence', a short paragraph): anything found between single quotes ('...'), double quotes ("...") and backticks (...). There's no difference between single and double quotes let str = `I am a multiline string`; • Boolean (can only be of two values: true or false): more like yes (true) or no (false) • Array (for example, [1, 2, "hello", false]): a group of data (which can be of any type, including arrays) separated by a comma. Indexing starts from 0. Accessing the content of such a group can be like so: array[0] • Object (for example {name: 'javascript', age: 5}): also a group of data but in the form of a key:value pair. The key has to be a string, and the value can be any type including another object. Accessing the content of the group is done with the key, for example obj.age or obj["age"] will return 5.
  • 13.
    Data types inJS • Undefined (the only data this type supports is undefined): This data can be assigned to a variable explicitly, or implicitly (by JavaScript) if a variable has been declared but not assigned a value. Later in this article, we'll look at variable declaration and value assignment. • Null (the only data this type supports is null): Null means there is no value. It holds a value, but not a real value – rather, null. • Function (for example, function(){ console.log("function") }): A function is a data type that invokes a block of code when called. More on functions later in this article.
  • 14.
    Comments in JS Commentsin JavaScript Just like HTML, sometimes we may want to put a note beside our code which does not need to be executed. We can do this in JavaScript in two ways: • with single-line comments, like this: // a single line comment • or with multi-line comments, like this: /* a multi line comment */
  • 15.
    Functions in JS Functionsin JavaScript With functions, you can store a block of code that can be used in other places in your code. Say you wanted to print "JavaScript" and "Language" at different places in your code. Instead of doing this:
  • 16.
    Naming Conventions inJS 1. Naming Convention for variables: JavaScript variable names are case-sensitive. Lowercase and uppercase letters are distinct. var DogName = 'Scooby-Doo’; var dogName = 'Droopy’; var DOGNAME = 'Odie’; 2. Naming Convention for Booleans When it comes to Boolean variables, we should use is or has as prefixes // bad var bark = false; // bad var ideal = true; // bad var owner = true; // good var isBark = false; // good var areIdeal = true; // good var hasOwner = true;
  • 17.
    Naming Conventions inJS 3. Naming Convention for Functions JavaScript function names are also case-sensitive. So, similar to variables, the camel case approach is the recommended way to declare function names. // bad function name(dogName, ownerName) { return '${dogName} ${ownerName}’; } // good function getName(dogName, ownerName) { return '${dogName} ${ownerName}’; }
  • 18.
    Naming Conventions inJS 4. Naming Convention for Constants JavaScript constants are also case-sensitive. However, these constants should be written in uppercase var LEG = 4; var TAIL = 1;
  • 19.
    Java script ArithmeticOperator Operator Description + Addition - Subtraction * Multiplication ** Exponentiation (ES2016) / Division % Modulus (Remainder) ++ Increment -- Decrement
  • 20.
    Java script arithmeticoperator Incrementing Let x=5; X++; Decrementing Let x=5; X++; Exponentiation Let x=5; Let z= x**2; let x = 5; let z = Math.pow(x,2);
  • 21.
    Java script arithmeticoperator Operator Precedence Let x=100+50 *3; Let x= (100+50)*3; Let x=100+50-3;
  • 22.
    Java script arithmeticoperator // Assign values to x and y let x = 10; let y = 20; // Add x and y and assign the sum to z let z = x + y; console.log(z); Answer = 30
  • 23.
    Java script arithmeticoperator Answer = 10 // Assign values to x and y let x = 10; let y = 20; // Subtract x from y and assign the difference to z let z = y - x; console.log(z);
  • 24.
    Java script arithmeticoperator Answer = 10 // Assign values to x and y let x = 10; let y = 20; // Subtract x from y and assign the difference to z let z = y - x; console.log(z);
  • 25.
    Java script arithmeticoperator Answer = 11 let x = 1 + "1"; console.log(x); typeof x;
  • 26.
    Java script arithmeticoperator Answer = 100 // Assign values to x and y let x = 20; let y = 5; // Multiply x by y to get the product let z = x * y; console.log(z);
  • 27.
    Java script arithmeticoperator Answer = 4 // Assign values to x and y let x = 20; let y = 5; // Divide y into x to get the quotient let z = x / y; console.log(z);
  • 28.
    Java script arithmeticoperator Answer = 0 9 % 3; 10 ** 5; Answer = 10*10*10*10*10= 100000
  • 29.
    Assignment operator Operator ExampleSame As = x = y 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 <<= 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 |= x |= y x = x | y **= x **= y x = x ** y
  • 30.
    String Concatenation How toconcatenate strings in Java script. There are different ways to do this: The + Operator onst str = 'Hello' + ' ' + 'World'; str; // 'Hello World’ String#concat() JavaScript strings have a built-in concat() method. let text1 = "sea"; let text2 = "food"; let result = text1.concat(text2); let text1 = "Hello"; let text2 = "world!"; let result = text1.concat(" ", text2);
  • 31.
    JavaScript Comparison andLogical Operators Operator Description Example == Equal to X==5 === Equal value and equal type X===5 != Not equal X!=3 !== Not equal value or not equal type X!==3 > Greater than X>3 < Less than X<3 >= Greater than or equal X>=5 <= Less than or equal X<=5
  • 32.
    Condition statements • Useif to specify a block of code to be executed, if a specified condition is true • Use else to specify a block of code to be executed, if the same condition is false • Use else if to specify a new condition to test, if the first condition is false • Use switch to specify many alternative blocks of code to be executed if (condition) { // block of code to be executed if the condition is true } if (hour < 18) { greeting = "Good day"; }
  • 33.
    Condition statements Else-statement if (condition){ // block of code to be executed if the condition is true } else { // block of code to be executed if the condition is false } if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; }
  • 34.
    Condition statements Else ifstatement if (condition1) { // block of code to be executed if condition1 is true } else if (condition2) { // block of code to be executed if the condition1 is false and condition2 is true } else { // block of code to be executed if the condition1 is false and condition2 is false } if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; }
  • 35.
    Which editor canbe used to write JS? Atom Visual Studio Code Brackets
  • 36.