Scribd Logo
Upload

Welcome to Scribd!

  • Javascript: Introduction

    Uploaded by

    F1064 Zul Fitri
    5 views42 pages

    Original Title

    Untitled

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views42 pages

    Javascript: Introduction

    Uploaded by

    F1064 Zul Fitri

    Copyright:

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

    JAVASCRIPT

    INTRODUCTION –
    PART 1
    2
    COURSE OUTLINE

    Discover Java scripts basic


    ▸ Define Javascript
    ▸ Embed Javascript in HTML page
    3
    HELLO
    JavaScript
    !Let’s start the concept…
    4
    WHAT IS JAVASCRIPT?

    ▸ JavaScript is a dynamic computer programming


    language.
    ▸ It is lightweight and most commonly used as a part of web
    pages, whose implementations allow client-side script to
    interact with the user and make dynamic pages.
    ▸ It is an interpreted programming language with object-
    oriented capabilities.
    ▸ JavaScript is a lightweight, interpreted programming
    language that allows you to build interactivity into
    otherwise static HTML pages.
    5
    WHAT JAVASCRIPT CAN DO ?

    ▸ JavaScript can dynamically modify an HTML page


    ▸ JavaScript can react to user input
    ▸ JavaScript can validate user input
    ▸ JavaScript can be used to create cookies.
    ▸ JavaScript is a full-featured programming language
    ▸ JavaScript user interaction does not require any
    communication with the server (client side
    scripting language)
    6
    PLACEMENT OF JAVASCRIPT

    ▸ There is a flexibility given to include JavaScript code


    anywhere in an HTML document.
    ▸ However the most preferred ways to include JavaScript in an
    HTML file are as follows:

    ▸ Script in <head>...</head> section.


    ▸ Script in <body>...</body> section.
    ▸ Script in <body>...</body> & <head>...</head> sections.
    ▸ Script in an external file and then include in <head>...</head>
    section.
    7
    JAVASCRIPT CODE EXAMPLE (execute based on
    some event)
    Note:
    If you want to have a script run on
    some event, such as when a user
    clicks you need to have button or
    other JS event and function that will
    call the script
    8
    JAVASCRIPT EXAMPLE.. (document.write)

    Note:
    <!DOCTYPE html> If you need a script to run as the
    <html> page loads so that the script
    <body> generates content in the page, then
    <h2>My First JavaScript</h2> the script goes in the <body> portion
    of the document. In this case, you
    <script> would not have any function defined
    document.write("hello world") using JavaScript. Take a look at the
    </script> following code.

    </body></html>
    9

    Note:
    You can apply both method either alert
    or document.write. The JS code can
    be put anywhere in HTML file
    10
    JAVASCRIPT EXTERNAL FILES

    HTML File .html


    Note:
    To use JavaScript from an
    external file source, you need
    to write all your JavaScript
    source code in a simple text
    file with the extension ".js" and
    then include that file.

    JavaScript File .js


    11
    HOW HTML, CSS AND JAVASCRIPT FIT
    TOGETHER

    HTML CSS JAVASCRIPT

    CONTENT LAYER PRESENTATION LAYER BEHAVIOUR LAYER


    .html files .css files .html files

    This where the content The CSS enhance the This where we can change
    of the page lives. The presentation of HTML page how the page behaves,
    HTML gives the page with rules and state how the adding interactivity. Aim
    structure and add HTML content is presented to keep as much as our
    semantics(meaning) (background, border, box, JavaScript as possible in
    dimension, color, fonts, etc) separate files

    Source : javascriptbook.com
    12
    HOW HTML, CSS AND JAVASCRIPT FIT
    TOGETHER

    HTML HTML + CSS HTML + CSS


    + JAVASCRIPT

    Source : javascriptbook.com
    13
    The HTML Page

    Source : javascriptbook.com
    14
    HTML + CSS

    Source : javascriptbook.com
    15
    HTML + CSS + JAVASCRIPT

    Source : javascriptbook.com
    16 WEB BROWSERS ARE PROGRAMS BUILT USING

    OBJECTS

    More Object Document Type

    https://www.w3schools.com/
    jsref/dom_obj_document.asp
    17

    Some of the document


    object
    18
    EXAMPLE : LAST MODIFIED
    19
    The getEelementById() method

    ▸ The most common way to access an HTML element is to use


    the id of the element.

    ▸ In the example above the getElementById method used


    id="demo" to find the element.
    20
    The innerHTML Property

    ▸ The easiest way to get the content of an element is by using


    the innerHTML property.

    ▸ The innerHTML property is useful for getting or replacing the


    content of HTML elements.
    21
    SUMMARY

    ▸ It is best to keep JavaScript code in its own JavaScript file.


    JavaScript files are text files (like HTML pages and CSS style
    sheets), but they have the .js extension.
    ▸ The HTML <script> element is used in HTML pages to tell the
    browser to load the JavaScript file.
    How to Find and
    access the HTML
    element in HTML
    Page?
    JavaScript HTML DOM Elements
    23
    HOW TO FIND AND ACCESS HTML ELEMENT
    IN A WEB PAGE?

    ▸ Often, with JavaScript, you want to manipulate HTML


    elements.

    ▸ To do so, you have to find the elements first. There are a few
    ways to do this:

    1. Finding HTML elements by id (getElementById)


    2. Finding HTML elements by tag name (getElementByTagName)
    3. Finding HTML elements by class name (getElementByClassName)
    4. Finding HTML elements by CSS selectors (querySelectorAll)
    5. Finding HTML elements by HTML object collections
    24
    getElementsById : EXAMPLE

    Create paragraph with id = intro. Display Hello World in browser

    Print content in paragraph

    Create paragraph with id = demo.

    Declare variable var my Element and


    get value from id = intro (Hello World)

    Print text and value of variable myElement in h4 id


    = demo
    25
    getElementsById : EXPLAINED

    ▸ The getElementById() method returns the element that has the ID


    attribute with the specified value.

    ▸ This method is one of the most common methods in the HTML


    DOM, and is used almost every time you want to manipulate, or get
    info from, an element on your document.

    ▸ Returns null if no elements with the specified ID exists.

    ▸ An ID should be unique within a page. However, if more than one


    element with the specified ID exists, the getElementById() method
    returns the first element in the source code.
    26
    getElementsByTagName : EXAMPLE

    CLICK HERE
    27
    getElementsByTagName : EXPLAINED

    ▸ The getElementsByTagName() method returns a collection of an


    elements's child elements with the specified tag name, as a NodeList
    object.

    ▸ The NodeList object represents a collection of nodes. The nodes can


    be accessed by index numbers. The index starts at 0.

    ▸ Tip: You can use the length property of the NodeList object to
    determine the number of child nodes with the specified tag name,
    then you can loop through all nodes and extract the info you want.

    ▸ Tip: The parametervalue "*" returns all of the element's child


    elements.
    28
    getElementsByClassName : EXAMPLE
    29
    getElementsByClassName : EXPLAINED

    ▸ The getElementsByClassName() method returns a collection


    of all elements in the document with the specified class
    name, as a NodeList object.
    ▸ The NodeList object represents a collection of nodes. The
    nodes can be accessed by index numbers. The index starts at
    0.
    ▸ Tip: You can use the length property of the NodeList object to
    determine the number of elements with a specified class
    name, then you can loop through all elements and extract the
    info you want.
    30
    querySelectorAll : EXAMPLE

    CLICK HERE
    31
    HTML Object Collections

    ▸ The following HTML objects (and object collections):

    ▸ document.anchors
    ▸ document.body
    ▸ document.documentElement
    ▸ document.embeds
    ▸ document.forms (!!)
    ▸ document.head
    ▸ document.images
    ▸ document.links
    ▸ document.scripts
    ▸ document.title
    32
    HTML Object Collections : document.forms
    33
    EXERCISE

    ▸ Exercise 1
    ▸ Exercise 2
    ▸ Exercise 3
    ▸ Exercise 4
    34
    CHANGING HTML

    ▸ Beside using innerHTML, In JavaScript, document.write() can be used to write


    directly to the HTML output stream:

    Output : Output :
    35
    EXAMPLE

    Output :
    36
    EXERCISE

    ▸ EXERCISE 1
    ▸ EXERCISE 2
    ▸ EXERCISE 3
    ▸ EXERCISE 4
    ▸ EXERCISE 5
    37
    CHANGING CSS
    ▸ To change the style of an HTML element, use this syntax:

    Output :
    38
    CHANGING CSS USING EVENT

    ▸ The HTML DOM allows you to execute code when an event


    occurs.
    ▸ Events are generated by the browser when "things happen" to
    HTML elements:

    ▸ An element is clicked on
    ▸ The page has loaded
    ▸ Input fields are changed
    39
    CHANGING CSS USING EVENT

    Before click

    After click

    For all HTML DOM style properties, look at w3school:


    https://www.w3schools.com/jsref/dom_obj_style.asp
    40
    EXERCISE

    ▸ Exercise 1
    ▸ Exercise 2
    ▸ Exercise 3
    ▸ Exercise 4
    ▸ Exercise 5
    41

    THANKS!
    Any questions?
    42
    Credits

    Special thanks to all the people who made and released these
    awesome resources for free:

    ▸ W3School
    ▸ Javascriptbook.com
    ▸ Presentation template by SlidesCarnival
    ▸ Photographs by Startupstockphotos

    You might also like