| Related sites for http://www.yourhtmlsource.com/javascript/basicjavascript.html |
| Web-a-dex_Internet_Services Voice chat live on the internet. Eliminate having to pay long distance toll charges with voice over IP. | | Google\'s_Florida_Shake_Up__A_View_from_the_Beginning Jim Hedger of the Internet Search Engines Database presents a compilation of his reactions and conclusions over weeks following Google change of 16 November. (December 16, 2003) | | JustEdit_Plus This java applet allows browser-based editing. Free trial version, live demonstration. [Macintosh, Microsoft Windows, UNIX] | | RFC_0894 Standard for the Transmission of IP Datagrams Over Ethernet Networks. C. Hornig. April 1984. | | RFC_2266 Definitions of Managed Objects for IEEE 802.12 Repeater Devices. J. Flick. January 1998. | | DeltaBlue_Constraint_Solver Efficient, incremental local propagation constraint solver. Like most local propagation algorithms, it cannot accommodate cyclic constraints. University of Washington site. | | Keystar_Computer_Training Courses in Word, Excel, Powerpoint and other major Microsoft Applications. We can tailor courses to suit your individual needs. Located in the United Kingdom. | | Micronicos_Ltd_ UK and US domain name registrations and web hosting. Based in London UK. | | rest-discuss Introductory-level discussion forum. (Yahoo! Groups) | | RFC_0550 NIC NCP Experiment. L.P. Deutsch. August 1973. | | CNET_-_Robots_ready_to_rumble RoboGames (formerly called Robolympics) in San Francisco gives machines a chance to show their stuff in contests from sumo to soccer. An article by Richard Shim. (March 25, 2005) | | Grower_Flowers Provides flowers and bouquets. Includes program overview, commission rates and signup form. | | Winningham,_Jennifer Design, advertising, and marketing specializing in small business start-up and e-business. Located in Elbow Lake, Minnesota, United States. | | Vista_View A sharable web-based Information Management System for Email, Appointments, contacts, letters, documents, tasks... developed in Perl and using a MYSQL database. [Open source, GPL] | | Download_Wdwic Original screen savers with pictures taken around the world. Some contain original animation. | | Artistik_Webpage_Designs Provide web and graphic design services. | | 3W_Solutions Development and consulting, offering business solutions to small- and medium-sized companies. | | JPW_Solutions Provides design, development, maintenance, e-commerce development, system evaluations, training, and troubleshooting services. | | Html_TextBox Allows web users to edit formatted text in a visual WYSIWYG environment. By Active Up. | | Compare_It A full-featured visual file comparison and merging tool. Enables you to compare and work with different versions of the same text file with a color-coded side-by-side comparison. [Shareware] |
|
Basic JavaScript | Java Script programming tutorial || HTMLSource ]@import "/bubbleicious.css";_uacct = "UA-204627-1";urchinTracker();Accept credit cards on your website with FREE setup from Charge.com! var redvase_ad = { version: 1.5 }; redvase_ad.publisher = 'yourhtmlsource'; redvase_ad.kind = 'leaderboard'; redvase_ad.content = 'creative' HTMLSource : HTML Tutorials<HTML Source="excellent">Search the Source ¤ Full Index About Contact UpdatesPath // www.yourhtmlsource.com > JavaScript > BASIC JAVASCRIPTBasic JavaScriptby Ross ShannonJavaScript is a very easy way to add all sorts of dynamic elements to your site. Unless you've had some programming experience, JavaScript will be quite a new concept at the start — it's fairly different to HTML. In this tutorial we'll be laying some groundwork on the language, and writing our first script. Page Navigation:[ What is JavaScript? · The Java Connection · Versions | The DOM | Implementation · External Scripts · A Simple Script · <noscript> ] This page was last updated on 2007-02-26searchHiOption(); #adsense a, #adsense a:link {font-weight: normal; } What is JavaScript?JavaScript is a simple scripting language invented specifically for use in web browsers to make websites more dynamic. On its own, HTML is capable of outputting more-or-less static pages. Once you load them up your view doesn't change much until you click a link to go to a new page. Adding JavaScript to your code allows you to change how the document looks completely, from changing text, to changing colours, to changing the options available in a drop-down list (and much, much more!).JavaScript is a client-side language, which means all the action occurs on the client's (reader's) side of things. This means that no trips to the server are required for JavaScripts to kick into operation, which would slow down the process enormously. JavaScript operations are usually performed instantaneously. In fact, JavaScript is often used to perform operations that would otherwise encumber the server, like form input validation. This distribution of work to the relatively quick client-side service speeds up the process.JavaScripts are integrated into the browsing environment, which means they can get information about the browser and HTML page, and modify this information, thus changing how things are presented on your screen. This access to information gives JavaScript great power to modify the browsing experience. They can also react to events, such as when the user clicks their mouse, or points to a certain page element. This is also a very powerful ability.Most importantly, JavaScript isn't overly tough to learn and use. It's a little technical, yes; but after just a few tutorials you'll have some useful scripts in your pages, and will have the knowledge necessary to modify and use the countless free scripts available across the web.Browser Compatibility Note:JavaScript is supported by Netscape 2+, Internet Explorer 3+, Opera 3+ and most of the other modern web browsers. Each new version of the main browsers has supported new generations of JavaScript commands, each more complex than the last. Script compatibility can still be a problem, as the language is not as standardised as HTML; but this is being worked on.The Java ConnectionUnderstandably, JavaScript's connection with Java is regularly misunderstood. They are not the same thing. » Java, created by » Sun Microsystems, is a full computer programming language like C++, suitable for writing complete, large-scale programs. JavaScript, on the other hand, was created by » Netscape. It was based to some degree on Java — the syntax of the code is very similar — but it is very rarely used for anything outside of a browser. It was actually originally to be called 'Live Script', but Java's increasing popularity at the time made Netscape change the name.A scripting language can be thought of as a lightweight programming language; one that can be interpreted by a browser without needing to be compiled first. The script is actually just some commands that the browser has to do.The two share many similarities. Most prominent of these is that they are both forms of Object-Oriented Programming, or OOP. This means that you work with small objects that are combined together to form larger objects. We'll get into that more in a minute.You may have heard of Java being used alongside HTML through things called applets. These small-scale applications can be embedded into pages for very advanced effects, but they aren't entirely practical, due to large file sizes and limited extra utility. JavaScript can be very useful.VersionsLike seemingly every tool we use to create our sites, JavaScript has been arriving in versions, ever since version 1.0 which turned up in Netscape Navigator 2. In subsequent versions JavaScript graduated through versions 1.1, 1.2 and 1.3. Microsoft made an attempt at JS 1.0 support in Internet Explorer 3, but it was bugged to bits and was very unreliable. Microsoft dubbed their version “JScript”. The latest generation of browsers have decent support for JavaScript 1.3.Coders' dismay at the incompatibilities wrought by the two browsers' different levels of support eventually lead to a standardised version of JavaScript, sometimes called ECMAScript, after its standardisers, the » ECMA. Modern browsers like IE5/6 and NN6 have good support for this standard, and a lot of work has gone on recently to ensure that all browsers are operating on the same DOM...The DOMThe DOM, or Document Object Model, is the framework that JavaScript works off. Remember how I said JavaScript is a form of Object-oriented programming? This concept means we can think of all the elements that go into making a page as objects. The document itself is an object, made up of other objects like forms, images and tables. Form objects are also made up of even more objects like text boxes and submit buttons. All of these objects have properties, with values that define their colour, their length etc. JavaScript can read these properties and modify them, or react to events that happen to the objects, instantly changing the object in the browser window. A script can respond to user interaction with the page or can run all by itself.Actions that your script performs on or with objects are called methods. These are functions built-into objects. Dealing with user-controlled events like clicks and mouse movement is accomplished through commands called event handlers. Together, these concepts form the basis of all JavaScript programming.The DOM allows you to access these page objects. As mentioned above, for years there has been a bad situation wherein the two major browsers supported different versions of the DOM. Netscape's DOM was not compatible with Microsoft's, and so DHTML (Dynamic HTML) pages written to perform in one browser would not function in another. Recently, the W3C have standardised the model, creating the » DOM level 1. Rest easy however; unless you're planning on creating vast JavaScript-fuelled sites, this probably won't become an issue for you. Not yet anyway. We'll discuss the DOM in more depth in Objects and Properties.ImplementationSo how are we going to get our JavaScript into our pages? JavaScript is written in the same way as HTML — in a text-editor. JS implementation is quite similar to CSS; you can link to outside files (with the file extension .js), or write blocks of code right into your HTML documents with the <script> tag. The usual choosing criteria apply — if you're using the same script on many pages, link to an external file; otherwise embed.We'll do our first example with an embedded script. This will simply print a line of text to the page.<script type="text/javascript"><!--document.write("<i>Hello World!</i>");//--></script>When you place that in your code the text Hello World will appear on your screen wherever you put it. Like so:You should probably get a JavaScript-enabled browser for these tutorials.Let's break this down a bit. The script tag encloses any script code you want to use. The type attribute we have in there alert the browser to the type of script it is about to deal with (there are others, like VBScript), and so helps it to interpret the code.The comments around the script code are there so that old browsers that don't understand the script tag won't display the code as text on the page. Any browser that can do JavaScript will disregard the comments. Also note that for Netscape's benefit, the end of the comment is itself commented out using a JavaScript comment (two forward-slashes to comment out the rest of the line). This stops errors from occurring in old versions of Netscape.External ScriptsTo import scripts from external JS files, save the code in a text file with the .js extension; without the script tags and comments. In this case the code would just be the document.write("Hello World!"); part (although this won't do much on its own). We then link to this document, in the page's <head>, with<script type="text/javascript" src="http://www.yourhtmlsource.com/javascript/basicjavascript.html/simplemethods.js"></script>Now all of the methods and variables that are in that file are available to use in the page. We'll learn more about that in the next tutorial. Note that JavaScript Includes, like this, are not supported by Netscape 2 and Explorer 3. Also remember the end-tag. The usual abstraction benefits ensue: you can update that one script file and have all your pages change; and the script file is cached meaning it doesn't need to be downloaded again for each page that uses it.We should always place includes in the head so that the browser is ready to execute scripts when the user calls for them. If a user clicked a button that called for a script that the browser wasn't aware of yet, you'd get an error. Having them in the head means they're always ready before they're needed.A Simple ScriptSo what did our code above actually accomplish? Take another look at it.<script type="text/javascript"><!--document.write("<i>Hello World!</i>");//--></script>We start by taking control of the document object, and use its write() method to output some text to the document. The text inside the double quotes is called a String, and this string will be added to the page. Simple, right? To use an object's methods or properties, we write the object's name, a dot, and then the method/property name. Each line of script ends with a semicolon. JavaScript isn't very forgiving; if you make any mistakes in typing this out, you'll get a script error, so code carefully.We'll do one more example before wrapping up for this tutorial. This script will create some HTML and text.<script type="text/javascript"><!--document.write("<h1>Main Title</h1>");document.write("<p align='right'>Body</p>");//--></script>Note that when quoting attribute values, you have to use single quotes, as if you used double quotes the write method would think the string was over prematurely, and you'd get an error.<noscript>The <noscript> tag is a way you can give alternate content to browsers that don't support JavaScript or to modern users who have turned JavaScript off in their browsers. The way it works is simple: old browsers won't understand the tag and so ignore it and display whatever is inside it. Modern browsers will understand it and skip its contents. Use it like so:<noscript><p>Sorry, your browser does not support JavaScript.</p></noscript>You could also try to give something comparable to what the script is used to produce. In some cases no meaningful equivalent can be written for a JavaScript effect, and so any <noscript> content will be redundant. However, you should always try and use this tag when appropriate — it helps keep your content accessible. Modern Web Design Using JavaScript & DOMJavaScript is back! This is the best book on the subject I’ve ever read, showing you step-by-step the smartest ways to create usable, useful DHTML effects to enhance your site. SitePoint ships anywhere in the world and you can download the first 4 chapters for free. Read our review.Keep Learning // Event Handlers > Go! Go!Other JavaScript Articles // Basic JavaScript >Event Handlers >Writing Scripts >Functions >Objects and Properties >Form Validation >Advanced DOMs >Support Detection >Popup Windows >DHTML Explained >Scripting Frames >Cookies >Ajax >Date and Time Scripts >Add to Favorites Link >Drop-down link box >What’s Related // Basic Perl >< Homepage | Full Index | Section Index > if (typeof window.Delicious == "undefined") window.Delicious = {}; Delicious.BLOGBADGE_DEFAULT_CLASS = 'delicious-blogbadge-line';Please support HTMLSource by making a small donation.Thanks to our many supporters!Starting Off Start Here ·My First Site ·Lessons Text ·Images ·Tables ·Frames ·Forms ·Stylesheets ·Scripting JavaScript ·CGI Scripting ·Advanced Accessibility ·Promotion ·Optimisation ·Site Management ·Reviews Books ·Get a better browser, and join over 360 million other happy Firefox users! It’s free!Already a happy Firefox user?Spread the Fire!Web HostingDSL, SDSL, ADSLD&g sunglassesoptimumonlineChicago Website DevelopmentCell Phone AccessoriesSearch and register .co.uk domain names with our partners below:UK Domain Name Registration123 Domain Names UKProfessional Web Site DesignPrice ComparisonCheap Broadband InternetCheaper Business FlightsLife’s not all work — Buy DVDsSpinner RingsProfessional Business CardsArizona Real Estate HTMLSource Toolbox ¤Love us?  faves();Add HTMLSource to your bookmarks!Printable ’Source  Just print pages normally, our stylesheet will sort it out.Tell the world  Recommend HTMLSource to your friends!It’s all the rage  We use (and teach!) only the finest valid HTML and CSS, for your comfort and safety.Translations ¤Contact me if you would like to translate a tutorial. Thanks!Having fun? Being frustrated? Got some comments?We want them!More Resources ¤Links» JavaScript Tutorials by PPKPeter-Paul Koch's superb collection of JavaScript documentation. From the basics to the Level 1 DOM, he covers it all. Damn excellent, and required reading.Books» JavaScript: The Definitive Guideby David FlanaganGo back to top ↑© 2000–2008 · Ross Shannon |
|
