Tallaght Campus

Department of Computing

Javascript Introduction

  1. Programming

    Programming with Javascript

    Programming

    • What is a computer program?
    • What is a programming language?
    • What is a scripting language?

    Concepts

    • What are the two conceptual aspects of a program?
    • What concrete constructs correspond to the two conceptual aspects of a program?

    Input/output

    • How does a computer program communicate with its environment (users, machines, other programs)?
    • What are a Web application's input and output with respect to the end-user?

  2. Learning to Program (with Javascript)

    Learning to Program (with Javascript)

    • Learning to program is an infinite feedback loop involving understanding and practice: practice, practice, practice, work hard to understand, then again practice, practice, practice. Like with any language of any kind, it takes time and effort to acquire automatic understanding and become fluent.
    • Class work alone is not enough
    • The outcomes of successfully learning to program:
      • the knowledge of
        • a basic set of syntactic and semantic rules and how to apply them
        • what tools are available and how to use them
        • where to find required constructs and libraries and how to search reference material
      • the skill to
        • abstract real-world things into data and algorithms (design)
        • translate the abstractions into a programming language
      • the patience to
        • persist through many iterations of testing, debugging, correction and improvement of code
        • work through documentation and lack thereof to successfully integrate third-party elements into your code

  3. How does Javascript work?

    How does Javascript work?

    • Javascript code is part of Web content, which is expressed using HTML, CSS and Javascript.
    • It resides either in an HTML file or in a Javascript file that can be included in HTML (like external CSS).
    • Javascript is an imperative language that allows us to define behaviour. By contrast, HTML and CSS are declarative languages that focus on the desired end result (leaving any required actions to the browser).
    • Javascript is interpreted (runs) in a browser. It is also in the browser the the effects of the instructions come about.
    • There is more information about Javascript as a client-side Web scripting language here (section Client-Side-Generated Dynamic Content).

  4. Tools for Developing in Javascript

    Tools for Developing in Javascript

    To develop client-side code for the WWW in Javascript you will not need many tools and most of them will already be installed on your computer:

    • A text editor (MS Visual Studio Code is recommended for this module)
    • A browser (Chrome or Firefox are recommended for this module), which provides:
      • rendering functionality for displaying and user-testing created content
      • browser developer tools
        • to open these in the browser, press key F12 or key combination Ctrl-Shift-i
        • of particular interest when developing in Javascript are
          • the Javascript console
            • to open, click the Console tab of the developer tools or press key combination Ctrl-Shift-k (Firefox only)
            • used by the Javascript interpreter inside the browser to communicate (info, warning and error messages)
            • can run Javascript code interactively (you type in an instruction and it is interpreted immediately)
          • the debugger
            • to open, click the Debugger (Firefox) or Sources (Chrome) tab of the developer tools
            • use the Sources (Firefox) or Page (Chrome) panel to navigate through the file system and open files
            • breakpoints can be set by clicking to the left of line numbers and execution controlled with the run/pause, step over, step in and step out arrows
    • Linting tools

      A linting tool checks the style, syntax and semantics of code. You will find an online Javascript linter here.

    • Reference material and tutorials

  5. Comments

    Comments

    As in other programming languages, Javascript allows for comments to be included with code. These are ignored by the Javascript interpreter. Comments can be placed to the right of the symbol combination // or between symbol combinations /* and */. Examples: 

    3 + 4 // this is a comment beside the code '3 + 4'
/* this is a multi-line
comment, possible when using
the slash-star notation */

  6. Standard Javascript

    Standard Javascript

    • Javascript is standardised by Ecma International and its standard version is called ECMAScript.
    • Standard Javascript has many rules that interpreters by default do not enforce.
    • Javascript code will be interpreted strictly if preceded by the instruction
      'use strict;'
    • Strict mode is not available in the console.
    • The alternative to strict mode is non-strict mode (or, informally, sloppy mode).
    • Strict mode constructs will be introduced throughout the module but for the moment we will look at semicolons:

      In strict mode, instructions must be followed by a semicolon, e.g.

      alert("Hello from strict!");

      In non-strict (sloppy) mode, the semicolon is not required, e.g.

      alert("Hello from sloppy!")

    • In this module we do not insist on the semicolons, but if you use them all the better.

  7. Elements of the Javascript Language