Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSIS 138 Javascript Class1

Instructor Teresa Pelkie at Palomar College - Introduction to JavaScript

  • Login to see the comments

CSIS 138 Javascript Class1

  1. 1. JavaScript – Class 1 Overview of the Basics <ul><li>Objects </li></ul><ul><ul><li>Properties </li></ul></ul><ul><ul><li>Methods </li></ul></ul><ul><ul><li>Events </li></ul></ul>
  2. 2. JavaScript Syntax <ul><li>document.bgColor = “red”; </li></ul><ul><li>document.write( ); </li></ul><ul><li>// change color to red </li></ul><ul><li>/* change color to red </li></ul><ul><li>and write to the page </li></ul><ul><li>*/ </li></ul>
  3. 3. JavaScript Objects <ul><li>Built in JavaScript Objects </li></ul><ul><ul><li>Navigator Object </li></ul></ul><ul><ul><li>Date Object </li></ul></ul><ul><ul><li>Math Object </li></ul></ul><ul><ul><li>String Object </li></ul></ul><ul><ul><li>Array Object </li></ul></ul>
  4. 4. JavaScript Objects <ul><li>Browser Objects </li></ul>
  5. 5. Where is JavaScript code placed? <ul><li><head> </li></ul><ul><li><script type=”text/JavaScript” language=&quot;JavaScript&quot;>  <!- - </li></ul><ul><li>statements go here ; //--> </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul>
  6. 6. Where is JavaScript code placed? <ul><li><head> </li></ul><ul><li><script type=”text/JavaScript”>  </li></ul><ul><li>statements go here ; </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul>
  7. 7. Where is JavaScript code placed? <ul><li><head> </li></ul><ul><li><script type=”text/JavaScript” src=”file.js”> </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul>
  8. 8. Where is JavaScript code placed? <ul><li><head> </li></ul><ul><li><script type=”text/JavaScript”>  statements go here ; </li></ul><ul><li></script> </li></ul><ul><li><script type=”text/JavaScript” src=”file.js”> </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul>
  9. 9. Where is JavaScript code placed? <ul><li><body> </li></ul><ul><li><a href=&quot;#&quot; onmouseover=“showPic();&quot;>click</a> </li></ul><ul><li><a href=”javascript:openWin();”>click</a> </li></ul><ul><li></body> </li></ul>
  10. 10. <noscript> You need JavaScript to see this page! </noscript>
  11. 11. Data and Types <ul><li>Information that we process and display </li></ul><ul><li>Can be in many forms or types </li></ul><ul><ul><li>Numeric </li></ul></ul><ul><ul><li>String </li></ul></ul><ul><ul><li>Boolean </li></ul></ul>
  12. 12. Variables <ul><li>Hold information or data </li></ul><ul><li>Can hold these types of data </li></ul><ul><ul><li>Numeric </li></ul></ul><ul><ul><li>String </li></ul></ul><ul><ul><li>Boolean </li></ul></ul>
  13. 13. How we create or declare a variable <ul><li>var myName; </li></ul>
  14. 14. Initializing a variable <ul><li>var myName; </li></ul><ul><li>myName = “Teresa”; </li></ul><ul><li>_______________________ </li></ul><ul><li>var myName = “Teresa”; </li></ul>
  15. 15. Initializing a variable <ul><li>var myAge; </li></ul><ul><li>myAge = 21; </li></ul><ul><li>_______________________ </li></ul><ul><li>var zipCode; </li></ul><ul><li>zipCode = “92082”; </li></ul>
  16. 16. The alert() method alert(); window.alert();
  17. 17. The alert() method <head> <script language=&quot;JavaScript&quot;> alert (&quot;This is an alert()&quot;); </script> </head>
  18. 18. The alert() method
  19. 19. The alert() method <script language=”JavaScript”> var myFirstVariable; myFirstVariable = “Hello!”; alert(myFirstVariable); </script>
  20. 20. The alert() method
  21. 21. The write() method <body> <script language=”JavaScript”> document.write (&quot;Hello World&quot;); </script> </body>
  22. 22. The write() method
  23. 23. The write() method <body> <script language=”JavaScript”> document.write (‘Hello “Big” World’); </script> </body>
  24. 24. The write() method
  25. 25. The write() method <script language=&quot;JavaScript&quot;> var firstVar; var secondVar firstVar = &quot;Hello&quot;; secondVar = &quot;World!&quot;; document.write( firstVar + “ “ + secondVar ); </script>
  26. 26. The write() method
  27. 27. The write() method <script language=&quot;JavaScript&quot;> var first; var last; first = “Teresa&quot;; last = “Pelkie&quot;; document.write(“<b>Hello “ + first + “ “ + last + “</b>”); </script>
  28. 28. The write() method
  29. 29. <ul><li>JavaScript – Class 1 </li></ul><ul><li>Assignment 1 </li></ul>

×