Unit III: Adding Styles and Interactivity Using CSS and

Javascript

USING JAVASCRIPT: Introduction to Javascript

REVIEW

• What is CSS External Style?• How to start the CSS External Style Sheet?• What is the purpose or the advantage of the

CSS Style Sheet?

JUMBLED WORD

Arrange the jumbled letter to reveal the word/s

1. pondres2. actinter3. angech4. mateauto5. mazea

respondinteract

change

automateamaze

Answer this based on the activity

• What happen first when you open the web pages? What did you do?

• What did the browser ask next? What did you do again?

• What happen when you enter the values asked? • What happen to the image when you follow the

instruction asked in the web page?• If those was done by JavaScript, in your opinion

what can you possibly create in using JavaScript?

What is Javascript?

• JavaScript is an object-oriented, client based scripting language created by Netscape programmer, Brendan Eich.

• JavaScript allows you to automate the elements of a Web page, making your page perform some active processing, thus, putting more life to the pages and making them more dynamic.

What is Javascript?

• Originally named as LiveWire, it was released as Livescript in September 1995 and was later introduced as JavaScript on December 4, 1995.

• It was handed over to European Computer Manufacturers Association (ECMA), an industry dedicated to the standardization of ICT and officially renamed JavaScript as ECMAScript or ECMA-262.

Why Use JavaScript?

• JavaScript offers a programming language for Web pages that most anyone can use.

• JavaScript is becoming a standard for Web page programming. This means you're more assured that your work will not soon disappear. There are thousands of Web sites that use JavaScript today.

• JavaScript makes your Web pages come alive by responding to things a user does on your pages.

• JavaScript is ideal for Form Validation. Sometimes you may want your users to enter a specific type of data (e.g. a phone number) into a form field. If it’s important that this data conform to a certain format, you can use JavaScript to validate the data on the user’s machine before it is forwarded to the server.

• JavaScript can open and close new browser windows and you can control the appearance of the new windows you create. You can control their size, their location, and the toolbars they have available.

• JavaScript can perform mathematical computations.

• JavaScript can make your Web pages look “fresh” and up-to-date. For example, if your Web page displays the current date, it feels a little more up-to-date.

• JavaScript can make your Web pages look cool. It is easy to get carried away with this one, so the best advice is “don’t overdo it.”

• Learning to program in JavaScript can give you valuable experience in the important technology area of Object Oriented Programming (OOP).

• JavaScript is FUN. There are a lot of neat things you can do with JavaScript which provide immediate visual feedback.

• These are just some of JavaScript's many capabilities.

JavaScript vs. Java• Don't confuse JavaScript with Java. Because of the similarity in

their names, it is natural to assume that JavaScript and Java are a lot alike, but this is not the case. Other than the fact that both have the ability to deliver content over the Web, they have little else in common.JavaScript Java

InterpretedObject-oriented, client basedCannot stand alone. Embedded in and requires HTML.Develop by NetscapeLoosely typed

Compiled Object orientedStands alone. Java is a complete development environmentDeveloped by Sun MicrosystemsStrongly typed

What Can You Do With JavaScript

RolloverPulldown MenuOnline QuizColor PickerRGB to Hex ConverterCalculatorSmart PopUp Windows

SUMMARY

1. What is JavaScript?• It is a programming language.• It is an interpreted language.• It is object-based programming.• It is widely used and supported• It is accessible to the beginner.

Use of JavaScript

• Use it to add multimedia elements With JavaScript you can show, hide, change, resize

images, and create image rollovers. You can create scrolling text across the status bar.

• Create pages dynamically Based on the user's choices, the date, or other external

data, JavaScript can produce pages that are customized to the user.

• Interact with the user It can do some processing of forms and can validate user

input when the user submits the form.

COMPUQUIZ/EVALUATION

• Fill in the blank to describe JavaScript1-2: Javascript is an _____________, client based scripting language created by Netscape programmer, _______________.3-5: Originally named as _________, it was released as __________ in September 1995 and was later introduced as JavaScript on ____________.

Give at least 3 uses of JavaScript

1. JavaScript is………………………………

2. Javascript………………………………………

3. Javascript………………………………………

ASSIGNMENT

• Look web sites/pages that use JavaScript?• Explain why do you think the sites uses

JavaScript or prove that it uses a JavaScript