Javascript - History, Adding to HTML, data types

CS174

Chris Pollett

Apr 4, 2016

Outline

Intro to Javascript
Uses of Javascript
Embedding Javascript in HTML
Quiz
Example HTML Page with Javascript
Assignment, Control, I/O

Javascript

We now want to consider adding dynamic behaviors to our websites as they are interacted with on the client-side. To do this, we will use the Javascript language.

This language was originally developed at Netscape and first appeared in Netscape 2.
The term Javascript is trademarked by Oracle.
It has gone through versions 1.0 to 1.8.5 (code name for interim ECMA standard) and has been standardized as ECMA-262 and ISO-16262. Up to version 1.7 is pretty cross-platform (Safari doesn't currently support 1.8 as of Oct, 2013).
The coolness in 1.8 is support for Python-like generators.
The standardized version is sometimes called ECMAscript (most recent 6); the Microsoft version is sometimes called JScript.
It can be used on both the client and on the server.
We will use it mainly on the client except for a little bit at the end of the semester.
Only the name is similar to Java. Unlike Java:
- It is a loosely rather than strongly type language.
- The object model is simpler
- It is interpreted

Uses of Javascript

To do some of the processing of web pages on the client-side rather than make the server do it. For instance one might want to dynamically change the look of a page without going back to the server.
To perform actions when certain events occur on the client-side. For instance, when a web-page is submitted it could be used to validate the page.
To do simple networking in the background transparently to the user.
It can be often used as a smaller alternative to an old school, non-deprecated, Java applet or to Flash (a compiled variant of Javascript called Actionscript).

Objects in Javascript

Javascript objects are collections of properties.
Each property is either a data property or a method property (a method).
Data properties appear in two categories: primitive values and references to other objects.
We access objects in Javascript by using variables by reference.
All primitive values are accessed directly by value.
There is a root object in Javascript called Object. It is the ancestor through something known as prototype inheritance of all other objects in Javascript.

General Overview

Many details on Javascript can be found at:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
Javascripts can be either directly or indirectly embedded in a document.

Directly:

<script type="text/javascript">
-- code --
</script>

Indirectly:

<script type="text/javascript" src="myscript.js" />

Quiz

Which of the following statements is true?

The command to make a complete copy of all the branches of a git repository is:
```
git checkout url_of_repository
```
Like svn, git commits are numbered sequentially starting at 1.
To ask that an upstream repository on GitHub incorporate some changes that you've made, you can make a pull request.

Lexicon

Identifiers (i.e., names) must begin with a letter, an underscore, or a $ and subsequent characters may be one of these three or numbers.
Javascript has 25 reserved words: break, case, catch, continue, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with.
Javascript has additional keywords which are reserved for future use, as well as predefined words such as alert, open, java, and self.
Javascript supports /*...*/ and // for comments.
Semicolons to end lines in Javascript are optional. Beware:
```
return 
x; // has the effect of just return!
```

Example Javascript and HTML document

<html>
<head><title>test</title>
<meta name="description" value="this example illustrates how Javascripts are executed both when the document is loaded and on the occurrence of events" />
<script type="text/javascript" >
   function sayHello()
   {
      alert("hi there");
   } 
</script>
</head><body><form><input type="button" value="test" onclick="return sayHello();" 
/><!-- responds to events --></form>
<script type="text/javascript" >
for( i = 0; i<100; i++) { 
    document.writeln("<p>hi"+i+"</p>");
} // run when document loads
</script></body>
</html>

Primitives

Javascript has 5 primitive types: Number, String, Boolean, Undefined and Null.
Javascript has predefined objects corresponding to Number, String and Boolean. Each of these is wrappers for a value of the corresponding primitive type.
Javascript will do type coercion between objects of type String and Number.
A number literal can be either a integer or a float. You can use hex for integers. If it is a float it can use scientific notation:
7, 0xff, 0XFF, 7.2, .73, -.23, 7E2, 7e2, 7.2e-2, etc.
A string literal can be delimited either by a single or double quote.
"Hi there", 'hi there', '"', "\n", '\'\\', etc.
There are two Boolean literals: true or false.
The only Null literal is null which can be coerced to false as a Boolean and 0 as an Number.
The only literal of type Undefined is undefined. It can be coerced to false as a Boolean and NaN as a Number.

Variables

The Javascript interpreter determines the type of a variable as needed by the circumstance.
Variables can be declared either by assigning it a value or by explicitly declaring it:
```
var my_variable, pi=3.14;
// explicit declarations effect the scope of the variable
```

Numeric Operators and Objects

Numeric operators in Javascript are similar to Java or C: +, -, *, /, %, ++, --, etc.
The Math object has many useful built-in methods and properties for Number objects.
For example, Math.sin(x), Math.PI, Math.random, Math.abs, etc.
The Number object has a useful collection of Number properties. Number.MIN_VALUE, Number.MAX_VALUE, Number.NaN, etc. It also has the toString method.
For example, x=10; y= x.toString(); z=x.toString(2); //binary representation

Strings and Type Conversion

The + sign is used to concatenate strings.

first = "hello"
second = first + "bye" // "hellobye"

The String object also has useful methods such as: charAt, indexOf, substring, toLowerCase, toUpperCase, etc. A String object also always has a length property
When the value of one type is used in a situation where another type is required, Javascript tries to implicitly coerce the type into the required one. For example,
```
"August" + 1977 // "August1977"
1977 + "August" // "1977August"
7*"3" =21
```

One can also explicitly, do type conversion.

var str_value = String(value); // Might want to use toString
var some_number = Number(some_string); // Might want to use parseInt or parseFloat