Scribd Logo
Upload

Welcome to Scribd!

  • Mirpur University of Science and Technology: Deparment Software Engineering

    Uploaded by

    ahsan
    11 views17 pages

    Original Title

    Lecture 11

    Copyright

    © © All Rights Reserved

    Available Formats

    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 PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views17 pages

    Mirpur University of Science and Technology: Deparment Software Engineering

    Uploaded by

    ahsan

    Copyright:

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

    MIRPUR UNIVERSITY OF SCIENCE AND TECHNOLOGY

    DEPARMENT OF SOFTWARE ENGINEERING


    Client-side Scripting – JavaScript
    (lecture # 11)

    Engr. Muhammad Raees


    (Lecturer)

    Date: April 23, 2020


    LECTURE CONTENTS

    • JavaScript
    • Language Basics, Variables, operators, input, output, functions, conditions, loops
    • Dialog boxes in JavaScript
    • HTML Document Object Model (DOM)

    Web Design & Development 3


    JavaScript

    • A client-side scripting (and interpreted) language for interactivity with HTML pages
    • It is used in Web to improve the design, validate forms, create cookies, and much more
    • There is a free license for JavaScript and it is the most popular scripting language on
    the internet, and works in all major browsers, such as Internet Explorer, Mozilla,
    Firefox, Netscape, Opera
    • There are two methods to embed JavaScript in to HTML code
    • Internal Script
    • Directly written in HTML code
    • External Script
    • Written in separate file
    • <script> tag is used to tell the browser that a script follows

    Web Design & Development


    Internal Scripts
    • The <SCRIPT> tag is used to embed JavaScript code in HTML documents
    • JavaScript can be placed anywhere between <HTML> and </HTML> tags
    • Two possibilities are the
    • <HEAD>…</HEAD>
    • <BODY>…</BODY>

    • <HTML>
    • <HEAD><TITLE>Using Multiple scripts</TITLE>
    • <SCRIPT LANGUAGE="JavaScript">
    • [JavaScript statements...]
    <H1>This is another script</H1>
    • </SCRIPT>
    <SCRIPT LANGUAGE="JavaScript">
    • <SCRIPT LANGUAGE="JavaScript">
    [JavaScript statements...]
    • [JavaScript statements...] </SCRIPT>
    • </SCRIPT> </BODY></HTML>
    • </HEAD>
    • <BODY>

    Web Design & Development 5


    External Scripts

    • SRC attribute of the <SCRIPT> is used to include the external JavaScript file in
    HTML
    • <script src="myscripts.js"> </script>

    • Program that execute on client side ,by the web browser instead of server side
    • Upon request, the necessary files are sent to the user's computer by the web server
    on which they reside.
    • Allow for interactivity by immediately responding to user actions.
    • Execute quickly because they don't require a trip to the server.

    Web Design & Development 6


    Conventions

    • Using the Semicolon


    • document.write("Hello");
    • Case Sensitivity
    • Comments:
    • single line //
    • Multiple lines /* */
    • Using Quotes
    • Quotes
    • document.write(“<font color=“red”>Hello World</font>”)
    • document.write(“<font color=‘red’>Hello World</font>”)

    7
    Web Design & Development
    Variables and Operators
    • Variables
    • There are four common data types in JavaScript
    • Numbers, strings, Boolean, null values
    • JavaScript is a loosely typed language
    • The word “var” is used to declare a variable
    • var LastName = “Smith”; var AccountNumber = 1111
    • First character can not be a digit
    • Other characters may be digits, letters or underscore
    • Operators
    • Assignment Operator: =
    • Arithmetic Operators: +, - , *, /, %, ++, --
    • Logical Operators: &&, ||, !
    • Comparison Operators: ==, ===, !=, !==, <, >, <=, >=
    8
    Web Design & Development
    Functions, Input and Output
    • Functions are defined using the keyword function, followed by the name of the
    function and list of parameters
    • function functionName([parameters])
    •{
    • [statements]
    •}
    • Some common predefined
    • Calling a function math functions
    • functionName([arguments]) Math.sqrt
    Math.pow
    Math.abs
    • write(); is used to write on browser Math.max
    • document.write(“hello world”) Math.min
    Math.floor
    • prompt(); is used to take input from users Math.ceil
    • var num = prompt(“Please Enter a Number”, 0) Math.round
    Math.random
    9
    Web Design & Development
    Conditions and Loops
    • For loop
    • If statement
    • for(var i=1; i<10; i++)
    • if(condition)
    • {
    • { statements }
    • Document.write(“hello world”)
    • If-else statement
    • }
    • if(condition)
    • While loop (do while)
    • {statement}
    • While(condition)
    • else
    •{
    • {statements}
    • }

    10
    Web Design & Development
    JavaScript Dialogs
    • JavaScript provides the ability to pickup user input or display small amounts of text to the
    user by using dialog boxes
    • An alert box is simply a small message box that pops up and gives the user some
    information
    • Used to give a warning message to the users
    • When an alert box pops up, the user will have to click "OK" to proceed
    • Syntax:
    • alert(“message”)
    • A prompt box is often used if you want the user to input a value before entering a page
    • User will have to click either "OK" or "Cancel" to proceed after entering an input
    value
    • A confirm box is often used if you want the user to verify or accept something
    • User will have to click either "OK" or "Cancel" to proceed
    11
    Web Design & Development
    Dialogs

    Web Design & Development 12


    Window Object

    • Main entry point to all client-side JS features and APIs


    • Represents a web browser window or frame
    • Referred to with the identifier window
    • It is the global object, and can be omitted
    • Defines properties like:
    • location (URL currently displayed)
    • Ex: window.location = ”http://medtech.tn/”
    • navigates to the website of the institute
    • alert() : displays a message in a dialog box
    • setTimeout(): registers a function to be invoked after a specific amount of
    time
    • document: represents the content displayed in the window

    Web Design & Development 13


    Document Object Model – DOM

    • Once html element are rendered in the browser window, browser can not
    recognize them, JavaScript enabled browsers do this using DOM
    • The HTML DOM is a standard object model and programming interface for
    HTML.
    • All HTML elements, along with their properties, methods and events can be
    accessed through the DOM
    • The HTML DOM is a standard for how to get, change, add, or delete HTML
    elements.

    Web Design & Development 14


    DOM
    • The HTML DOM can be thought of as a hierarchy moving from the most general
    object to the most specific
    Window

    Navigator Document History Location

    Forms[ ] Images[] links[] anchors[]


    Array of forms Array of images Array of links Array of anchors
    element of
    Element[ ]

    Textboxes

    select list
    buttons
    Array of

    Options[]
    forms

    Reset
    files

    li

    15
    Web Design & Development
    References

    • Chapter 11, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett,


    Wiley Publishing; 2009, ISBN: 978-0-470-54070-1.

    Web Design & Development 16


    THANKS

    You might also like