JavaScript: The Basics

Size: px

Start display at page:

Download "JavaScript: The Basics"

Melanie Anthony
6 years ago
Views:

1 JavaScript: The Basics CISC 282 October 4, 2017 JavaScript A programming language "Lightweight" and versatile Not universally respected Appreciated in the web domain Adds programmatic functionality to webpages Dynamically alters the page Handles interaction with the user e.g., responds to events, validates input Not really related to Java Somewhat similar syntax JavaScript is much more relaxed 2

2 JavaScript Implements the ECMAScript standard Produced by the ECMA An "industry association" Develops standards such as "Office Open XML Formats" Created at Netscape IE's version was called JScript until recently Some minor browser variations Runs client-side in the browser Loaded with the webpage Along with HTML and CSS No other communication required with the server 3 JavaScript Near-universally supported version: 5 th edition Finalized in 2009 Currently widely supported version: 6 th edition Otherwise known as ECMAScript 2015 Not supported in IE10; imperfect support in IE11 Improvements: Constants Variables with block scope Default values for function parameters Object-oriented class definitions and more We ll focus on the 5 th with a little from the 6 th 4

3 Java vs. JavaScript Aspect Java JavaScript Type Compiled Interpreted Variables Typed Untyped Declared Declared or undeclared Errors Exceptions Generally ignored Design Focus Objects Functions 5 Linking to HTML Explicit embedding JavaScript code lives in the HTML file Problematic Does not separate content and behaviour Can cause XHTML validation errors Can't be used in multiple files Implicit embedding JavaScript code lives in a separate file Linked to HTML file using <script> tag <script src= path ></script> Include type= text/javascript for XHTML 6

4 Fundamental Types Type String Examples "in double quotes", 'in single quotes', Number 12, 2.15, 0.3,... Boolean Array true, false [ 1, 3, 5, 7, 11, 13], function function helloworld() {...} null undefined null undefined 7 Number Represents both reals and integers Basic operators +,, *, / and % Division may produce a real e.g., 10 / 4 = 2.5 Expressions evaluated in a typical manner Brackets first, etc. Operators with assignment ++,, +=, =, *= and /= 8

5 Number Constants Number.MIN_VALUE and Number.MAX_VALUE Smallest and largest values permitted Number.NEGATIVE_INFINITY Number.POSITIVE_INFINITY Also known as Infinity Number.NaN "Not a number" Result of an invalid expression e.g., 10 / "Hello world!" NaN 9 Math Global object provided by Javascript Offers useful properties & functions e.g., Math.PI Function Math.min(x,y) Math.max(x,y) Return Value The minimum/maximum of the two parameters Math.random() A random-ish value in [0,1) Math.floor(x) Math.ceil(x) The integer resulting from rounding down/up 10

6 Variables Loosely typed Can store values of any variety (unlike Java) Declaration is not necessary but it is highly recommended May cause problems if you don't Can use var or let More on these later Names must begin with a letter or underscore Names may also include digits 11 Strings Can enclose in double quotes "like this" Use \" for the double-quote character Can enclose in single quotes 'like this' Use \' for the apostrophe character Other special characters Backslash: \\ Newline: \n Tab: \t There is no Character type in JavaScript Even a single character is a String Individual characters are indexed from 0 12

7 Strings Concatenate with the + operator Not the same as addition for numbers Converts other types into Strings as needed e.g., " is the answer" "6 is the answer" parseint(...) and parsefloat(...) convert Strings to Numbers Return NaN if parameter is invalid Each String has a.length property Much like arrays in Java e.g., "hello".length 5 13 Some String Functions Function charat(anindex) indexof(astring) substring(start,end) tolowercase() touppercase() Return Value Individual character at the given index Index of first occurrence of astring; -1 if non present Characters between the given indices Copy of the string with all lower/uppercase letters 14

8 For Loops for(initialvalue; condition; operation) {... } Can declare a variable in initialvalue or not for(var i = 10; i > 0; i ) {... } or var i = 1; for(i = 10; i > 0; i ) {... } 15

JavaScript CS 4640 Programming Languages for Web Applications

JavaScript CS 4640 Programming Languages for Web Applications 1 How HTML, CSS, and JS Fit Together {css} javascript() Content layer The HTML gives the page structure and adds semantics Presentation