Chat-ipad

Sleeping

File size: 14,417 Bytes

b5d0134


-------- Page 1 (JavaScript Basics-01.jpg) ---------
University of Tripoli
Faculty of Information Technology

Department of Software Engineering

JavaScript Basics

Introduction to Internet Programming
ITGS 226 -- F2023

By: Fatima Ben Lashihar

-------- Page 2 (JavaScript Basics-02.jpg) ---------
INTRODUCTION

• JavaScript is the most popular and widely used client-side scripting language.

• JavaScript is designed to add interactivity and dynamic effects to the web pages by manipulating the content returned from a web server.

• JavaScript is an object-oriented language, and it also has some similarities in syntax to Java programming language. But, JavaScript is not related to Java in any way.

-------- Page 3 (JavaScript Basics-03.jpg) ---------
What can do with Javascript

• Modify the content of a web page by adding or removing elements
(Example)

• Change the style and position of the elements on a web page
(Example)

• Monitor events like mouse click, hover, etc. and react to it (Example)

• Create alert pop-ups to display info or warning messages to the user
(Example)

• Validate user inputs before submitting it to the server (Example)

3

-------- Page 4 (JavaScript Basics-04.jpg) ---------
ADDING JAVASCRIPT TO WEB PAGES

• There are typically three ways to add JavaScript to a web page:
  1. Embedding (internal) the JavaScript code between a pair
     of <script> and </script> tag.
  2. Creating an external JavaScript file with the .js extension
     and then load it within the page through the src attribute
     of the <script> tag.
  3. Placing the JavaScript code directly inside an HTML tag
     using the special tag attributes such
     as onclick, onmouseover, onkeypress, onload, etc.

4

-------- Page 5 (JavaScript Basics-05.jpg) ---------
EMBEDDING THE JAVASCRIPT CODE

• Embedding the JavaScript code directly within web pages by
  placing it between the <script> and </script> tags.

• The <script> tag indicates the browser that the contained
  statements are to be interpreted as executable script and not
  HTML (Example1)   (Example2).

<body>
    <script>
        var greet = "Hello World!";
        document.write(greet);     // Prints: Hello World!
    </script>
</body>

-------- Page 6 (JavaScript Basics-06.jpg) ---------
CALLING AN EXTERNAL JAVASCRIPT FILE

• Placing JavaScript code into a separate file with a (.js) extension, and then call that file in your document through the src attribute of the <script> tag, like this:

<script src="js/hello.js"></script>     (Example)

• This is useful if aiming to have the same scripts available to multiple documents.

-------- Page 7 (JavaScript Basics-07.jpg) ---------
PLACING THE JAVASCRIPT CODE INLINE

• Placing JavaScript code inline by inserting it directly inside the HTML tag using the special tag attributes such as onclick, onmouseover, onkeypress, onload, etc.

    <body>
        <button type= "button" onclick="alert('Hello World!')">
            Click Me
        </button>
    </body>

• Always keep the content and structure of web page (i.e. HTML) separate out from presentation (CSS), and behavior (JavaScript).

7

-------- Page 8 (JavaScript Basics-08.jpg) ---------
POSITIONING OF SCRIPT INSIDE HTML DOCUMENT

• The <script> element can be placed in the <head>, or <body> section of an HTML document. But ideally, scripts should be placed at the end of the body section, just before the closing </body> tag, it will make your web pages load faster, since it prevents obstruction of initial page rendering.

8

-------- Page 9 (JavaScript Basics-09.jpg) ---------
JAVASCRIPT SYNTAX

• JavaScript is case-sensitive. This means that variables,
  language keywords, function names, and other identifiers
  must always be typed with a consistent capitalization of
  letters.

-------- Page 10 (JavaScript Basics-10.jpg) ---------
JAVASCRIPT DATA TYPES

• There are six basic data types in JavaScript :
  • Primary data types
    • String: let b=“Ali”  or  ‘ Ali ’ ;
    • Number: let b = 80.5;
    • Boolean: let isReading = true;
  • Composite data types
    • Object: let car = { modal: "BMW X3", color: "white", doors: 5 }
    • Array: let colors = ["Red", "Yellow", "Green", "Orange"];
    • Function: let greeting = function(){ return "Hello World!"; }
• special data types  Example
  • Undefined: let S;
  • Null: let Z=Null;

10

-------- Page 11 (JavaScript Basics-11.jpg) ---------
JAVASCRIPT COMMENTS

• A comment is simply a line of text that is completely ignored
  by the JavaScript interpreter.

• JavaScript support single-line as well as multi-line comments.
  • Single-line comments begin with a double forward slash
    (//), followed by the comment text.
  • multi-line comment begins with a slash and an asterisk (/*)
    and ends with an asterisk and slash (*/).

11

-------- Page 12 (JavaScript Basics-12.jpg) ---------
JAVASCRIPT VARIABLES

• Create a variable with the let keyword, whereas the assignment operator (=) is used to assign value to a variable, like this:
      let varName = value, var1Name= value1,…;
• In JavaScript, if a variable has been declared, but has not been assigned a value explicitly, is automatically assigned the value undefined.
• Rules for naming a JavaScript variable:
   • A variable name must start with a letter, or underscore, or dollar sign.
   • A variable name cannot start with a number.
   • A variable name can only contain alpha-numeric characters (A-z, 0-9) and underscores.
   • A variable name cannot contain spaces.
   • A variable name cannot be a JavaScript reserved word.

• What about var and const?!

12

-------- Page 13 (JavaScript Basics-13.jpg) ---------
JAVASCRIPT GENERATING OUTPUT

• Displaying Output in Alert Dialog Boxes: An alert dialog box is created using the alert() method.
    alert("Hello World!");  // Outputs: Hello World!

• Writing Output to the Browser Window: the document.write() method can be used to write the content to the current document only while that document is being parsed.
    document.write("Hello World!");  // Prints: Hello World!

• Using document.write() after an HTML document is loaded, will delete all existing HTML (Example)

13

-------- Page 14 (JavaScript Basics-14.jpg) ---------
JAVASCRIPT GENERATING OUTPUT

• Inserting Output Inside an HTML Element: insert output inside an
  HTML element using the element's innerHTML property. However,
  first select the element using a method such as getElementById()

Let x = 10;
let y = 20;
let sum = x + y;
Document.getElementById("result").innerHTML =
sum;

• For debugging purposes, you can call the console.log() method in
  the browser to display data (Example)

14

-------- Page 15 (JavaScript Basics-15.jpg) ---------
JAVASCRIPT EVENTS

• An event is something that happens when user interact with the web page, such as when he clicked a link or button, moved the mouse pointer, submits a form, etc.

• The names for event handlers always begin with the word "on", so an event handler for the click event is called onclick, similarly an event handler for the load event is called onload, event handler for the blur event is called onblur, and so on.

• The events can be categorized into four main groups:
  • Mouse Events
  • Keyboard Events
  • Form Events
  • Document/Window Events.

15

-------- Page 16 (JavaScript Basics-16.jpg) ---------
MOUSE EVENTS

• The Click Event (onclick): occurs when a user clicks on an element on a web page. A click event can be handled with an onclick event handler (Example)

• The Mouseover Event (onmouseover) : occurs when a user moves the mouse pointer over an element. (Example)

16

-------- Page 17 (JavaScript Basics-17.jpg) ---------
FORM EVENTS

• The Focus Event (onfocus): The focus event occurs when the user gives focus to an element on a web page (Example)

• The Blur Event (onblur): The blur event occurs when the user takes the focus away from a form element or a window (Example)

• The Change Event (onchange): The change event occurs when a user changes the value of a form element (Example)

• The Submit Event (onsubmit): The submit event only occurs when the user submits a form on a web page. (Example)

17

-------- Page 18 (JavaScript Basics-18.jpg) ---------
DOCUMENT/WINDOW EVENTS

• The Load Event (onload): The load event occurs when a web
  page has finished loading in the web browser (Example)

• The Unload Event (onunload): The unload event occurs when
  a user leaves the current web page (Example)

18

-------- Page 19 (JavaScript Basics-19.jpg) ---------
JAVASCRIPT CONDITIONAL STATEMENTS

• There are several conditional statements in JavaScript:

  • The if statement

  • The if...else statement

  • The if...else if....else statement

  • The switch...case statement

19

-------- Page 20 (JavaScript Basics-20.jpg) ---------
JAVASCRIPT LOOPS       EX

• JavaScript supports five different types of loops:

  • while — loops through a block of code as long as the condition
    specified evaluates to true.

  • do…while — loops through a block of code once; then the
    condition is evaluated. If the condition is true, the statement is
    repeated as long as the specified condition is true.

  • for — loops through a block of code until the counter reaches a
    specified number.

  • for…in — loops through the properties of an object.

  • for…of — loops over iterable objects such as arrays, strings, etc.

-------- Page 21 (JavaScript Basics-21.jpg) ---------
THE DOCUMENT OBJECT MODEL

• The Document Object Model (DOM) is a platform and language independent model to represent the HTML documents.

• DOM defines the logical structure of the documents and the way in which they can be accessed and manipulated by an application program.

• In the DOM, all parts of the document, such as elements, attributes, text, etc. are organized in a hierarchical tree-like structure.

21

-------- Page 22 (JavaScript Basics-22.jpg) ---------
HTML DOM(Document Object Model)

Nodes

Document
<html>

<head>
<title>
My Page

<body>
<h1>
Mobile OS

<ul>
<li>
Android
<li>
iOS

-------- Page 23 (JavaScript Basics-23.jpg) ---------
JAVASCRIPT DOM SELECTORS

• Selecting the Topmost Elements: The topmost elements in an HTML
  document are available directly as document properties.
  • For example:
    • the <html> element can be accessed
      with document.documentElement property. EX
    • the <head> element can be accessed
      with document.head property EX
    • the <body> element can be accessed
      with document.body property. EX

• Selecting Elements by ID: the easiest way to find an HTML element
  in the DOM tree is select an element based on its unique ID with
  the getElementById() method.
  • The getElementById() method will return the element as an
    object if the matching element was found, or null if no matching
    element was found in the document.
                                                                 23

-------- Page 24 (JavaScript Basics-24.jpg) ---------
JAVASCRIPT DOM SELECTORS

• Selecting Elements by Class Name: the getElementsByClassName() method is used to select all the elements having specific class names. EX
  • This method returns an array-like object of all child elements which have all of the given class names.

• Selecting Elements by Tag Name: select HTML elements by tag name using the getElementsByTagName() method. EX
  • This method also returns an array-like object of all child elements with the given tag name.

24

-------- Page 25 (JavaScript Basics-25.jpg) ---------
JAVASCRIPT DOM STYLING

• Setting Inline Styles on Elements: the style property is used to get or set the inline style of an element. EX

25

-------- Page 26 (JavaScript Basics-26.jpg) ---------
JAVASCRIPT DOM GET SET ATTRIBUTES

•  getAttribute() method: is used to get the current value of a attribute on the element (Example)

•  setAttribute() method: is used to set an attribute on the specified element. If the attribute already exists on the element, the value is updated; otherwise a new attribute is added with the specified name and value (Example)

•  removeAttribute() method: is used to remove an attribute from the specified element (Example)

26

-------- Page 27 (JavaScript Basics-27.jpg) ---------
GETTING/SETTING HTML CONTENTS TO DOM

•   The innerHTML property:  this property sets or gets the HTML
    markup contained within the element i.e. content between its
    opening and closing tags. EX

•   The innerHTML property replaces all existing content of an
    element.

27

-------- Page 28 (JavaScript Basics-28.jpg) ---------
JAVASCRIPT FORM VALIDATION

• Client-side validation is faster because validation occurs within
  the user's web browser, whereas server-side validation occurs
  on the server, which require user's input to be first submitted
  and sent to the server before validation occurs, also user has
  to wait for server response to know what exactly went wrong.

• The form validation process typically consists of two parts:
  • The Required Fields Validation: is performed to make sure
    that all the mandatory fields are filled in.
  • The Data Format Validation: is performed to ensure that
    the type and format of the data entered in the form is valid.

28

-------- Page 29 (JavaScript Basics-29.jpg) ---------
JAVASCRIPT FORM VALIDATION

• The value of an individual form field can be accessed and
  retrieved using the syntax
        document.formName.fieldName.value

or

        document.getElementsByName(name).value.


Good Example at the following link:
https://www.tutorialrepublic.com/codelab.php?topic=javascript&file=form-validation


Other useful examples:
https://www.tutorialrepublic.com/javascript-examples.php

29

-------- Page 30 (JavaScript Basics-30.jpg) ---------
THE END


30