COMPUTER TRAINING COURSE- HTML / AJAX / CSS / JAVASCRIPT

Source:- Freshersworld

What is HTML?

Hypertext Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser.

The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.

HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts written in languages such as JavaScript which affect the behavior of HTML web pages.

Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both the HTML and the CSS standards, encourages the use of CSS over explicit presentational HTML markup.

Why HTML is Not a Programming Language ?

HTML is a type of markup language. It encapsulates, or “marks up” data within HTML tags, which define the data and describe its purpose on the webpage. The web browser then reads the HTML, which tells it things like which parts are headings, which parts are paragraphs, which parts are links, etc. The HTML describes the data to the browser, and the browser then displays the data accordingly.

How HTML is used to Navigate the Internet ?

Hypertext is text that references other web pages or text and that, when clicked on, allows the user to access the referenced text or webpage. HTML is used to embed hyperlinks within web pages. Hyperlinks allow the user to move easily within web pages and between websites stored on different servers.

HTML and the Internet: An explanation of Internet basics and how HTML functions in the Internet environment.

Ajax

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and Java Script.

Ajax uses XHTML for content and CSS for presentation, as well as the Document Object Model and JavaScript for dynamic content display.

Conventional web application trasmit information to and from the sever using synchronous requests. This means you fill out a form, hit submit, and get directed to a new page with new information from the server.

With AJAX when submit is pressed, JavaScript will make a request to the server, interpret the results and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.

XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

AJAX is a web browser technology independent of web server software.

A user can continue to use the application while the client program requests information from the server in the background

Intuitive and natural user interaction. No clicking required only Mouse movement is a sufficient event trigger.

Data-driven as opposed to page-driven

CSS

• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files

WhAT IS THE USE OF CSS?

CSS helps you to keep the information content of a document separate from the details of how to display it. The details of how to display the document are known as its style. You keep the style separate from the content so that you can:

• Avoid duplication
• Make maintenance easier
• Use the same content with different styles for different purposes

Example

Your web site might have thousands of pages that look similar. Using CSS, you store the style information in common files that all the pages share.

• When a user displays a web page, the user's browser loads the style information along with the content of the page.
• When a user prints a web page, you provide different style information that makes the printed page easy to read.

JavaScript

JavaScript is a scripting language used to create dynamic and interactive web content. It has a wide range of applications, including e-commerce (online shopping) and advertising networks such as Google AdSense

A scripting language is a lightweight programming language.

JavaScript is programming code that can be inserted into HTML pages.

JavaScript inserted into HTML pages, can be executed by all modern web browsers.

JavaScript is easy to learn.

ESSENTIAL JOB FUNCTIONS :

Builds software applications – Follows coding standards, builds appropriate unit tests, integration tests and deployment scripts

Assists in defining software architectures – Collaborates with leads to explore existing systems, determines areas of complexity, potential risks to successful implementation, learns the applications capabilities

Communicates continually with the client and project teams – Explains progress on the development effort

Owns success – Takes responsibility for successful delivery of the solutions

Translates designs and style guides provided by the UI/UX team into functional user interfaces, ensuring cross browser compatibility and performance

Contributes to continual improvement by suggesting improvements to user interface, software architecture or new technologies

REQUIRED SKILLS :

Highly skilled at front-end engineering using Object-Oriented JavaScript, various JavaScript libraries and micro frameworks (jQuery, Angular, Prototype, Dojo, Backbone, YUI), HTML and CSS

Well versed in software engineering principles, frameworks and technologies

Excellent communication skills

Self-directed team player who thrives in a continually changing environment

Strong customer service/client service skills

PPT ON JAVASCRIPT SYNTAX

Presentation On JavaScript Syntax
Download

JavaScript Syntax Presentation Transcript:
1.JavaScript Syntax

2.A JavaScript consists of JavaScript statements that are placed within the HTML tags in a web page.
You can place the 
The script tag takes two important attributes:
language: This attribute specifies what scripting language you are using. Typically, its value will be javascript. Although recent versions of HTML (and XHTML, its successor) have phased out the use of this attribute.
type: This attribute is what is now recommended to indicate the scripting language in use and its value should be set to "text/javascript".

4.So your JavaScript segment will look like:


5.Your First JavaScript Script: 
Let us write our class example to print out "Hello World".


6.We added an optional HTML comment that surrounds our Javascript code. This is to save our code from a browser that does not support Javascript. The comment ends with a "//-->". Here "//" signifies a comment in Javascript, so we add that to prevent a browser from reading the end of the HTML comment in as a piece of JavaScript code.
Next, we call a function document.write which writes a string into our HTML document. This function can be used to write text, HTML, or both. So above code will display following result:
Hello World!

7.Whitespace and Line Breaks:
JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs.
Because you can use spaces, tabs, and newlines freely in your program so you are free to format and indent your programs in a neat and consistent way that makes the code easy to read and understand.

8.Semicolons are Optional:
Simple statements in JavaScript are generally followed by a semicolon character, just as they are in C, C++, and Java. JavaScript, however, allows you to omit this semicolon if your statements are each placed on a separate line. For example, the following code could be written without semicolons

9.
But when formatted in a single line as follows, the semicolons are required:


10.Case Sensitivity:
JavaScript is a case-sensitive language. This means that language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
So identifiers Time, TIme and TIME will have different meanings in JavaScript.
NOTE: Care should be taken while writing your variable and function names in JavaScript.

Source: Power Point Presentations

PPT ON JAVASCRIPT OVERVIEW

Presentation On JavaScript Overview
Download

JavaScript Overview Presentation Transcript:
1.JavaScript Overview

2.What is JavaScript ? 
JavaScript started life as Live Script, but Netscape changed the name, possibly because of the excitement being generated by Java. To JavaScript. JavaScript made its first appearance in Netscape 2.0 in 1995 with a name Live Script.
JavaScript is a lightweight, interpreted programming language with object-oriented capabilities that allows you to build interactivity into otherwise static HTML pages.
The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers

3.The  defined a standard version of the core JavECMA-262 SpecificationaScript language.
JavaScript is:
JavaScript is a lightweight, interpreted programming language
Designed for creating network-centric applications
Complementary to and integrated with Java
Complementary to and integrated with HTML
Open and cross-platform

4.Client-side JavaScript:
Client-side JavaScript is the most common form of the language. The script should be included in or referenced by an HTML document for the code to be interpreted by the browser.
It means that a web page need no longer be static HTML, but can include programs that interact with the user, control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism features many advantages over traditional CGI server-side scripts. For example, you might use JavaScript to check if the user has entered a valid e-mail address in a form field.

5.The JavaScript code is executed when the user submits the form, and only if all the entries are valid they would be submitted to the Web Server.
JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions that the user explicitly or implicitly initiates.

6.Advantages of JavaScript:
The merits of using JavaScript are:
Less server interaction: You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.
Immediate feedback to the visitors: They don't have to wait for a page reload to see if they have forgotten to enter something.
Increased interactivity: You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.

7.Richer interfaces: You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.

8.Limitations with JavaScript:
We can not treat JavaScript as a full fledged programming language. It lacks the following important features:
Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reason.
JavaScript can not be used for Networking applications because there is no such support available.
JavaScript doesn't have any multithreading or multiprocess capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that allows you to build interactivity into otherwise static HTML pages.

9.JavaScript Development Tools:
One of JavaScript's strengths is that expensive development tools are not usually required. You can start with a simple text editor such as Notepad.
Since it is an interpreted language inside the context of a web browser, you don't even need to buy a compiler.
To make our life simpler, various vendors have come up with very nice JavaScript editing tools. Few of them are listed here:

10.Microsoft FrontPage: Microsoft has developed a popular HTML editor called FrontPage. FrontPage also provides web developers with a number of JavaScript tools to assist in the creation of an interactive web site.
Macromedia Dreamweaver MX: Macromedia Dreamweaver MX is a very popular HTML and JavaScript editor in the professional web development crowd. It provides several handy prebuilt JavaScript components, integrates well with databases, and conforms to new standards such as XHTML and XML.

Source: Power Point Presentations