Welcome to JavaScript Course with Sultan Muhammad Essa 514


Content

                                                    

                                                        
  • JavaScript Introduction page (1) code line (45)
    • 
                                                        
  • WhereTo page (2) code line (62)
    • 
                                                        
  • Output page (3) code line (177)
    • 
                                                        
  • JavaScript Syntax page (4) code line (293)
    • 
                                                        
  • JavaScript Comment page (5) code line (340)
    • 
                                                        
  • JavaScript Variable page (6) code line (389)
    • 
                                                        
  • JavaScript Operators page (7) code line (480)
    • 
                                                        
  • JavaScript Arithmetic Operators page (8) code line (811)
    • 
                                                        
  • JavaScript Assignment Operators page (9) code line (951)
    • 
                                                        
    • 
                                                        
    •



    1

    JavaScript Introduction



    JavaScript is the most popular programming language in the world.
    JavaScript is the programming language of HTML and the Web.
    Programming makes computers do what you want them to do.
    JavaScript is easy to learn.

  • java script can change html content
  • java script can change html Attribute
  • java script can change html Style CSS



    • 2

    Note:please remove the space from closing tag(body) at bottom of examples.

    The <"script"> Tag

    In HTML, JavaScript code must be inserted between <"script"> and <"/script"> tags.



    Example:=: 

    
    <script>
    document.getElementById("demo").innerHTML = "My First JavaScript";
    </script>


    JavaScript in <"head">

    In this example, a JavaScript function is placed in the <"head"> section of an HTML page. The function is invoked (called) when a button is clicked:



    Example <!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </head> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> </ body> </html>

    JavaScript in <"body">

    In this example, a JavaScript function is placed in the <"body"> section of an HTML page.
    The function is invoked (called) when a button is clicked:

    <!DOCTYPE html> <html> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </ body> </html>

    External JavaScript

    Scripts can also be placed in external files. External scripts are practical when the same
    code is used in many different web pages. JavaScript files have the file extension .js. To use an external script, put the name of the script
    file in the src (source) attribute of the <"script"> tag:

    <!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </ body> </html>

    External JavaScript Advantages

    Placing JavaScripts in external files has some advantages:
  • It separates HTML and code
  • It makes HTML and JavaScript easier to read and maintain
  • Cached JavaScript files can speed up page loads



    • 3

    Note:please remove the space from closing tag(body) at bottom of examples.

    JavaScript Output


    JavaScript Display Possibilities

    JavaScript can "display" data in different ways:



    Using window.alert()

    You can use an alert box to display data:


    Example: <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> window.alert("Can you want to learn JavaScript"); </script> </body > </html>

    Using document.write()

    For testing purposes, it is convenient to use document.write()::



    Example: <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> document.write(5 + 6); </script> </body > </html>

    Using innerHTML

    To access an HTML element, JavaScript can use the document.getElementById(id) method.
    The id attribute defines the HTML element. The innerHTML property defines the HTML content:



    Example:: <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My First Paragraph</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 5 + 6; </script> </body > </html>

    Using console.log()

    In your browser, you can use the console.log() method to display data.
    Activate the browser console with F12, and select "Console" in the menu.



    Example: <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> console.log(1 + 6); </script> </body > </html>

    4

    Note:please remove the space from closing tag(body) at bottom of examples.



    JavaScript Syntax




    JavaScript Programs



    A computer program is a list of "instructions" to be "executed" by the computer.
    In a programming language, these program instructions are called statements. JavaScript is a programming language. JavaScript
    statements are separated by semicolons.



    Example: var x = 5; var y = 6; var z = x + y;

    JavaScript Statements

    JavaScript statements are composed of: Values, Operators, Expressions, Keywords, and Comments.



    JavaScript Values

    The JavaScript syntax defines two types of values: Fixed values and variable values. Fixed values are called literals. Variable values are called variables.

    JavaScript Literals

    The most important rules for writing fixed values are:
    Numbers are written with or without decimals:


    example of numbers:
    7,14,12


    Strings are text, written within double or single quotes:

    Example of String

    "Sultan"

    "Muhammad"


    5

    Note:please remove the space from closing tag(body) at bottom of examples.

    JavaScript Comments

    avaScript comments can be used to explain JavaScript code, and to make it more readable.
    JavaScript comments can also be used to prevent execution, when testing alternative code.



    Single Line Comments

    Single line comments start with //. Any text between // and the end of the line, will be ignored by JavaScript (will not be executed).
    This example uses a single line comment before each line, to explain the code:

    Example:
    // Change heading: document.getElementById("myH").innerHTML = "My First Page"; // Change paragraph: document.getElementById("myP").innerHTML = "My first paragraph.";

    Multi-line Comments

    Multi-line comments start with /* and end with */. Any text between /* and */ will be ignored by JavaScript. This example uses a multi-line comment (a comment block) to explain the code:

    Example:
    /* The code below will change the heading with id = "myH" and the paragraph with id = "myP" in my web page: */ document.getElementById("myH").innerHTML = "My First Page"; document.getElementById("myP").innerHTML = "My first paragraph.";




    6

    Note:please remove the space from closing tag(body) at bottom of examples.



    JavaScript Variables


    JavaScript variables are containers for storing data values. In this example, x, y, and z, are variables:

    There are theee type of variable such as:
  • Let
  • Const
  • Var ::ab sa phala wala variable(var ha)



    • Example:
    var x = 5; var y = 6; var z = x + y;

    From the example above, you can expect:
  • x stores the value 5
  • y stores the value 6
  • z stores the value 11



    • Data Types


    There are two types of data types such as

  • primitive data type
  • non primitive data type



    • Primitive Data Type


    there are five types of primitive data type Such as

  • String
  • Number
  • Booleans
  • undefine
  • null


    • String



    A string can be any text inside double or single quotes like "sultan" sultan is a string


    Example of String:

  • "Sultan"
  • "Muhammad"
  • "Essa"


    • Number



    Example:

  • 1
  • 51
  • 7



    • Booleans


    Boleans which basically means they can be true or false ,on or off and close or open etc .


  • True
  • False


    • undefine

    A variable that has not been assigned a value



    Example::

  • let a;


    • Null

    'Null' is a keyword in JavaScript that signifies 'no value' or nonexistence of any value.



    Example:

    let a=null;

    Primitive Data Type



    Such a data which is not easily changed, means data is changed in difficult way
    There are two tyes of primitive data type
  • Array
  • Object



    • Array



    An array is a special variable, which can hold more than one value at a time. The Syntax of array is different from object An array is start from square brackets.



    Example:
    let arry(variable name which u want)=["Sultan","Muhammad","Essa"] Note:for more detail please visit portion.

    Object



    An object is a special variable which can hold more than one value at a time.The syntax of array is different from array object is start with curly brackets



    Example:
    let obj={ Fname:"Sultan" Mname:"Muhammad" Lname:"Essa-514" }




    7

    Note:please remove the space from closing tag(body) at bottom of examples.



    JavaScript Operators



    JavaScript Arithmetic Operators



    Arithmetic operators are used to perform arithmetic on numbers (literals or variables).



    operator Description
    + Addition
    - subtraction
    * multiplication
    / division
    % modulus
    ++ increment
    -- decrement


    Addition operator:


    The addition operator (+) adds numbers



    Example:
    var x = 5; var y = 2; var z = x + y;

    Subtraction operator:


    The subtraction operator (-) subtract numbers.



    Example:
    var x = 5; var y = 2; var z = x - y;

    Multiplication operator:


    The multiplication operator (*) multiplies numbers.



    Example:
    var x = 5; var y = 2; var z = x * y;

    Divide operator:


    The divide operator (/) divide numbers.



    Example:
    var x = 5; var y = 2; var z = x / y;

    increment operator:


    The increment operator (++) increment number.



    Example:
    var x = 1; var y = 7; var z =++x;

    decrement operator:


    The decrement operator (--) decrement number.



    Example:
    var x = 3; var y = 7; var z =--x;

    JavaScript Assignment Operators



    Assignment operators assign values to JavaScript variables.



    Opreators 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


    Assignment operator(=)



    The assignment operator (=) assigns a value to a variable.



    Example:
    var x=7;

    addition assignment operator (+=)



    The addition assignment operator (+=) adds a value to a variable.



    Example:
    var x = 10; x += 5;

    Subtraction assignment operator (-=)



    The Subtraction assignment operator (-=) Subtract a value to a variable.



    Example:
    var x = 10; x -= 5;

    Multplication assignment operator (*=)



    The Multiplication assignment operator (*=) Multiply a value to a variable.



    Example:
    var x = 7; x *= 2;

    Division assignment operator (/=)



    The Division assignment operator (/=) Divide a value to a variable.



    Example:
    var x = 7; x /= 6;

    JavaScript String Operators



    The + operator can also be used to add (concatenate) strings.



    Example:

    txt1 = "Sultan";
    txt2 = "Muhammad";
    txt3 = txt1 + " " + txt2;

    The result of txt3 will be:

    Sultan Muhammad

    Adding Strings and Numbers



    Adding two numbers, will return the sum, but adding a number and a string will return a string:



    Example:

    x = 2 + 5;
    y = "5" + 5;
    z = "Sultan" + 5;

    The result of x, y, and z will be:
    7
    55
    Sultan

    JavaScript Comparison and Logical Operators



    Operators Description
    == 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
    ? Ternatry operator


    8

    Note:please remove the space from closing tag(body) at bottom of examples.



    JavaScript Arithmetic



    JavaScript Arithmetic Operators



    Arithmetic operators perform arithmetic on numbers (literals or variables).



    Operator Description
    + Addition
    - Subtraction
    * Multiplication
    / Division
    % Modulus
    ++ Increment
    -- Decrement


    Operators and Operands



    The numbers (in an arithmetic operation) are called operands. The operation (to be performed between the two operands) is defined by an operator.



    operand operator operand
    12 * 14


    Adding operator



    The addition operator (+) adds numbers:



    Example:
    var x = 5;
    var y = 2;
    var z = x + y;

    Subtraction operator



    The subtraction operator (-) subtracts numbers.



    Example:
    var x = 5;
    var y = 2;
    var z = x - y;

    Multiplication operator



    The multiplication operator (*) multiplies numbers.



    Example:
    var x = 5;
    var y = 2;
    var z = x * y;

    Division operator



    The division operator (/) divides numbers.



    Example:
    var x = 5;
    var y = 2;
    var z = x / y;

    Modular operator



    The modular operator (%) returns the division remainder.



    Example:
    var x = 5;
    var y = 2;
    var z = x % y;

    Increment operator



    The increment operator (++) increments numbers.



    Example:
    var x = 5;
    x++;
    var z = x;

    Decrement operator



    The decrement operator (--) decrements numbers.



    Example:
    var x = 5;
    x--;
    var z = x;



    9

    Note:please remove the space from closing tag(body) at bottom of examples.



    JavaScript Assignment Operators



    Assignment operators assign values to JavaScript variables.



    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


    = Assignment operator



    The = assignment operator assigns a value to a variable.



    Example:

    var a=10; let b=5;

    += Assignment operator



    The += assignment operator adds a value to a variable.



    Example:
    var x=10; x+=5;


    -= Assignment operator



    The -= assignment operator subtracts a value from a variable.



    Exxample:
    var x=10; x-=5;


    *= Assignment operator



    The *= assignment operator multiplies a variable.



    Example:
    var x=10; x*=5;

    /= Assignment operator




    The /= assignment divides a variable



    Example:
    var x=10; var x=5;

    %= Assignment operator



    The %= assignment operator assigns a remainder to a variable.



    Example:
    var x=10; x%=5;

    ^= Assignment operator




    The *= assignment operator multiplies a variable



    Example:

    var d=10; d+=2;

    alam jamal kamal hanger alam janam


    Assignment



    The *= assignment operator multiplies a variable.


    this is heading



    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel reprehenderit quod suscipit odit!



    Example:
    var x= 10;