presentation regarding front end web development in powerpoint

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.

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 PageThe <script> tag indicates the format and the content that follows the tag.

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

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

Using the document.write() functionThe 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 StringsSimilar to Java, we can concatenate strings using the + operator.

Adding Numbers and StringsYou can also opt to add both Numbers and Strings together.

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

Equivalence Operators

Prompting for InputThe code above prompts the user for input.

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

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

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

Length of an Array

Adding to the ArrayAs we can see the array in JS functions like a stack.

Adding to an ArrayYou can add more than one value to an array.

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

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

Comparison Operators

Comparison Operators

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

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

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

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

FunctionsThe line of code

FunctionsThe 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/oopjs2.shtml