Scribd Logo
Upload

Welcome to Scribd!

  • 4 views

    Chapter 5 - Javascript in HTML

    Uploaded by

    4gcommercialenterprises

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Chapter 5 - Javascript in HTML

    Uploaded by

    4gcommercialenterprises
    4 views19 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    4 views19 pages

    Chapter 5 - Javascript in HTML

    Uploaded by

    4gcommercialenterprises

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 19

    JAVASCRIPT

    IN HTML
    DOCUMENTS
    INTRODUCTION
    TO JAVASCRIPT
    A high-level, dynamic, untyped, and
    interpreted programming language.
    Used to create interactive web pages,
    providing behavior to websites.
    It is an essential part of web technologies
    alongside HTML and CSS.
    Supported by all modern browsers without
    the need for plugins.
    IMPORTANCE OF
    JAVASCRIPT
    Why is JavaScript important?
    It helps add interactive elements to HTML pages
    It is a scripting language which is also a lightweight
    programming language,
    Everyone can use Javascript without needing a
    license.
    It it supported by all major browsers.
    WRITING A BASIC
    JAVASCRIPT
    PROGRAM
    IN THE <HEAD> TAG
    Pros:
    Immediate Access: Scripts are available as soon as the page starts
    loading.
    Control Over Timing: Suitable for scripts that need to run during the
    initial page load (e.g., analytics).
    Cons:
    Render Blocking: Slows down page loading; no content is displayed until
    scripts finish executing.
    Delayed User Experience: The page may take longer to render and
    display visible content.
    Best Use:
    Use for essential scripts, such as tracking/analytics, and when using
    async or defer to prevent blocking.
    IN THE <BODY> TAG
    Pros:
    Faster Page Load: Content loads first, improving perceived performance.
    Non-blocking: Scripts don’t delay the rendering of the page content.
    Better for Dynamic Content: The DOM is fully loaded, ensuring smooth
    interaction with elements.
    Cons:
    Delayed Script Execution: Scripts only run after the entire HTML is
    loaded, which may cause a delay in critical functionalities.
    Best Use:
    Use for non-essential, interactive scripts that manipulate or interact with
    the page content after it’s rendered.
    USING AN EXTERNAL
    JAVASCRIPT FILE
    Separation of Concerns: Keep HTML, CSS, and JavaScript
    in separate files for better organization.
    Reusability: The same JavaScript file can be linked across
    multiple web pages.
    Maintainability: Easier to manage code and debug errors.
    THE OBJECT MODEL IN
    JAVASCRIPT
    The JavaScript Object Model refers to how JavaScript
    represents and manipulates data as objects. An object
    in JavaScript is a collection of key-value pairs, where
    each key (or property) has a corresponding value,
    which can be data or a function (called a method).
    THE OBJECT MODEL IN JAVASCRIPT
    THE OBJECT MODEL IN JAVASCRIPT

    Objects: Collections of related data


    (properties) and actions (methods).
    Properties: Attributes that hold values.
    car.make returns "Toyota".
    Methods: Functions that belong to an object.
    car.start() calls the start method.
    THE OBJECT MODEL IN JAVASCRIPT
    Think of a JavaScript object like a box that holds related
    information and actions about something.

    Imagine a car as an object:


    The car has properties (facts about the car):
    make: "Toyota"
    model: "Corolla"
    year: 2020
    The car can also perform actions (methods):
    start: It starts the engine.
    THE OBJECT MODEL IN JAVASCRIPT
    Think of a JavaScript object as a person's profile on a social
    media account.

    Imagine you have a person object:


    The person has properties (details about them):
    name: "Alice"
    age: 25
    location: "New York"
    The person can perform actions (methods):
    postMessage: They can post a message on their profile.
    likePhoto: They can like a photo.
    RULES FOR WRITING
    JAVASCRIPT PROGRAMS
    Key Rules and Best Practices:
    JavaScript is case-sensitive. Variables and function names must match their
    definitions exactly.
    End every statement with a semicolon (;), though it’s optional in some cases.
    Use var, let, and const to declare variables:
    let and const are block-scoped, while var is function-scoped.
    Comments:
    Single-line comment: // This is a comment
    Multi-line comment: /* This is a multi-line comment */
    NAMING VARIABLES

    Must start with a letter, underscore (_), or


    dollar sign ($).
    Can contain letters, digits, and symbols (_
    and $).

    JAVASCRIPT Case-sensitive: name and Name are


    different.

    VARIABLES BEST PRACTICES


    Use let for variables that change (like
    scores).
    Use const for values that remain the same
    (like fixed game settings).
    Choose clear descriptive name:
    const maxScore = 100;
    JAVASCRIPT
    OPERATORS
    ARITHMETIC OPERATORS
    COMPARISON OPERATORS
    LOGICAL OPERATORS
    STRING OPERATORS

    You might also like