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 doesn’t 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 don’t 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.

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

.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. • The delimeter used by JS is a semi-colon (. Example: alert('Hello World!'). .

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

as in doubles. • Aside from numbers. • This allows you to easily manipulate data in any format. JS also supports operators to manipulate these data sets. integers and bytes. .Numbers • Numbers is the equivalent of the Number class in Java.

• Remember to place appropriate escape characters as well when placing quotes. Strings in JavaScript are still the same as they are a sequence of letters.Strings • Unlike Strings in Java JavaScript Strings can also be enclosed in single quotes. . Either way. • Make sure of course that you use the corresponding closing mark when enclosing a String.

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

this variable can handle any data type.Variables • To create a variable type in JavaScript. • Since JavaScript is dynamically typed. • The same naming conventions that apply to Java identifiers apply to JavaScript variables. we write: – var score. .

Operators .

• That is: – 4 + 5 * 10 is still evaluated as 54 • To allow lower ordered operators to be evaluated first.Notes • Take note that the same evaluation rules apply as with Java operators. . use parentheses for grouping.

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

.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.

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

.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. the only way to construct a new object is to invoke the new keyword. • Similar to Java. by using the function syntax to create objects.

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 .

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

JavaScript OOP .

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

Inheritance and Polymorphism .

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