Lesson IX: Front-end Development

HTML, Introduction to JavaScript, OOP in JavaScript, XML and JavaScript, AJAX as a Concept

What is JavaScript?
JavaScript adds animation, interactivity and visual effects to your HTML. JavaScript makes immediate feedback possible! This allows for JavaScript powered pages to instantly return results as forms are submitted. The same thing goes with error messages, they can easily be given just before the form is submitted. JavaScript also allows for interactive interfaces! You can turn thumbnails into slideshows, organize content into panels for visitors to easily click, create pop up tool tips that give users supplemental information.

What is JavaScript?
One of the key selling points of JavaScript is immediacy. It allows for instant response when actions like clicking, filling out forms and moving mouse happen. JavaScript never suffers from server-side delay from programming languages like PHP because it doesnt rely on browser-server communication.

What is jQuery?
Writing JavaScript is hard even though its simpler than most programming languages. Writing JavaScript code is hard because different browsers understand JavaScript differently so sometimes applications written on Google Chrome dont work on Internet Explorer 9. This bug eats up a lot of development time as developers try to make sure that their application works for the whole audience.

What is jQuery?
jQuery is a JS library that makes programming more easier and more fun. jQuery solves cross browser testing, and other difficult tasks. jQuery allows designers to easily create interfaces that JavaScript would otherwise take nearly forever to create. It allows you to easily use plugins to add new features.

Adding JavaScript to a Page

The <script> tag indicates the format and the content that follows the tag.

Adding External JavaScript

Adding external JS files allows you to create scripts that can be shared on multiple parts of your site.

Using the alert() function

Using the alert() function allows you to create a pop up prompt that contains the string that you entered into it.

Using the document.write() function

The document.write() function allows us to instantly write a

Statements
A JS statement is the basic programming unit in the script. All lines of a script is a statement. Example:
alert('Hello World!');

The delimeter used by JS is a semi-colon (;).

Data Types
There are three basic data types in JavaScript:
number string Boolean

Numbers
Numbers is the equivalent of the Number class in Java. This allows you to easily manipulate data in any format, as in doubles, integers and bytes.

Aside from numbers, JS also supports operators to manipulate these data sets.

Strings
Unlike Strings in Java JavaScript Strings can also be enclosed in single quotes. Either way, Strings in JavaScript are still the same as they are a sequence of letters.

Make sure of course that you use the corresponding closing mark when enclosing a String.
Remember to place appropriate escape characters as well when placing quotes.

Booleans
Much like other Boolean values in Java it can only be true or false.

Variables
To create a variable type in JavaScript, we write:
var score;

Since JavaScript is dynamically typed, this variable can handle any data type. The same naming conventions that apply to Java identifiers apply to JavaScript variables.

Operators

Notes
Take note that the same evaluation rules apply as with Java operators. That is:
4 + 5 * 10 is still evaluated as 54

To allow lower ordered operators to be evaluated first, use parentheses for grouping.

Adding Strings
Similar to Java, we can concatenate strings using the + operator.

Adding Numbers and Strings

You can also opt to add both Numbers and Strings together.

Converting a String to a Number

You can use the Number() function to convert a String to a number.

Equivalence Operators

Prompting for Input

The code above prompts the user for input.

Arrays
The code above creates an array in JS. Take note that it uses square brackets and not curly brackets.

Arrays
Since JS is dynamically typed, an array can have different kinds of data

Accessing Arrays
JS is implements 0 indexing so accessing an element is always its placement in the array minus 1.

Length of an Array

Adding to the Array

As we can see the array in JS functions like a stack.

Adding to an Array
You can add more than one value to an array.

Adding to the start of an Array

To place elements to the start of an array, simply use the unshift method.

Conditional Statements
The code above shows the syntax for an if statement in JS.

Comparison Operators

Comparison Operators

Conditional Statement
The line of code from above shows how if-else statements in JS are done.

Conditional Statement
The lines of code above show how if-else-elseif statements are made in JS.

for-loop statement
The following lines of code show how a for-loop statement is made in JS.

Looping Statements
The following lines of codes show how a do-while loop is done in JS.

Functions
The line of code

Functions
The following lines of code show us how to return a value after creating a function in JS.

JavaScript OOP
JavaScript allows for robust object-oriented programming, by using the function syntax to create objects. Similar to Java, the only way to construct a new object is to invoke the new keyword.

JavaScript OOP

JavaScript OOP
Another way to add functions to JavaScript objects after they have been defined is to use the prototype method. Think of this as some kind of inheritance where the new function is added after the object has already been defined.

JavaScript OOP

Object Oriented Java-Script

The prototype keyword is also useful for prebuilt JS objects. The recurring rule is that you can use prototype on any object that can be initialized with the word new.

JavaScript OOP

Inheritance and Polymorphism

Just like Java, you get to take advantage of OOP concepts like inheritance and polymorphism. The following lines of code show you how to simulate inheritance and polymorphism in JS.

Inheritance and Polymorphism

Sources
JavaScript and jQuery The Missing Manual 2nd edition, David Sawyer McFarland http://www.javascriptkit.com/javatutors/oopj s2.shtml