JavaScript 101, Beginner's Guide to Learning Block / Inline JavaScript JavaScript is a programming language that web browsers understand. You can use it to make your web pages interactive by: Responding to user actions and changes on the pageManipulating the web page’s contents and behaviourCommunicating with the user directly You can do just about anything you want with a web page, using JavaScript. In this introductory tutorial and the series to follow, I’ll introduce the JavaScript language and how to write it, through a series of practical worked examples. Example 1: Hello World! “Hello World!” What we want to do When the user clicks a button, show the message, “Hello World!”. Step 1: Create a button Our web page needs a button to click: Let’s explain the various bits of the HTML: Try clicking the button… Did anything happen? This is exactly right, because we haven’t told the page that anything should happen when the button is clicked. Making something happen with inline JavaScript The easiest way is to write what we want to happen into the button tag itself.
Using prototype.js v1.4.0 last update: August 18th 2007 Table of Contents What is that? In case you haven't already used it, prototype.js is a JavaScript library initially written by Sam Stephenson. This amazingly well thought and well written piece of standards-compliant code takes a lot of the burden associated with creating rich, highly interactive web pages that characterize the Web 2.0 off your back. When I first started trying to use this library, a few years ago, I noticed that the documentation was definitely not one of its strongest points. I'm also offering an un-official reference for the objects, classes, functions, and extensions provided by this library. As you read the examples and the reference, developers familiar with the Ruby programming language will notice an intentional similarity between Ruby's built-in classes and many of the extensions implemented by this library. toc Related article Advanced JavaScript guide. The utility functions Using the $() function Using the $$() function Tricked out strings
Cross-Browser.com Painless JavaScript Using Prototype [JavaScript & DHTML Tutorials] Form.Observer and Form.Element.Observer allow you to watch a form (or, in the latter case, a single form element) and trigger callbacks when the data changes. There are actually two flavours of each observer that check for value changes. The first is a periodic observer, which works like this: new Form.Observer($("myform"), 1, myCallBackFunction); new Form.Element.Observer($("myfield"), 1, myCallBackFunction); These observers check every second whether or not the data has changed and, if it has, will call myCallBackFunction. The second type of observer is event-based and will only perform the check when change or click events are produced for the elements. new Form.EventObserver($("myform"), myCallBackFunction); new Form.Element.EventObserver($("myfield", myCallbackFunction); If all the fields in the form you're observing support an event handler, this is a much more efficient way to observe the form. Working the DOM The Element Object See the full list at Sergio Pereira's site. "Finally!"
JavaScript Kit- Your comprehensive JavaScript, DHTML, CSS, and Ajax stop Labs - GreyBox A pop-up window that doesn't suck. Introduction GreyBox can be used to display websites, images and other content in a beautiful way. Why use GreyBox: It does not conflict with pop-up blockers It's only 22 KB! It's super easy to setup It's super easy to use You can easily alter the style as it is controlled through CSS Examples One website To trigger GreyBox you'll only need to append a rel tag on your a tags: <a href=" title="Google" rel="gb_page_fs[]">Launch google.com in fullscreen window</a> Website gallery Image gallery It takes very little code to display image galleries: Installation Step 1 Append following to your header section. <script type="text/javascript"> var GB_ROOT_DIR = " GB_ROOT_DIR should be absolute. Step 2 Append also following scripts and one stylesheet: AJS_fx.js is optional. Step 3 You are ready to use GreyBox. Where could it be used? What browsers are supported? Safari Firefox 1.5+ Internet Explorer 5.5+ Opera 8.5+
AJAX Control Toolkit - Home Quick Guide to Prototype Introduction JavaScript’s increasing popularity throughout the web makes it more important than ever to make sure our client side code is implemented with a nice mix of stability, speed, and reusability. One of the best ways for accomplishing this is to use a simple library and syntax to use as a foundation for every project. After our readers pointed out in an previous feature that our frequent use of Prototype syntax was making things a bit confusing, we decided it would be best to create a quick reference page for the library to help ease the learning curve for a lot of developers out there. Getting Started After you have downloaded the files and placed them in your preferred directory, all you need to do is include them in your html document like so: Boom. Note - This tutorial is based off of version 1.3.1. $() Function The most used and convenient function, $(), provides an easy way of getting a handle on a DOM element. node = document.getElementById("elementID"); node = $("elementID");
JavaScript Object-Oriented Programming Part 1 [JavaScript & AJAX Tutorials] This article was written in 2001 and still remains one of our most popular posts. If you’re keen to learn more about JavaScript, you may find this recent article on TypeScript of great interest. It may be shocking news, but JavaScript is a very powerful object-based (or prototype-based, whatever you wish to call it) language. Yes, JavaScript is a powerful language, not just something that’s handy for image rollovers and other corny, flashy effects. However, very few people who have used JavaScript realize its capabilities. If you’re one of these people, this tutorial is aimed at you. First of all, JavaScript is not a full-blown OOP (Object-Oriented Programming) language, such as Java or PHP, but it is an object-based language. I hope that this article will turn an intermediate JavaScripter who’s itching to learn objects, into an expert, keen on the exciting object-oriented JavaScript world! In this tutorial, you’ll learn: JavaScript’s Primitive Data Types var BooleanValue = true; Typeof
qooxdoo » Home Prototype Gets Some Serious Syntactic Sugar I’ve hoped for a while that Prototype would implement something similar to what JQuery has going on for DOM elements. The current Element object in Prototype is packed full of great stuff, but how you access those methods isn’t exactly ideal. Here is an example of something you might have done using Prototype: this . element = $ ( 'element' ) ; Element.hide ( this . element ) ; Now we can do this: this . element = $ ( 'element' ) ; this . element .hide ( ) ; All of the methods of Element are now accessible this way. $ ( 'element' ) .visualEffect ( 'highlight' ) ; Now thats just sweet stuff. Now we can call the contrast method above in the same fasion: $ ( 'element' ) .contrast ( ) ; It’s not all good though, there are some things you can’t do such as chain methods of Element together or any other method that doesn’t return a node. However, this will work: $ ( 'element' ) .contrast ( ) .show ( ) ; $ ( 'element' ) .show ( ) .contrast ( ) ; Thats a quick rundown of the new features.