 |
|
 |
|
|
| Message |
 Posted:
Fri Apr 24, 2009 12:42 pm Post subject:
Javascript Tutorial (from intro to advanced Javascript) |
|
|
JavaScript has been around for several years now, in many different flavors. The main benefit of Javascript is to add additional interaction between the website and its visitors with just a little extra work by the web developer. Javascript allows industrious web masters to get more out of their website than HTML and CSS can provide.
By definition, JavaScript is a client-side scripting language. This means the web surfer's browser will be running the script. The opposite of client-side is server-side, which occurs in a language like PHP. PHP scripts are run by the web hosting server.
There are many uses (and abuses!) for the powerful JavaScript language. Here are a few things that you may or may not have seen in your web surfing days:
* Clocks
* Mouse Trailers (an animation that follows your mouse when you surf a site)
* Drop Down Menus
* Alert Messages
* Popup Windows
* HTML Form Data Validation
------------------------------Syntax-------------------------------------------
1. Use the script tag to tell the browser you are using JavaScript.
2. Write or download some JavaScript
3. Test the script!
There are so many different things that can go wrong with a script, be it human error, browser compatibility issues, or operating system differences. So, when using JavaScript, be sure that you test your script out on a wide variety of systems and most importantly, on different web browsers.
----------------------------------------------------------------------------------
your first script
To follow the classic examples of many programming tutorials, let's use JavaScript to print out "Hello World" to the browser. I know this isn't very interesting, but it will be a good way to explain all the overhead required to do something in JavaScript.
HTML and javascript code
| Code: |
<html>
<body>
<script type="text/JavaScript">
<!--
document.write("This is my first script, thanks to bajay0124")
//-->
</script>
</body>
</html>
|
Display:
| Code: |
This is my first script, thanks to bajay0124
|
Our first step was to tell the browser we were using a script with the <script> tag. Next we set the type of script equal to "text/JavaScript". You may notice that doing this is similar to the way you specify CSS, which is "text/css".
Next, we added an optional HTML comment that surrounds our JavaScript code. If a browser does not support JavaScript, it will not display our code in plain text to the user! The comment was ended with a "//-->" because "//" signifies a comment in JavaScript. We add that to prevent a browser from reading the end of the HTML comment in as a piece of JavaScript code.
----------------------------------------------------------------------------------
Syntax
Looking at our JavaScript code above, notice that there is no semicolon at the end of the statement "document.write(This is my first script, thanks to bajay0124 )". Why? JavaScript does not require that you use semicolons to signify the end of each statement.
If you are an experienced programmer and prefer to use semicolons, feel free to do so. JavaScript will not malfunction from ending semicolons. The only time it is necessary to use a semicolon is when you choose to smash two statements onto one line(i.e. two document.write statements on one line).
--------------------------------Function-----------------------------------------
What is a Function
A function is a piece of code that sits dormant until it is referenced or called upon to do its "function". In addition to controllable execution, functions are also a great time saver for doing repetitive tasks.
Instead of having to type out the code every time you want something done, you can simply call the function multiple times to get the same effect. This benefit is also known as "code reusability".
---------------------------------------------------------------------------------------
Example Function in JavaScript
A function that does not execute when a page loads should be placed inside the head of your HTML document. Creating a function is really quite easy. All you have to do is tell the browser you're making a function, give the function a name, and then write the JavaScript like normal. Below is the example alert function from the previous lesson.
Example:
function popup() {
alert("Hello World")
}
| Code: |
<html>
<head>
<script type="text/javascript">
<!--
function popup() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="popup()" value="popup">
</body>
</html>
|
We first told the browser we were going to be using a function by typing "function". Next, we gave our function a name, so that we could use it later. Since we are making a pop up alert, we called our function "popup".
The curly braces "{,}" define the boundaries of our function code. All popup function code must be contained within the curly braces.
Something that might be slightly confusing is that within our "popup" function, we use another function called "alert," which brings up a popup box with the text that we supply it. It is perfectly OK to use functions within functions, like we have done here. Furthermore, this is one of the great things about using functions!
What we didn't talk about was how we got this function to execute when the button is clicked. The click is called an event, and we will be talking about how to make functions execute from various types of events in the next lesson.
------------------------ Alert-----------------------------------
JavaScript Alert - What is it?
If you do not have JavaScript enabled on your web browser, then you may have been able to avoid "alerts" in your internet adventures. The JavaScript alert is a dialogue box that pops up and takes the focus away from the current window and forces the web browser to read the message.
You may have noticed that you didn't get a JavaScript alert popup when you came to this page. That is because doing so would be in bad taste for a web designer. You see, alerts should be very, very rarely used and even then these following guidelines should be considered when using them.
-----------------------------------------------------------------------------------------
Coding a Simple JavaScript Alert
Just for fun, let's suppose that we are making an alert for some website that asks people to hand over the deed to their house. We need to add an alert to be sure these people are in agreement. The following code will add an alert by using an HTML button and the onClick event.
| Code: |
<form>
<input type="button" onclick=
"alert('Are you sure you want to give us the deed to your house?')"
value="Confirmation Alert">
</form>
|
The string that appears between the single quotes is what will be printed inside the alert box when the user clicks on the button. Continue the tutorial to learn more about the different kinds of JavaScript pop ups that are at your disposal.
---------------------------Confirm--------------------------
JavaScript Confirm
The JavaScript confirm function is very similar to the JavaScript alert function. A small dialogue box pops up and appears in front of the web page currently in focus. The confirm box is different from the alert box. It supplies the user with a choice; they can either press OK to confirm the popup's message or they can press cancel and not agree to the popup's request.
Confirmation are most often used to confirm an important actions that are taking place on a website. For example, they may be used to confirm an order submission or notify visitors that a link they clicked will take them to another website.
--------------------------------------------------------------------------------------
JavaScript Confirm Example
Below is an example of how you would use a confirm dialogue box to warn users about something, giving them the option to either continue on or stay put.
| Code: |
<html>
<head>
<script type="text/javascript">
<!--
function confirmation() {
var answer = confirm("Leave dworld?")
if (answer){
alert("Bye bye!")
window.location = "http://www.google.com/";
}
else{
alert("Thanks for sticking around!")
}
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onclick="confirmation()" value="Leave Dworld">
</form>
</body>
</html>
|
Note the part in red. This is where all the magic happens. We call the confirm function with the message, "Leave Tizag?". JavaScript then makes a popup window with two choices and will return a value to our script code depending on which button the user clicks.
If the user clicks OK, a value of 1 is returned. If a user clicks cancel, a value of 0 is returned.. We store this value in answer by setting it equal to the confirm function call.
After answer has stored the value, we then use answer as a conditional statement. If answer is anything but zero, then we will send the user away from Tizag.com. If answer is equal to zero, we will keep the user at Tizag.com because they clicked the Cancel button.
In either case, we have a JavaScript alert box that appears to inform the user on what is going to happen. It will say, "Bye bye!" if they choose to leave and, "Thanks for sticking around!" if they choose to stay.
In this lesson, we also used the window.location property for the first time. Whatever we set window.location to will be where the browser is redirected to. In this example, we chose Google.com. We will discuss redirection in greater detail
----------------------------Pop up-------------------------------
JavaScript Popups
Chances are, if you are reading this webpage, then you have experienced hundreds of JavaScript popup windows throughout your web surfing lifetime. Want to dish out some pain of your own creation onto unsuspecting visitors? I hope not! Because websites with irrelevant popups are bad!
However, we will show you how to make windows popup for reasonable occasions, like when you want to display extra information, or when you want to have something open a new window that isn't an HTML anchor tag (i.e. a hyperlink).
--------------------------------------------------------------------------------------
JavaScript window.open Function
The window.open() function creates a new browser window, customized to your specifications, without the use of an HTML anchor tag. In this example, we will be making a function that utilizes the window.open() function.
| Code: |
<head>
<script type="text/javascript">
<!--
function myPopup() {
window.open( "http://www.google.com/" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup()" value="POP!">
</form>
<p onClick="myPopup()">CLICK ME TOO!</p>
</body>
|
This works with pretty much any tag that can be clicked on, so please go ahead and experiment with this fun little tool. Afterwards, read on to learn more about the different ways you can customize the JavaScript window that pops up.
----------------------------------------------------------------------------------
JavaScript Window.Open Arguments
There are three arguments that the window.open function takes:
1. The relative or absolute URL of the webpage to be opened.
2. The text name for the window.
3. A long string that contains all the different properties of the window.
Naming a window is very useful if you want to manipulate it later with JavaScript. However, this is beyond the scope of this lesson, and we will instead be focusing on the different properties you can set with your brand spanking new JavaScript window. Below are some of the more important properties:
* dependent - Subwindow closes if the parent window (the window that opened it) closes
* fullscreen - Display browser in fullscreen mode
* height - The height of the new window, in pixels
* width - The width of the new window, in pixels
* left - Pixel offset from the left side of the screen
* top - Pixel offset from the top of the screen
* resizable - Allow the user to resize the window or prevent the user from resizing, currently broken in Firefox.
* status - Display or don't display the status bar
Dependent, fullscreen, resizable, and status are all examples of ON/OFF properties. You can either set them equal to zero to turn them off, or set them to one to turn them ON. There is no inbetween setting for these types of properties.
------------------------------------------------------------------------------------
Upgraded JavaScript Popup Window!
Now that we have the tools, let's make a sophisticated JavaScript popup window that we can be proud of!
| Code: |
<head>
<script type="text/javascript">
<!--
function myPopup2() {
window.open( "http://www.google.com/", "myWindow",
"status = 1, height = 300, width = 300, resizable = 0" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup2()" value="POP2!">
</form>
<p onClick="myPopup2()">CLICK ME TOO!</p>
</body>
|
Now, that is a prime example of a worthless popup! When you make your own, try to have them relate to your content, like a small popup with no navigation that just gives the definition or explanation of a word, sentence, or picture!
----------------------------Prompt------------------------------
JavaScript Prompt
The JavaScript prompt is a relic from the 1990's that you seldom see being used in modern day websites. The point of the JavaScript prompt is to gather information from the user so that the information can be used throughout the site to give the visitor a personalized feel.
Advertise on Tizag.com
Back in the day, you'd often see prompts on personal webpages asking for your name. After you typed in the information, you would be greeted with a page that had a welcome message, such as, "Welcome to My Personal WebPage John Schmieger!" (If your name just so happened to be John Schmieger).
The JavaScript prompt is not very useful and many find it slightly annoying, but hey, this tutorial is here to educate you, so let's learn how to make that prompt!
--------------------------------------------------------------------------------------
Simple JavaScript Prompt
You can use a prompt for a wide variety of useless tasks, but below we use it for an exceptionally silly task. Our prompt is used to gather the user's name to be displayed in our alert dialogue box.
| Code: |
<head>
<script type="text/javascript">
<!--
function prompter() {
var reply = prompt("Hey there, good looking stranger! What's your name?", "")
alert ( "Nice to see you around these parts " + reply + "!")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="prompter()" value="Say my name!">
</body>
|
------------------------------------------------------------------------------------
Recap on JavaScript Prompt
It sure is a quick way to gather some information, but it is not as reliable an information gatherer as other options available to you. If you want to find out someone's name and information, the best way to request this information would be through the use of HTML Forms. And if you want to use the information you collected in your website, you might use some PHP to get that job done in a more sophisticated manner.
------------------------Advanced Javascript-----------
----------------------------------getElementById-------------
JavaScript getElementById
Have you ever tried to use JavaScript to do some form validation? Did you have any trouble using JavaScript to grab the value of your text field? There's an easy way to access any HTML element, and it's through the use of id attributes and the getElementById function.
----------------------------------------------------------------------------------
JavaScript document.getElementById
If you want to quickly access the value of an HTML input give it an id to make your life a lot easier. This small script below will check to see if there is any text in the text field "myText". The argument that getElementById requires is the id of the HTML element you wish to utilize.
| Code: |
<script type="text/javascript">
function notEmpty(){
var myTextField = document.getElementById('myText');
if(myTextField.value != "")
alert("You entered: " + myTextField.value)
else
alert("Would you please enter some text?")
}
</script>
<input type='text' id='myText' />
<input type='button' onclick='notEmpty()' value='Form Checker' />
|
document.getElementById returned a reference to our HTML element myText. We stored this reference into a variable, myTextField, and then used the value property that all input elements have to use to grab the value the user enters.
There are other ways to accomplish what the above script does, but this is definitely a straight-forward and browser-compatible approach.
------------------------------------------------------------------------------------
Things to Remember About getElementById
When using the getElementById function, you need to remember a few things to ensure that everything goes smoothly. You always need to remember that getElementById is a method (or function) of the document object. This means you can only access it by using document.getElementById.
Also, be sure that you set your HTML elements' id attributes if you want to be able to use this function. Without an id, you'll be dead in the water.
If you want to access the text within a non-input HTML element, then you are going to have to use the innerHTML property instead of value. The next lesson goes into more detail about the uses of innerHTML.
-------------------------------inner HTML----------------------
JavaScript innerHTML
Ever wonder how you could change the contents of an HTML element? Maybe you'd like to replace the text in a paragraph to reflect what a visitor has just selected from a drop down box. By manipulating an element's innerHtml you'll be able to change your text and HTML as much as you like.
-----------------------------------------------------------------------------------
Changing Text with innerHTML
Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages.
However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id. With that id in place you will be able to use the getElementById function, which works on all browsers.
After you have that set up you can now manipulate the text of an element. To start off, let's try changing the text inside a bold tag.
| Code: |
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
|
You now know how to change the text in any HTML element, but what about changing the text in an element based on user input? Well, if we combine the above knowledge with a text input...
----------------------------------------------------------------------------------
By adding a Text Input, we can take to updating our bold text with whatever the user types into the text input. Note: We updated the function a bit and set the id to boldStuff2.
| Code: |
<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p>
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>
|
-----------------------------------------------------------------------------------
Changing HTML with innerHTML
You can also insert HTML into your elements in the exact same way. Let's say we didn't like the text that was displayed in our paragraph and wanted to updated it with some color. The following code will take the old black text and make it bright white. The only thing we're doing different here is inserting the html element span to change the color.
| Code: |
<script type="text/javascript">
function changeText3(){
var oldHTML = document.getElementById('para').innerHTML;
var newHTML = "<span style='color:#ffffff'>" + oldHTML + "</span>";
document.getElementById('para').innerHTML = newHTML;
}
</script>
<p id='para'>Welcome to the site <b id='boldStuff3'>dude</b> </p>
<input type='button' onclick='changeText3()' value='Change Text'/>
|
This was a pretty simple example for changing the HTML of an element. All we did was take the old text that was in the paragraph tag and surround it in a span tag to change the color. However, there are many more things you can do by changing an element's HTML, so don't forget this useful tool!
_________________
Dworld Administrator
Achievements:
[X]Moderator
[X]Administrator
Last edited by bajay0124 on Sat Apr 25, 2009 2:30 am; edited 1 time in total |
|
|
|
 |
|
 |
|
 |
|
|
|
|
|
|
| Message |
| Posted:
Sat Apr 25, 2009 1:38 am Post subject:
|
|
|
| Put this in one pile, it's stupid like this. |
|
|
|
|
|
|
|
| Message |
| Posted:
Sat Apr 25, 2009 1:59 am Post subject:
|
|
|
| :3 wrote: |
| Put this in one pile, it's stupid like this. |
ok Il try... but its too long
_________________
Dworld Administrator
Achievements:
[X]Moderator
[X]Administrator
|
|
|
|
|
|
|
|
| Message |
| Posted:
Sat Apr 25, 2009 2:48 am Post subject:
|
|
|
| Or you can do Part one to Part two. |
|
|
|
|
|
|
|
| Message |
| Posted:
Sat Apr 25, 2009 3:07 am Post subject:
|
|
|
thanks but did you make this or copy it :O 
_________________
dwf.au.tt(OPEN)
dworld.be.tt (WEBSITE)
 |
|
|
|
|
|
|
|
| Message |
| Posted:
Sat Apr 25, 2009 3:10 am Post subject:
|
|
|
| Copy&paste. |
|
|
|
|
|
|
|
| Message |
| Posted:
Sat Apr 25, 2009 4:27 am Post subject:
|
|
|
lol
_________________
dwf.au.tt(OPEN)
dworld.be.tt (WEBSITE)
|
|
|
|
|
|
| |
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
