JavaScript

Javascript

----------------------------------

Chapter 1: Basics:  Design a simple button on click of button display “hello javaScript” 

1. What is javaScript: Javascript is the programming language for the web.JavaScript can update and change both html and css.
2. Why to use: Html is to define the content of the web pages and CSS is todefine the layout of the web pages.  Where as JavaScriptis to program thebehavior of the web page.
3. Study how can javascript can change the HTML page:  One of many JavaScript HTML methods is getElementById(). The following example uses the method to "find" an HTML element (with id="demo and changes the element content (innerHtml) to “Hello JavaScript”.

                    Code:

                             

Output:

Where to Use : In HTML, JavaScript code must be inserted between <script> and </script> tags.

Code:

Output:

4.Case sensitive: JavaScript is a case sensitive language. This means that language keywords, variables, and function names, and any other identifiers must always be typed with a consistent capitalization of letters.

Chapter 2: Display Properties:  Display an element value from JavaScript using below properties

1.Get element by id: To access an HTML element, JavaScript can use the document.getElementById(id) method.

2.Inner-html: The innerHTML property defines the HTML content.

Code:

Output:

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

Code:

Output:

4.Console.log: For debugging purposes, you can use the console.log() method to display data.

Code:

Output:

5.Window.alert: You can use an alert box to display data

Code:

Output:

Chapter 3: Statements: use all the below in a simple JavaScript page to display text and words

Identifiers: An identifier is a sequence of characters in the code that identifies a variable, function or property.

1.Literals: display number and string literals

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

Code: Number literals

Output:

Code: string literals

Output:

2.Variables: Declare two variables and display the sum of two variables.

Code:

Output:

3.Expressions: An expression is a combination of values, variables, and operators, which computes to a value.

Code:

Output:

4.Comments:  

a.Single line:Single line comments starts with //.

                               Code:

                                     

Output:

b.Multi line:Multi line comments starts with /* and ends with */  any text between these will won’t display.                       

Chapter 4: Data Types: JavaScript variables can hold many data types like numbers and strings.

1.Numbers: 

Code:

Output:

2.Strings

Code:

Output:

Chapter 5: Operators:  Add two numbers and add two statements.

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

Code:

Output:

2.Assignment Operators : Assignment operators assign values to JavaScript variables

Assignment Operators:

3.String Operators: The + operator can also be used to add (concatenate) strings.

Code:

Output:

4.Comparison Operators: Comparison operators are used in logical statements to determine equality ordifference between variables or values.

Comparison Operators: Given that x=5 the table below explains the comparison operators:

5.Logical Operators: Logical operators are used to determine the logic between variables or values.

Logical Operators: Given that x = 6 and y = 3 the table below explains the logical operators:

Chapter 6: String Methods: Display string length and first and last char

1.String length: This is used to find the length of the string.

Code:

Output:

2.String Index: The indexOf()method returns the index of (the position of) the first occurrence of a specified text in

a string:

Code:

Output:

3.Search for a string in a word: The search() method searches a string for a specified value and returns the position of the match:

Code:

Output:

4.Substring: substring() extracts a part of a string and returns the extracted part in a new string.

Code:

Output:

5.String replace: The replace() method replaces a specified value with another value in a string.

Code: 

Output:

6.String case lowercase and uppercase: These are used to convert lowercase to uppercase vice-versa.

Code:

Output:

7.String trim: The trim() method removes white spaces from both the ends of string.

Code:

Output:

Chapter 7: Array: Take CUP as array and display it properties

Create an array and array elements: Using an array literal is the easiest way to create a JavaScript Array.

           Syntax:

                           Var array_name = [item 1, item 2, ….]

                         There is another way to create an array by using JavaScript new keyword.

                        Syntax:

                              Var array = new array[item 1, item 2,.....]

1.Array Keyword: Arrays are fixed in size once we create an array we can not change the size of an array and it allows a homogeneous data to store.
2.Pop: Removes the last element of an array.
3.Push: Adds an element at the end of an array.
4.Shifting: Removes the first element of an array.
5.Sort: This method is used for sorting of an array elements.

Chapter 8: Function: Write a simple function to display your name in bold and blue color

Function syntax: A JavaScript function is a block of code designed to perform a specific task. A JavaScript function is executed when something invokes it.

Syntax: function name(parameter 1, parameter 2, parameter 3){Code to be execute }

Function parameters: Function parameters are listed inside the parentheses in the function definition.Function Invoke/calls: The code inside the function will execute when something invokes it.Function returns: When JavaScript reaches a return statement, the function will stop executing and returns

the value to the caller.

Code:

Output:

Local variables and global variables:A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.
A global variable has a global scope which means it can be defined anywhere in your JavaScript code.

Chapter 9: Objects: Take computer as object and display all its properties

1. Declare and definition: Objects are variables too. But objects can contain many values.

A JavaScript object is a collection of named values.

                        Syntax:

                           var computer= new computer()

2. Properties and use of properties: The named values, in JavaScript objects, are called properties.

                   Adding new properties

• You can add new properties to an existing object by simply giving it a value.

                        Code:

                  

Output:

Deleting Properties: The delete keyword deletes a property from an object.

Code:

3.Object methods: A method is actually a function definition stored as property value.

Code:

               

Output:

4.this : This keyword represents the current object.

                    Code:

                     \

Output:

5.Date: Display date in 5 different formats
a.Date()

6.Date Methods to get the date: These methods can be used for getting information from a date object

     There are 4 ways to create a new date object

1. new Date(): Creates a new date object with current date and time.

     Code:

                                         

Output:

1. new date(year, month, day, hour, minutes, seconds, milliseconds)  

     Code:

    

Output:

1. new date(milliseconds) 

     Code:

                              

Output:

        

6. Math: The Javascript Math object allows you to perform mathematical tasks on numbers.

                     Code:

            

Output:

• Math.round(x) returns the value of x rounded to the nearest integer.

Code:

Output:

• Math.pow(x , y) returns the value of x to the power of y.
• Math.sqrt(x) returns the square root of x.
• Math.abs(x) returns the absolute(positive) value of x.
• Math.ceil(x) returns the value of x rounded up to the nearest integer.

       Code:

Output:

• Math.floor(x) returns the value of x rounded down to the nearest integer.
• Math.sin(x) returns the sine value of angle x.
• Math.cos(x) returns the cosine value of angle x.
• Math.min() and Math.max() can be used to find the minimum and maximum values from the list of given arguments.
• Math.random() returns a random number between 0 and 1. If we want to display random numbers between any numbers then we should follow the following code.

Code:

                   
Output:

Chapter 10: Events: Implement onblur, onmouseover and on shift key press events in a web form

1. Html Element Events: HTML events are the things that happened to the html elements.

     Some examples of html events are

• An html web page has finished loading.
• An html input field was changed.
• An html button was clicked.                     

2.Mouse Events: The onmousedown event occurs when a user presses a mouse button over an element.
The onmouseup event occurs when a user releases a mouse button over an element.

  Code:

Output:

2.mouseenter and mouseleave: The onmouseenter event occurs when the mouse pointer is

moved onto an element.
The onmouseleave event occurs when the mouse pointer is moved out of an element.

Code:

Output: mouseenter

Output: mouseleave

3.Click Events : Onclick event is used to trigger a function when an element is clicked on.

Code:

Output:

4.Load Events: The onload event occurs when an object has been loaded.

                    Code:

                     

Output:

             

5.Keyboard events: A function is triggered when the user is pressing a key in the input

field.

                    Code:

Output:

6.Keyup: A function is triggered when the user releases a key in the input field. The function transform the character to uppercase.

Code:

       
Output:

Chapter 11: Conditions: Single conditions: Take a variable and assign your first name and check with your surname, first name, last name to check the conditions.
In JavaScript we have the following conditional statements:

1.If: If is used to specify a block of code to be executed, if a specified condition is true.

          Code:

Output:

2.If else: Else is used to specify the code to be executed when if condition fails.

           Code:

               

Output:

3.Else if: This is used to specify a new condition to test, if the first condition is false.

          Code:

                    

Output:

4.Switch: The switch statement is used to perform different actions based on different conditions.

The switch expression is evaluated once.
Case: A switch statement allows a variable to be tested for equality against a list ofvalues. Each

value is called a case.

Break: In switch case, the break statement is used to terminate the switch case.

Default: The default keyword specifies the code to run if there is no case match.

Code:

Output:

Note: If there is no break inside switch case the last case value will be printed.

Code:

Output:

Chapter 12: Loop conditions

1.For loop: Display 10 numbers using for loop

           Code:

                  

Output:

2.While loop: Display Same 10 numbers using for loop

       Code:

                   

Output:

3.Break: break the for loop if the value is 8

           Code:

                   

Output:

            

Chapter 13: Dialog boxes

Alert dialog box: An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up,
the user will have to click "OK" to proceed.

Code:

Output:

2.Confirm dialog box: A confirm box is often used if you want the user to verify or accept something.

When a confirm box pops up, the user will have to

2. click either "OK" or "Cancel" to proceed.

            Code:

        

Output:

3.Prompt dialog box: A prompt box is often used if you want the user to input a value before entering a page.

         Code:

              

Output:

Chapter 14: Error Handling

1. Try : The try statement allows you to define a block of code to be tested for errors while it is being executed. 
2. Catch: The catch block is used to write the error handling code. 
3. Finally: Finally block gets executed even there an error occurred.

Chapter 15: Use External JavaScript files: Download wow slider and use in your html page..

External JavaScript: Scripts can also be placed in external files with .js extension.

Code:

Output:

External reference: The references describe the properties and methods of all JavaScript objects.