SlideShare uma empresa Scribd logo
1 de 16
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

Mais conteúdo relacionado

Mais procurados

Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
Chris Canal
 
Javascript as universal language
Javascript as universal languageJavascript as universal language
Javascript as universal language
Ronald Harmsen
 

Mais procurados (20)

Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
 
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
 
Ember
EmberEmber
Ember
 
The Ideas of Clojure - Things I learn from Clojure
The Ideas of Clojure - Things I learn from ClojureThe Ideas of Clojure - Things I learn from Clojure
The Ideas of Clojure - Things I learn from Clojure
 
Untangling - fall2017 - week5
Untangling - fall2017 - week5Untangling - fall2017 - week5
Untangling - fall2017 - week5
 
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
 
Untangling - fall2017 - week6
Untangling - fall2017 - week6Untangling - fall2017 - week6
Untangling - fall2017 - week6
 
Introduction To JavaScript Ajax
Introduction To JavaScript AjaxIntroduction To JavaScript Ajax
Introduction To JavaScript Ajax
 
JavaScript Roadmap III - ECMAScript
JavaScript Roadmap III - ECMAScriptJavaScript Roadmap III - ECMAScript
JavaScript Roadmap III - ECMAScript
 
Web Based Development Introduction
Web Based Development IntroductionWeb Based Development Introduction
Web Based Development Introduction
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Introduction to Web development
Introduction to Web developmentIntroduction to Web development
Introduction to Web development
 
Javascript as universal language
Javascript as universal languageJavascript as universal language
Javascript as universal language
 
A modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at AtlassianA modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at Atlassian
 
Learning Single page Application chapter 1
Learning Single page Application chapter 1Learning Single page Application chapter 1
Learning Single page Application chapter 1
 
Untangling - fall2017 - week 7
Untangling - fall2017 - week 7Untangling - fall2017 - week 7
Untangling - fall2017 - week 7
 
Introduction To JavaScript
Introduction To JavaScriptIntroduction To JavaScript
Introduction To JavaScript
 
SGCE 2012 Lightning Talk-Single Page Interface
SGCE 2012 Lightning Talk-Single Page InterfaceSGCE 2012 Lightning Talk-Single Page Interface
SGCE 2012 Lightning Talk-Single Page Interface
 
Simplicity - develop modern web apps with tiny frameworks and tools
Simplicity - develop modern web apps with tiny frameworks and toolsSimplicity - develop modern web apps with tiny frameworks and tools
Simplicity - develop modern web apps with tiny frameworks and tools
 

Semelhante a Java script introduction

Developpement informatique
Developpement informatiqueDeveloppement informatique
Developpement informatique
brokerslip0
 

Semelhante a Java script introduction (20)

Javascript 01 (js)
Javascript 01 (js)Javascript 01 (js)
Javascript 01 (js)
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
 
WT Module-3.pptx
WT Module-3.pptxWT Module-3.pptx
WT Module-3.pptx
 
introduction to js
introduction to jsintroduction to js
introduction to js
 
JavaScript New Tutorial Class XI and XII.pptx
JavaScript New Tutorial Class XI and XII.pptxJavaScript New Tutorial Class XI and XII.pptx
JavaScript New Tutorial Class XI and XII.pptx
 
INTRODUCTION.docx
INTRODUCTION.docxINTRODUCTION.docx
INTRODUCTION.docx
 
Let’s learn how to use JavaScript responsibly and stay up-to-date.
Let’s learn how to use JavaScript responsibly and stay up-to-date. Let’s learn how to use JavaScript responsibly and stay up-to-date.
Let’s learn how to use JavaScript responsibly and stay up-to-date.
 
wt mod3.pdf
wt mod3.pdfwt mod3.pdf
wt mod3.pdf
 
A sneak peek into the similarities and differences between java and java script
A sneak peek into the similarities and differences between java and java scriptA sneak peek into the similarities and differences between java and java script
A sneak peek into the similarities and differences between java and java script
 
Developpement informatique
Developpement informatiqueDeveloppement informatique
Developpement informatique
 
TypeScript VS JavaScript.pptx
TypeScript VS JavaScript.pptxTypeScript VS JavaScript.pptx
TypeScript VS JavaScript.pptx
 
Java script
Java scriptJava script
Java script
 
Java script
Java scriptJava script
Java script
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
 
Type script vs javascript come face to face in battleground
Type script vs javascript come face to face in battlegroundType script vs javascript come face to face in battleground
Type script vs javascript come face to face in battleground
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Web programming UNIT II by Bhavsingh Maloth
Web programming UNIT II by Bhavsingh MalothWeb programming UNIT II by Bhavsingh Maloth
Web programming UNIT II by Bhavsingh Maloth
 
WEB PROGRAMMING UNIT II BY BHAVSINGH MALOTH
WEB PROGRAMMING UNIT II BY BHAVSINGH MALOTHWEB PROGRAMMING UNIT II BY BHAVSINGH MALOTH
WEB PROGRAMMING UNIT II BY BHAVSINGH MALOTH
 
Javascript Training in Delhi
Javascript Training in DelhiJavascript Training in Delhi
Javascript Training in Delhi
 

Mais de Jesus Obenita Jr.

Session 2 test construction.mt's
Session 2   test construction.mt'sSession 2   test construction.mt's
Session 2 test construction.mt's
Jesus Obenita Jr.
 

Mais de Jesus Obenita Jr. (20)

Organization and management 3 a Evolution of Management Theory
Organization and management 3 a Evolution of Management TheoryOrganization and management 3 a Evolution of Management Theory
Organization and management 3 a Evolution of Management Theory
 
Organization and management 2 Management Function
Organization and management 2 Management FunctionOrganization and management 2 Management Function
Organization and management 2 Management Function
 
Organization and management 1
Organization and management 1Organization and management 1
Organization and management 1
 
Designing web page marquee and img tag
Designing web page  marquee and img tagDesigning web page  marquee and img tag
Designing web page marquee and img tag
 
Ms excel 2013 formatting worksheets
Ms excel 2013 formatting worksheetsMs excel 2013 formatting worksheets
Ms excel 2013 formatting worksheets
 
Ms excel 2013 data management
Ms excel 2013 data managementMs excel 2013 data management
Ms excel 2013 data management
 
Microsoft Excel introduction
Microsoft Excel introductionMicrosoft Excel introduction
Microsoft Excel introduction
 
Word 2013 working with pictures
Word 2013 working with picturesWord 2013 working with pictures
Word 2013 working with pictures
 
Word 2013 Formatting Page
Word 2013 Formatting PageWord 2013 Formatting Page
Word 2013 Formatting Page
 
Word 2013 8
Word 2013 8Word 2013 8
Word 2013 8
 
Ms word 2013 7
Ms word 2013 7Ms word 2013 7
Ms word 2013 7
 
Ms word 2013 6
Ms word 2013 6Ms word 2013 6
Ms word 2013 6
 
Ms word 2013 4
Ms word 2013 4Ms word 2013 4
Ms word 2013 4
 
Ms word 2013 2
Ms word 2013 2Ms word 2013 2
Ms word 2013 2
 
Ms word 2013
Ms word 2013Ms word 2013
Ms word 2013
 
Parts of the ms word 2013 screen and
Parts of the ms word 2013 screen andParts of the ms word 2013 screen and
Parts of the ms word 2013 screen and
 
Word processor
Word processorWord processor
Word processor
 
Session 2 test construction.mt's
Session 2   test construction.mt'sSession 2   test construction.mt's
Session 2 test construction.mt's
 
Cooking ingredients
Cooking ingredientsCooking ingredients
Cooking ingredients
 
Color theory
Color theoryColor theory
Color theory
 

Último

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Último (20)

How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 

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