Scribd Logo
Upload

Welcome to Scribd!

  • SE 1 (Web Development Course) : Section 5

    Uploaded by

    مصطفى فتحي أحمد أبوالعزم
    6 views21 pages
    This document provides an overview of JavaScript, including what it is, where JavaScript code can be written, how JavaScript outputs results, JavaScript data types, arrays, objects, JSON, loops, conditions, and functions. It defines JavaScript as a high-level programming language that adds interactivity to web pages and can run on browsers and servers. It explains the different ways to write JavaScript code in HTML documents or external files and the various methods for outputting results. It also covers fundamental JavaScript concepts like variables, strings, numbers, arrays, objects, and functions.

    Original Description:

    ffff

    Original Title

    SE1 Section 5

    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
    This document provides an overview of JavaScript, including what it is, where JavaScript code can be written, how JavaScript outputs results, JavaScript data types, arrays, objects, JSON, loops, conditions, and functions. It defines JavaScript as a high-level programming language that adds interactivity to web pages and can run on browsers and servers. It explains the different ways to write JavaScript code in HTML documents or external files and the various methods for outputting results. It also covers fundamental JavaScript concepts like variables, strings, numbers, arrays, objects, and functions.

    Copyright:

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

    SE 1 (Web Development Course) : Section 5

    Uploaded by

    مصطفى فتحي أحمد أبوالعزم
    This document provides an overview of JavaScript, including what it is, where JavaScript code can be written, how JavaScript outputs results, JavaScript data types, arrays, objects, JSON, loops, conditions, and functions. It defines JavaScript as a high-level programming language that adds interactivity to web pages and can run on browsers and servers. It explains the different ways to write JavaScript code in HTML documents or external files and the various methods for outputting results. It also covers fundamental JavaScript concepts like variables, strings, numbers, arrays, objects, and functions.

    Copyright:

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

    SE 1 (Web Development Course)

    Section 5 (JavaScript [1-2])


    What is JavaScript?
    ● High level, interpreted programming language for the web

    ● Adds interaction or changes to your web page

    ● JavaScript and Java are completely different languages, both in concept and
    design

    ● Multi-paradigm (can be written in object oriented or functional)

    ● Runs on the client/browser as well as the server (Node.js)

    ● Also used for mobile (react native) and desktop (Electorn JS) applications

    ● JavaScript is standardized2 by ECMA International


    Where to Write JS?
    1. The <script> Tag

    ○ In HTML, JavaScript code must be inserted between <script> and </script> tags.

    ○ Scripts can be placed in the <head> (example 1), or in the <body> (example 2 )
    section of an HTML page, or in both.
    2. External JavaScript

    ○ Scripts can also be placed in external files with .js ectension (example 3)

    ○ Steps:

    1. Create an external file with .js extension

    2. Link it to your HTML file using <scritp> tag


    JavaScript Output
    ● JavaScript can "display" its output in different ways:
    To open in Chrome: click more > more tools > developers tools
    ○ Writing into an HTML element, using innerHTML.

    ○ Writing into the HTML output using document.write(). (example 1)

    ○ Writing into an alert box, using window.alert(). (example 2)

    ○ Writing into the browser console, using console.log(). (example 3)


    JS Fundamentals
    Variables (1-3)
    ● JavaScript variables are containers for storing data values.
    ● Three ways to define variables: (1) var, (2) let, (3) const 

    ○ var keyword:

    ■ Var variableName;

    ■ Example

    ■ has global scope


    Variables (2-3)
    ● Let & const keywords have block-level scope
    ● The main difference between is:
    ○ let keyword allows to reassign a value but const does not allow that

    ○ Examples
    Variables (3-3)
    ● More on JS scopes: var (global scope) vs let (local scope)

    Vs.
    Data types
    Strings are written with single or double quotes
    ● Primitive data types of JS are string, number, Boolean, null, undefined
    ● Examples
    Data types – more on string
    ● String methods and properties

    Try other functions of string


    JS Arrays
    ● JS arrays are variables that store multiple values
    ● Two ways to create arrays in JS:
    ○ var array_name = [item1, item2, ...]; Item1, item2, … can have any data types
    ○ var array_name = new Array(item1, item2, …);

    ○ Examples

    Try other methods of array


    JS Objects
    ● Objects are variables too that can contain many values.
    ● In JavaScript, Objects vs. Arrays:

    ○ Arrays use numbered indexes.  

    ■ Arrays are a special kind of objects, with numbered indexes.

    ○ Objects use named indexes.
    ● Syntax: Called property

    ○ var objectName = {name:value, name:value, …, funcName: function(){}, … };

    ○ Examples
    JS JSON (1-2)
    ● JSON
    ○ is a format for storing and transporting data (often from a server to a web
    page).

    ■ JSON is a lightweight data interchange format

    ○ stands for JavaScript Object Notation

    ○ is "self-describing" and easy to understand

    ○ * The JSON syntax is derived from JavaScript object notation syntax, but
    the JSON format is text only.
    JS JSON (2-2)
    ● JSON Syntax Rules

    ○ Data is in name/value pairs

    ○ Data is separated by commas

    ○ Curly braces { } hold objects

    ○ Square brackets [ ] hold arrays

    ○ Just know more about JSON


    JS Loops
    ● Loops can execute a block of code a number of times.
    ● JavaScript supports different kinds of loops:

    ○ for - loops through a block of code a number of times

    ■ for/in - loops through the properties of an object

    ■ for/of - loops through the values of an iterable object of an array

    Try ○break
    while& continue
    - loops through a of loops:
    block of code while a specified condition is true
    • The break statement "jumps out" of a loop.
    ■ do/while - also loops through a block of code while a specified condition is true
    • The continue statement "jumps over" one iteration in the loop.
    JS Conditions (1-2)
    ● Conditional statements are used to perform different actions based on different
    conditions
    ● Two ways for conditional statements:

    ○ IF

    ○ SWITCH

    Try multiple conditions using operators ||, && and ternary operator
    JS Conditions (2-2)
    ● Syntax:

    ● Examples
    JS Functions
    ● A JavaScript function is a block of code designed to perform a particular task.

    ○ Target: You can reuse code: Define the code once, and use it many times.
    ● Syntax: using function keyword

    ● Examples
    JavaScript Recourses
    JavaScript Resourses
    ● The two best resources for learning JavaScript are:

    ○ W3Schools (https://www.w3schools.com/js/default.asp)

    ○ MDN (Mozilla Developers Network) is the best resource for JavaScript


    documentation
    (https://developer.mozilla.org/en-US/).
    Thanks

    You might also like