Internet Fundamentals/JavaScript

JavaScript, often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. This lesson introduces JavaScript and uses it to create and manipulate canvas graphics.

JavaScript logo

Objectives and Skills

Objectives and skills for this lesson include:

• Analyse the requirements for web documents
  • Determine the necessary dynamic functionality of the web document
  • Determine the appropriate language to achieve that functionality
  • Determine the web document requirements
• Design and produce web documents
  • Design the web document, and embedded scripts to achieve the required functionality
  • Write a simple hypertext markup language (HTML), considering accessibility
  • Write embedded scripts
• Test the scripts and debug
  • Test the web document against the required functionality, and reiterate until correct
  • Complete the documentation and submit it to the appropriate person for their approval

Readings

1. Wikipedia: JavaScript
2. Wikipedia: JavaScript syntax
3. Wikipedia: Canvas element

Multimedia

1. YouTube: JavaScript Introduction
2. YouTube: JavaScript Statements
3. YouTube: JavaScript Variables
4. YouTube: HTML5 Canvas Tag Tutorial Learn to Draw and Animate Using Javascript

Student Presentations

1. YouTube: JavaScript

Examples

To test the following examples, copy the code and paste it in the body of an HTML file and view the file in a browser, or use a JavaScript test environment such as W3Schools: Tryit Editor.

document.getElementById()

document.getElementById() returns a reference to an element based on its ID.

<p id="text"></p>

<script>
  document.getElementById("text").innerHTML = "Hello Wikiversity!";
</script>

Date()

Date() creates a JavaScript Date object for the current date and time according to system settings.

<p id="text"></p>

<script>
  document.getElementById("text").innerHTML = Date();
</script>

Canvas

The <canvas> element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images.

<canvas id="example" width="360" height="240">
  This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

Canvas Text

JavaScript is used to draw text on a canvas.

<canvas id="example" width="360" height="240">
  This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

<script>
  var example = document.getElementById("example");
  var context = example.getContext("2d");

  // Set stroke and fill to blue
  context.strokeStyle = "blue";
  context.fillStyle = "blue";

  // Select font, alignment, draw text, and fill characters
  context.font = "36px sans-serif";
  context.textAlign="center";
  context.strokeText("HTML5 Canvas", 160, 50);
  context.fillText("HTML5 Canvas", 160, 50);
</script>

Canvas Lines

JavaScript is used to draw lines on a canvas.

<canvas id="example" width="360" height="240">
  This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

<script>
  var example = document.getElementById("example");
  var context = example.getContext("2d");

  // Draw a line, width 4
  context.lineWidth = 4;
  context.moveTo(30, 65);
  context.lineTo(290, 65);
  context.stroke();
</script>

Canvas Circle

JavaScript is used to draw shapes on a canvas.

<canvas id="example" width="360" height="240">
  This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

<script>
  var example = document.getElementById("example");
  var context = example.getContext("2d");

  // Draw a red circle, radius 35
  context.beginPath();
  context.fillStyle = 'red';
  context.arc(60, 140, 35, 0, 2 * Math.PI, false);
  context.fill();
  context.closePath();
</script>

Canvas Square

JavaScript is used to draw shapes on a canvas.

<canvas id="example" width="360" height="240">
  This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

<script>
  var example = document.getElementById("example");
  var context = example.getContext("2d");

  // Draw a green square, side 70
  context.beginPath();
  context.fillStyle = 'green';
  context.fillRect(130, 105, 70, 70);
  context.closePath();
</script>

Canvas Triangle

JavaScript is used to draw shapes on a canvas.

<canvas id="example" width="360" height="240">
  This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

<script>
  var example = document.getElementById("example");
  var context = example.getContext("2d");

  // Draw a blue triangle
  context.beginPath();
  context.fillStyle = 'blue';
  context.beginPath();
  context.moveTo(270, 105);
  context.lineTo(235, 175);
  context.lineTo(310, 175);
  context.fill();
  context.closePath();
</script>

Activities

1. Complete one or more of the following tutorials:
   • Mozilla: JavaScript Basics
   • TutorialsPoint: JavaScript
   • Codecademy: Introduction to JavaScript
   • W3Schools: JavaScript Tutorial
   • GitHub: JavaScript 101
2. Display text.
   • Review CodeMaven: JavaScript Hello World. Follow the example but use a paragraph tag rather than a div tag, and display Hello <name>!, replacing <name> with your name.
3. Display the current date and time.
   • Review W3Schools: JavaScript Dates. Use the Date() function to display the current date and time on a web page.
4. Use the HTML5 canvas.
   • Review W3Schools: HTML5 Canvas Intro. Experiment with the TutorialsPoint: Web Canvas Demo.
   • Review W3Schools: HTML5 Canvas. Add a canvas drawing using JavaScript to the web page you created in the previous lesson.

Lesson Summary

• JavaScript, often abbreviated as JS, is a high-level, interpreted programming language.
• Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content engineering. It is used to make webpages interactive and provide online programs, including video games.
• Although there are strong outward similarities between JavaScript and Java, including language name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design.
• All modern Web browsers support JavaScript with built-in interpreters.
• The most common use of JavaScript is to add client-side behavior to HTML pages, also known as Dynamic HTML (DHTML).
• Scripts are embedded in or included from HTML pages and interact with the Document Object Model (DOM) of the page. Some simple examples of this usage are:
  • Loading new page content or submitting data to the server via Ajax without reloading the page (for example, a social network might allow the user to post status updates without leaving the page).
  • Animation of page elements, fading them in and out, resizing them, moving them, etc.
  • Interactive content, for example games, and playing audio and video.
  • Validating input values of a Web form to make sure that they are acceptable before being submitted to the server.
  • Transmitting information about the user's reading habits and browsing activities to various websites. Web pages frequently do this for Web analytics, ad tracking, personalization or other purposes.
• JavaScript and the DOM provide the potential for malicious authors to deliver scripts to run on a client computer via the Web.
• Browsers contain security risks using two restrictions:
  • First, scripts run in a sandbox in which they can only perform Web-related actions, not general-purpose programming tasks like creating files.
  • Second, scripts are constrained by the same-origin policy: scripts from one Web site do not have access to information such as usernames, passwords, or cookies sent to another site.
  • Most JavaScript-related security bugs are breaches of either the same origin policy or the sandbox.
• Developers of client-server applications must recognize that untrusted clients may be under the control of attackers. Some implications are:
  • Web site authors cannot perfectly conceal how their JavaScript operates because the raw source code must be sent to the client.
  • JavaScript form validation only provides convenience for users, not security.
  • Scripts can be selectively disabled, so JavaScript can't be relied on to prevent operations such as right-clicking on an image to save it.
  • It is extremely bad practice to embed sensitive information such as passwords in JavaScript because it can be extracted by an attacker.
• Script debuggers are integrated within Internet Explorer, Firefox, Safari, Google Chrome, Opera and Node.js.
• JavaScript is case sensitive and typically follows a camelCase naming convention.
• JavaScript comments are indicated with either // for single-line comments or /* */ for block comments.
• Variables in standard JavaScript have no type attached, and any value can be stored in any variable.
• The <canvas> element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images.

Key Terms

AJAX

A set of Web development techniques using many Web technologies on the client side to create asynchronous Web applications using JavaScript.

cross-site scripting (XSS)

A type of computer security vulnerability typically found in web applications which enables attackers to inject client-side scripts into web pages viewed by other users.

Document Object Model (DOM)

A cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document.

ECMAScript

A trademarked scripting-language specification created to standardize JavaScript, so as to foster multiple independent implementations.

JavaScript engine

A program or interpreter which executes JavaScript code.

jQuery

A cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

JSON

An open-standard file format that uses human-readable text to transmit data objects consisting of attribute–value pairs and array data types.

same-origin policy

A web application security model in which a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin.

syntax

The set of rules that defines the combinations of symbols that are considered to be a correctly structured document or fragment in that programming language.

WebAssembly (wasm, WA)

A web standard that defines a binary format and a corresponding assembly-like text format for executable code in Web pages.

Assessments

• Flashcards: Quizlet: Fundamental JavaScript Concepts
• JavaScript Flashcards: Basic Programming Principles
• Quiz: Quizlet: Fundamental JavaScript Concepts

See Also

• JavaScript
• Wikibooks: JavaScript
• WebPageFX: Bouncing a Ball Around with HTML5 and JavaScript
• Mozilla: 2D Breakout Game Pure JavaScript
• Microsoft: JavaScript Fundamentals for Absolute Beginners
• Flavio Copes: The HTML Canvas Guide

References

← Web Accessibility

Internet Fundamentals

Databases →