SlideShare a Scribd company logo
Unit III: Adding Styles and
Interactivity Using CSS and
           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. pondres
2. actinter
3. angech
4. mateauto
5. mazea
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
   Interpreted                           Compiled
   Object-oriented, client based         Object oriented
   Cannot stand alone. Embedded in and   Stands alone. Java is a complete
   requires HTML.                        development environment
   Develop by Netscape                   Developed by Sun Microsystems
   Loosely typed                         Strongly typed
What Can You Do With JavaScript

Rollover
Pulldown Menu
Online Quiz
Color Picker
RGB to Hex Converter
Calculator
Smart 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 JavaScript
  1-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

More Related Content

Java script introduction

  • 1. Unit III: Adding Styles and Interactivity Using CSS and Javascript
  • 2. 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?
  • 3. JUMBLED WORD Arrange the jumbled letter to reveal the word/s 1. pondres 2. actinter 3. angech 4. mateauto 5. mazea
  • 4. 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?
  • 5. 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.
  • 6. 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.
  • 7. 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.
  • 8. • 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.
  • 9. • 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.
  • 10. 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 Interpreted Compiled Object-oriented, client based Object oriented Cannot stand alone. Embedded in and Stands alone. Java is a complete requires HTML. development environment Develop by Netscape Developed by Sun Microsystems Loosely typed Strongly typed
  • 11. What Can You Do With JavaScript Rollover Pulldown Menu Online Quiz Color Picker RGB to Hex Converter Calculator Smart PopUp Windows
  • 12. 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.
  • 13. 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.
  • 14. COMPUQUIZ/EVALUATION • Fill in the blank to describe JavaScript 1-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 ____________.
  • 15. Give at least 3 uses of JavaScript 1. JavaScript is……………………………… 2. Javascript……………………………………… 3. Javascript………………………………………
  • 16. ASSIGNMENT • Look web sites/pages that use JavaScript? • Explain why do you think the sites uses JavaScript or prove that it uses a JavaScript