Scribd Logo
Upload

Welcome to Scribd!

  • Notes of Java Script

    Uploaded by

    Garima Soni
    38 views7 pages
    java script notes are available

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    java script notes are available

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    38 views7 pages

    Notes of Java Script

    Uploaded by

    Garima Soni
    java script notes are available

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    Date

    Introduction
    JavaScript is the programming language of the Web.
    All modern HTML pages are using JavaScript.
    JavaScript is easy to learn.
    This tutorial will teach you JavaScript from basic to advanced.
    Example
    My First JavaScript Example
    Click "Date" to display current day, date, and time.



    Why Study JavaScript?
    JavaScript is one of 3 languages all web developers MUST learn:
    1. HTML to define the content of web pages
    2. CSS to specify the layout of web pages
    3. JavaScript to program the behavior of web pages

    avaScript is the most popular programming language in the world.
    It is the language for HTML, for the Web, for computers, servers, laptops, tablets,
    smart phones, and more.
    This page contains some examples of what JavaScript can do in HTML.
    The method document.getElementById() is one of many methods in the HTML DOM.
    You can use JavaScript to:
    Change HTML elements
    Delete HTML elements
    Create new HTML elements
    Copy and clone HTML elements
    And much more ...
    There are several chapters, about the HTML DOM, later in this tutorial.
    <!DOCTYPE html>
    <html>
    <body>
    <script>
    function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon")) {
    image.src = "pic_bulboff.gif";
    } else {
    image.src = "pic_bulbon.gif";
    }
    }
    </script>

    <img id="myImage" onclick="changeImage()" src="pic_bulboff.gif"
    width="100" height="180">

    <p>Click the light bulb to turn on/off the light</p>

    </body>
    </html>

    JavaScript Events


    HTML events are "things" that happen to HTML elements.
    When JavaScript is used in HTML pages, JavaScript can "react" on these events.
    HTML Events
    An HTML event can be something the browser does, or something a user does.
    Here are some examples of HTML events:
    An HTML web page has finished loading
    An HTML input field was changed
    An HTML button was clicked
    Often, when events happen, you may want to do something.
    JavaScript lets you execute code when events are detected.
    HTML allows event handler attributes, with JavaScript code, to be added to HTML
    elements.
    With single quotes:
    <some-HTML-element some-event='some JavaScript'>
    With double quotes:
    <some-HTML-element some-event="some JavaScript">
    In the following example, an onclick attribute (with code), is added to a button element:
    Example
    <button onclick='getElementById("demo").innerHTML=Date()'>The time
    is?</button>
    Common HTML Events
    Here is a list of some common HTML events:
    Event Description
    onchange An HTML element has been changed
    onclick The user clicks an HTML element
    onmouseover The user moves the mouse over an HTML element
    onmouseout The user moves the mouse away from an HTML element
    onkeydown The user pushes a keyboard key
    onload The browser has finished loading the page

    What can JavaScript Do?
    Event handlers can be used to handle, and verify, user input, user actions, and browser
    actions:
    Things that should be done every time a page loads
    Things that should be done when the page is closed
    Action that should be performed when a user clicks a button
    Content that should be verified when a user input data
    And more ...
    Many different methods can be used to let JavaScript work with events:
    HTML event attributes can execute JavaScript code directly
    HTML event attributes can call JavaScript functions
    You can assign your own event handler functions to HTML elements
    You can prevent events from being sent or being handled

    JavaScript Objects
    Previous
    Next Chapter

    Almost everything in JavaScript can be an Object: Strings, Functions, Arrays, Dates....
    Objects are just data, with added properties and methods.

    Properties and Methods
    Properties are values associated with objects.
    Methods are actions objects can perform.

    A Real Life Object. A Car:
    The properties of the car include name, model, weight, color, etc.
    All cars have these properties, but the property values differ from car to car.
    Object Properties Methods


    car.name = Fiat

    car.model = 500

    car.weight = 850kg

    car.color = white

    car.start()

    car.drive()

    car.brake()
    The methods of the car could be start(), drive(), brake(), etc.
    All cars have these methods, but they are performed at different times.

    In object oriented languages, properties and methods are often called object members.


    JavaScript Objects
    In JavaScript, objects are data (variables), with properties and methods.
    Almost "everything" in JavaScript can be objects. Strings, Dates, Arrays, Functions....
    You can also create your own objects.
    This example creates an object called "person", and adds four properties to it:
    Example
    var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

    Try it Yourself
    Spaces and line breaks are not important. A declaration can span multiple lines:
    var person = {
    firstName:"John",
    lastName :"Doe",
    id :5566
    };
    There are many different ways to create new JavaScript objects.
    You can also add new properties and methods to already existing objects.
    You will learn much more about objects later in this tutorial.

    Accessing Object Properties
    You can access the object properties in two ways:
    Example
    name = person.lastName;
    name = person["lastName"];

    Try it Yourself


    Accessing Object Methods
    You can call a method with the following syntax:
    objectName.methodName()
    This example uses the fullName() method of a person object, to get the full name:
    Example
    name = person.fullName();

    Try it Yourself
    Object methods are just functions defined as object properties.
    You will learn much more about function later in this tutorial.

    You might also like