Scribd Logo
Upload

Welcome to Scribd!

  • 7 views

    Lesson 15 Introduction To JavaScripts

    Uploaded by

    mkhwanazimbali889
    Coding

    Copyright:

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

    Lesson 15 Introduction To JavaScripts

    Uploaded by

    mkhwanazimbali889
    7 views13 pages
    Coding

    Original Title

    Lesson 15 Introduction to JavaScripts

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Coding

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    7 views13 pages

    Lesson 15 Introduction To JavaScripts

    Uploaded by

    mkhwanazimbali889
    Coding

    Copyright:

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

    Lesson 15

    Topic: JavaScript Where To

    Objectives:
     learn about JavaScript
    o <script> tag
    o JS Output
    o JavaScript Statements

    Outcomes:
     Knowledge on the basic JS concepts

    Notes:

    The <script> Tag


    In HTML, JavaScript code is inserted
    between <script> and </script> tags.

    JavaScript Functions and Events


    A JavaScript function is a block of JavaScript code, that can be
    executed when "called" for.
    For example, a function can be called when an event occurs,
    like when the user clicks a button.

    JavaScript in <head> or <body>


    You can place any number of scripts in an HTML document.
    Scripts can be placed in the <body>, or in the <head> section
    of an HTML page, or in both.

    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:
    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:

    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 a <script> tag:

    You can place an external script reference


    in <head> or <body> as you like.
    The script will behave as if it was located exactly where
    the <script> tag is located.
    External scripts cannot contain <script> tags.

    External JavaScript Advantages


    Placing scripts 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
    To add several script files to one page - use several script tags:

    External References
    An external script can be referenced in 3 different ways:
     With a full URL (a full web address)
     With a file path (like /js/)
     Without any path
    This example uses a full URL to link to myScript.js:

    <script src="https://www.Youtube.com/js/
    myScript.js"></script>

    This example uses a file path to link to myScript.js:

    This example uses no path to link to myScript.js:

    JavaScript Output
    JavaScript Display Possibilities
    JavaScript can "display" data in different ways:
     Writing into an HTML element, using innerHTML.
     Writing into the HTML output using document.write().
     Writing into an alert box, using window.alert().
     Writing into the browser console, using console.log().
    ________________________________________________________________

    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:

    Changing the innerHTML property of an HTML element is a common way to


    display data in HTML.

    Using document.write()
    For testing purposes, it is convenient to use document.write():
    Using document.write() after an HTML document is loaded, will delete all
    existing HTML:

    The document.write() method should only be used for testing.


    Using window.alert()
    You can use an alert box to display data:

    You can skip the window keyword.


    In JavaScript, the window object is the global scope object. This
    means that variables, properties, and methods by default
    belong to the window object. This also means that specifying
    the window keyword is optional:
    Using console.log()
    For debugging purposes, you can call the console.log() method
    in the browser to display data.

    JavaScript Print
    JavaScript does not have any print object or print methods.
    You cannot access output devices from JavaScript.
    The only exception is that you can call
    the window.print() method in the browser to print the content
    of the current window.
    JavaScript Statements

    JavaScript Programs
    A computer program is a list of "instructions" to be
    "executed" by a computer.
    In a programming language, these programming instructions
    are called statements.
    A JavaScript program is a list of programming statements.
    In HTML, JavaScript programs are executed by the web browser.

    JavaScript Statements
    JavaScript statements are composed of:
    Values, Operators, Expressions, Keywords, and Comments.
    This statement tells the browser to write "Hello Dolly." inside an
    HTML element with id="demo":

    Most JavaScript programs contain many JavaScript statements.


    The statements are executed, one by one, in the same order as
    they are written. JavaScript programs (and JavaScript statements) are
    often called JavaScript code.
    Semicolons ;
    Semicolons separate JavaScript statements.
    Add a semicolon at the end of each executable statement:

    When separated by semicolons, multiple statements on one


    line are allowed:

    On the web, you might see examples without semicolons.


    Ending statements with semicolon is not required, but highly recommended.

    JavaScript White Space


    JavaScript ignores multiple spaces. You can add white space to
    your script to make it more readable.
    The following lines are equivalent:

    A good practice is to put spaces around operators ( = + - * / ):


    JavaScript Line Length and Line Breaks
    For best readability, programmers often like to avoid code lines
    longer than 80 characters.
    If a JavaScript statement does not fit on one line, the best place
    to break it is after an operator:

    JavaScript Code Blocks


    JavaScript statements can be grouped together in code blocks,
    inside curly brackets {...}.
    The purpose of code blocks is to define statements to be
    executed together.
    One place you will find statements grouped together in blocks,
    is in JavaScript functions:
    JavaScript Keywords
    JavaScript statements often start with a keyword to identify
    the JavaScript action to be performed.
    Our Reserved Words Reference lists all JavaScript keywords.
    Here is a list of some of the keywords you will learn about in
    this tutorial:

    JavaScript keywords are reserved words. Reserved words cannot be used as


    names for variables.

    --------------------------------------END OF
    LESSON----------------------------------------------

    You might also like