1 / 43

HTML & JavaScript

HTML & JavaScript. Introducing HTML and JavaScript – Creating Interactive Web Pages. Ray Tomlinson , a scientist from Cambridge, introduced electronic mail in 1972. He used the @ to distinguish between the sender's name and network name in the e-mail address.

ryann
Télécharger la présentation

HTML & JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML & JavaScript Introducing HTML and JavaScript – Creating Interactive Web Pages

  2. Ray Tomlinson, a scientist from Cambridge, introduced electronic mail in 1972. He used the @ to distinguish between the sender's name and network name in the e-mail address. A typical fibre-optic cable five-thousandths of an inch thick can carry up to 2.5 billion bits of data per second, or 32,000 simultaneous telephone calls. Read more: en.wikipedia.org/wiki/Email Read more: http://en.wikipedia.org/wiki/Optical_fiber_cable

  3. You use it everyday, but what IS the Internet? • The Internet is a worldwide collection of computer networks, cooperating with each other to exchange data using a common software standard. *It comes from two words … INTERNATIONAL NETWORK

  4. Does anyone “own” the Internet? • Interestingly, the Internet lacks a central authority—so there is no "Internet, Inc." that has supreme control of the Internet. • Beyond the various governing boards that work to establish policies and standards, the Internet is bound by few rules and answers to no single organization.

  5. Strange Theories • One conspiracy theorist wrote this: • We all use the Internet - and most web pages start with "www", right? • Since there is no "W" in Hebrew, the closest letter is a "V", and V or Vav has the value of 6.Thus VVV is like writing the number 6 three times, thus 666. And this brings us to what WWW stands for…..

  6. WWW • Stands for the WORLD WIDE WEB • The world wide web is not the same thing as the Internet • The World Wide Web (abbreviated as WWW or W3,[2] commonly known as the Web, or the "Information Superhighway"), is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia, and navigate between them via hyperlinks (WIKIPEDIA)

  7. Read more about the history of the web Click to go to this website

  8. Any idea what this is? The first ever web page!

  9. Let’s look closely at pages on the WEB Open any webpage and go to VIEW -SOURCE

  10. You’ll see a bunch of gobbledygook that looks like this ….

  11. Look closely and notice the tag HTML

  12. So what is HTML? • HTML is a language for describing web pages. • HTML stands for Hyper Text MarkupLanguage • HTML is not a programming language, it is a markuplanguage • A markup language is a set of markuptags • The purpose of the tags are to DESCRIBE OR CREATE PAGE CONTENT

  13. In the next few slides you will learn how to create your very own web page from SCRATCH! http://www.w3schools.comis a great place to start learning how to use HTML

  14. 1 Open up a blank NOTEPAD document and type out the code below Exactly as it is. The heading or header would go in-between these tags The main part of the website or would go in the body Closing tags have the “/”

  15. 2 You can now add a little content - like shown below. Feel free to Customise it and add what you want to say!

  16. 3 Now save the FILE by going to FILE – SAVE AS – and call it MYWEBSITE.HTML (the file extension must be HTML in order For it to be converted to a web page)

  17. 4 Go back to wherever you saved it and you should find a WEBPAGE. Double click to open! *It won’t look terribly impressive. Look at the example below.

  18. 5 Go to www.javascriptkit.com click on FREE JAVASCRIPTS  Go to Javascript games  Scroll down to the Love Game. Cut and paste this into the “body” part of the HTML page

  19. 6 You should come up with a webpage with an embedded JavaScript Game in it. See screenshot below.

  20. 6 Analyse the code more carefully. Think about how JAVSCRIPT differs From VB.Net

  21. Introducing JavaScript • JavaScript is THE scripting language of the Web. • JavaScript is used in billions of Web pages to add functionality, validate forms, communicate with the server, and much more. • JavaScript is easy to learn. You will enjoy it. From: http://www.w3schools.com/js/default.asp Visit (above site) for tutorials and more information for independent learning

  22. What is JavaScript? • JavaScript was designed to add interactivity to HTML pages • JavaScript is a scripting language • A scripting language is a lightweight programming language • JavaScript is usually embedded directly into HTML pages • JavaScript is an interpreted language (means that scripts execute without preliminary compilation) • Everyone can use JavaScript without purchasing a license Are Java and JavaScript the same? • NO! • Java and JavaScript are two completely different languages in both concept and design! • Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.

  23. Mozilla CTO, Brendan Eichcreated JavaScript in a mind-blowing 10 days while working for Netscape in 1995. According to Eich, "I was under marketing orders to make it [JavaScript] look like Java but not make it too big for its britches … [it] needed to be a silly little brother language."

  24. JavaScript Code Analysis

  25. “Var” used instead of DIM. This is declaring a variable called “LoveCount” and initialising it’s value to “0” ?

  26. Here we have a bit of String Manipulation. Finding the LENGTH of a string, converting to upper case etc. ?

  27. Here is an example of SELECTION. In this case, the IF STATEMENT ?

  28. This is a FOR LOOP. It starts at Count = 0 and the condition says that if it is less than the variable firstlength count up (increment by 1) Count++ means go up by 1 ?

  29. Use of OPEN AND CLOSED curly brackets – to denote opening /closing a function Notice the semi-colon after each line. ? WHAT ELSE IS DIFFERENT?

  30. A few more Javascript examples • 1. A simple login and password interface and script • 2. Validating user input (checking the validity of a number) • 3. Email validation.

  31. Simple Login Screen • Create a basic HTML page with a HEAD and BODY • Cut and paste the below code into the BODY section <script language="javascript"> <!--// /*This Script allows people to enter by using a form that asks for a UserID and Password*/ function pasuser(form) { if (form.id.value=="JavaScript") { if (form.pass.value=="Kit") { location="page2.html" } else { alert("Invalid Password") } } else { alert("Invalid UserID") } } //--> </script> <center> <table bgcolor="white" cellpadding="12" border="1"> <tr><td colspan="2"><center><h1><i><b>Login Area</b></i></h1></center></td></tr> <tr><td><h1><i><b>UserID:</b></i></h1></td><td><form name="login"><input name="id" type="text"></td></tr> <tr><td><h1><i><b>Password:</b></i></h1></td><td><input name="pass" type="password"></td></tr> <tr><td><center><input type="button" value="Login" onClick="pasuser(this.form)"></center></td><td><center><br><input type="Reset"></form></td></tr></table></center>

  32. <form name="checknum" onSubmit="return checkban()"> Please enter your age:<br> <input type="text" name="pnum"> <input type="submit" value="Submit"> </form> <script language="JavaScript1.2"> /*Number check script- By JavaScript Kit (www.javascriptkit.com) Over 200 free scripts here! */ function checknumber(){ var x=document.checknum.pnum.value varanum=/(^\d+$)|(^\d+\.\d+$)/ if (anum.test(x)) testresult=true else{ alert("Please input a valid number!") testresult=false } return (testresult) } </script> <script> function checkban(){ if (document.layers||document.all||document.getElementById) return checknumber() else return true } </script> <p align="center"><font face="arial" size="-2">This free script provided by</font><br> <font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript Kit</a></font></p> Check a number(Validation) • Create a basic HTML page with a HEAD and BODY • Cut and paste the below code into the BODY section

  33. Email Validation in Javascript Often times in a form, the single most important field is the email address field. If a user inadvertently enters an incorrect address, the method of contact between you and the user is cut off. Here's a script that forces the user to double check whether a valid email is entered before submitting the form. It alerts a box with the entered address upon form submission, and asks the user whether this information is correct or not. Crude yet highly effective way to enforce a valid email entry! User enters email and clicks submit. It checks format of email. Find out how

  34. Step 1: Cut and paste the below script into the <head> section of your page: <script> /* Manual email check script By JavaScript Kit (http://javascriptkit.com) Over 400+ free scripts here! */ function alertemail(which){ if (confirm("You entered \""+which.value+"\" as your email address. Is that correct?")) return true else{ which.focus() return false } } </script>

  35. Step 2: Inside the text box that holds the email address, give it a name using the "name" attribute (ie: useremail). For example: <form>"<input type="text" value="Enter your email here!" name="useremail"></form> Step 2: Inside the text box that holds the email address, give it a name using the "name" attribute (ie: useremail). For example: <form onSubmit="return alertemail(useremail)">"<input type="text" value="Enter your email here!" name="useremail"></form> Note that the name value specified in step 2 ("useremail") is used also as the parameter inside onSubmit. You're done!

  36. What do you think the output of this little snippet of JavaScript code will be?

  37. Recap on the “For Loop” • We could use one hundred lines of code to PRINT the word “Hi” one hundred times - this would be inefficient, time consuming and silly ….. • The FOR LOOP solves this problem. • It provides a more elegant solution.

  38. RECAP The above FOR LOOP in JavaScript contains three main components: y=0 //The starting point of a for loop y<=99 //The ending boundary of a for loop y++ //How the "for" loop is incremented. y++ means increment it by one step each time until the boundary.

  39. Plenary: (DISCUSSION) How do you think the Internet started? Think about where it is now? Visit the WAYBACKARCHIVE and see the first ever websites. Where do you think the Internet and WWW will be in a few years?

  40. http://archive.org/web/web.php

  41. And for the Record …. • Google isn’t the only Search Engine around – there are others. Check out the Search Engine List at: http://www.thesearchenginelist.com/

  42. What do you think? http://www.youtube.com/watch?v=oNofb-OlZyQ

More Related