Upcoming SlideShare
Loading in...5

Like this? Share it with your network








Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft Word

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

javscript Document Transcript

  • 1. JAVASCRIPT TO NON PROGRAMMERS JAVASCRIPT Webteacher Software now offers Welcome To JavaScript for the Total Non- Programmer This tutorial will take you step by step through the fundamentals of Javascript. You will learn how to write functions, use data from text boxes, create IF-THEN conditionals, program loops, and generally make your web page "smarter." I teach computer classes for a living to corporate clients of all levels. After 2 years of teaching, I have learned a lot about communication between people of various levels of computer experience.
  • 2. This tutorial assumes that you have no prior programming experience, but that you have created your own HTML pages. If you find this tutorial helpful, please let me know (it's my only reward). Also, links are graciously accepted. What is JavaScript? Javascript is an easy-to-use programming language that can be embedded in the header of your web pages. It can enhance the dynamics and interactive features of your page by allowing you to perform calculations, check forms, write interactive games, add special effects, customize graphics selections, create security passwords and more. What's the difference between JavaScript and Java?
  • 3. Actually, the 2 languages have almost nothing in common except for the name. Although Java is technically an interpreted programming language, it is coded in a similar fashion to C++, with separate header and class files, compiled together prior to execution. It is powerful enough to write major applications and insert them in a web page as a special object called an "applet." Java has been generating a lot of excitment because of its unique ability to run the same program on IBM, Mac, and Unix computers. Java is not considered an easy-to-use language for non-programmers. Javascript is much simpler to use than Java. With Javascript, if I want check a form for errors, I just type an if-then statement at the top of my page. No compiling, no applets, just a simple sequence.
  • 4. What is Object Oriented Programming? Everyone that wants to program JavaScript should at least try reading the following section. If you have trouble understanding it, don't worry. The best way to learn JavaScript is from the examples presented in this tutorial. After you have been through the lessons, come back to this page and read it again. OOP is a programming technique (note: not a language structure - you don't even need an object-oriented language to program in an object-oriented fashion) designed to simplify complicated programming concepts. In essence, object-oriented programming revolves around the idea of user- and system-defined chunks of data, and controlled means of accessing and modifying those chunks.
  • 5. Object-oriented programming consists of Objects, Methods and Properties. An object is basically a black box which stores some information. It may have a way for you to read that information and a way for you to write to, or change, that information. It may also have other less obvious ways of interacting with the information. Some of the information in the object may actually be directly accessible; other information may require you to use a method to access it - perhaps because the way the information is stored internally is of no use to you, or because only certain things can be written into that information space and the object needs to check that you're not going outside those limits. The directly accessible bits of information in the object are its properties. The difference between data
  • 6. accessed via properties and data accessed via methods is that with properties, you see exactly what you're doing to the object; with methods, unless you created the object yourself, you just see the effects of what you're doing. Other Javascript pages you read will probably refer frequently to objects, events, methods, and properties. This tutorial will teach by example, without focusing too heavily on OOP vocabulary. However, you will need a basic understanding of these terms to use other JavaScript references. Objects and Properties Your web page document is an object. Any table, form, button, image, or link on your page is also an object. Each object has certain properties (information about the object). For
  • 7. example, the background color of your document is written document.bgcolor. You would change the color of your page to red by writing the line: document.bgcolor="red" The contents (or value) of a textbox named "password" in a form named "entryform" is document.entryform.password.value . Methods Most objects have a certain collection of things that they can do. Different objects can do different things, just as a door can open and close, while a light can turn on and off. A new document is opened with the method document.open() You can write "Hello World" into a document by typing document.write("Hello World") .
  • 8. open() and write() are both methods of the object: document. Events Events are how we trigger our functions to run. The easiest example is a button, whose definition includes the words onClick="run_my_function()". The onClick event, as its name implies, will run the function when the user clicks on the button. Other events include OnMouseOver, OnMouseOut, OnFocus, OnBlur, OnLoad, and OnUnload. Webt Chap This i box w
  • 9. below Type HOW Here' minu break <HTM <HEA <SCR <!-- B funct alert // - E </SC </HE <BOD <FOR <INP
  • 10. <INP onClic </FO </BO </HT Webt First 2 seg You s <HTM <HE (Stuf </HE
  • 11. <BO (The </BO </HT Webt In the introd All br JavaS along your <SCR The < from <SCR
  • 12. to ke This i sectio <HTM <HE <SCR < !-- (all o // - E </SC </HE Webt You c
  • 13. to na Kalam A fun funct (stuff This a variab variab The v The c funct
  • 14. The a a piec Alert( Alert( and w "Hello put th Some Alert( then <HTM <HE < !-- funct alert // - E </SC </HE
  • 15. Webt The F used JavaS objec All fo </FO The t The N which TYPE butto For e <INP The b funct
  • 16. and O The N JavaS The V The O the n For e <INP onClic <BOD <FOR <INP <INP onClic </FO </BO </HT We e
  • 17. onClic This m progr the p text1 huh? OK, t butto name numb form. typed If this you e onCli funct That' funct comm all to
  • 18. Webt Here works <HTM <HEA <SCR <!-- B
  • 19. funct docum // - E </SC </HE <BOD <form <inpu oncli <inpu oncli <inpu oncli <inpu oncli </for </BO
  • 20. </HT Webt funct docum } This p used funct docum You p color. If I ty turn r By wr allow want.
  • 21. Later onClic onClic thing 1.Ru 2.co Webt
  • 22. Clic k the ima ge to ente ra pas swo rd prot ecte d doc ume nt. Try a wro ng entr