Monday, July 4, 2011

JAVASCRIPT ADVANCED

JavaScript Cookies

Cookies are small text files that sit on your hard disk. Cookies are created when you visit websites that use cookies to store information that they need (or prefer). Websites often use cookies to personalise the user experience - such as remembering your name (assuming you supplied it previously) or remembering the items in your shopping cart from previous visits.


Creating Cookies in JavaScript


*document.cookie ="myContents=Quackit JavaScript cookie experiment;expires=Fri, 19 Oct 2007 12:00:00 UTC; path=/";

PLEASE Remove Firstly All Asterics *


Now check your cookies folder to see if the cookie was created. Alternatively, write code to read the cookie.

Note: If the cookie wasn't created, check the expiry date - it needs to be a date in the future.

You can update this value by using the same code with a different value. If you want to add a second value, simply use a different variable name (for example "myContents2=").


Reading Cookies in JavaScript


*document.write(document.cookie);

PLEASE Remove Firstly All Asterics *



Deleting Cookies in JavaScript

To delete a cookie, you can use the same code you used to create it but this time, set the expiry date in the past:


*document.cookie ="myContents=Quackit JavaScript cookie experiment;expires=Fri, 14 Oct 2005 12:00:00 UTC; path=/";

PLEASE Remove Firstly All Asterics *



Displaying the Current Date


*var currentDate = new Date()
*var day = currentDate.getDate()
*var month = currentDate.getMonth()
*var year = currentDate.getFullYear()
*document.write("" + day + "/" + month + "/" + year + "")

PLEASE Remove Firstly All Asterics *



Results:


4/6/2011



Displaying the Current Time


*var currentTime = new Date()
*var hours = currentTime.getHours()
*var minutes = currentTime.getMinutes()

if (minutes < 10)
minutes = "0" + minutes

*document.write("" + hours + ":" + minutes + " " + "")

PLEASE Remove Firstly All Asterics *



Results:


23:09



Displaying the Current Time in AM/PM Format


*var currentTime = new Date()
*var hours = currentTime.getHours()
*var minutes = currentTime.getMinutes()

*var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}

if (minutes < 10)
minutes = "0" + minutes

*document.write("" + hours + ":" + minutes + " " + suffix + "")

PLEASE Remove Firstly All Asterics *



Results:


11:09 PM



What is an array?

Arrays are a fundamental part of most programming languages and scripting languages. Arrays are simply an ordered stack of data items with the same data type. Using arrays, you can store multiple values under a single name. Instead of using a separate variable for each item, you can use one array to hold all of them.

For example, say you have three Frequently Asked Questions that you want to store and write to the screen. You could store these in a simple variable like this:


*faqQuestion1 = "What is an array?"
*faqQuestion2 = "How to create arrays in JavaScript?"
*faqQuestion3 = "What are two dimensional arrays?"

PLEASE Remove Firstly All Asterics *



Creating Arrays in JavaScript

Most languages use similar syntax to create arrays. JavaScript arrays are created by first assigning an array object to a variable name...


*var array_name = new Array(number_of_elements)

PLEASE Remove Firstly All Asterics *



then by assigning values to the array...


*array_name[0] = "Array element"

PLEASE Remove Firstly All Asterics *



So, using our prior example, we could write:


*var faq = new Array(3)
*faq[0] = "What are JavaScript arrays"
*faq[1] = "How to create arrays in JavaScript?"
*faq[2] = "What are two dimensional arrays?"

PLEASE Remove Firstly All Asterics *



Displaying Array Elements



Creating Two Dimensional Arrays


*var faq = new Array(3)

*for (i=0; i <3; i++)
*faq[i]=new Array(3)

*faq[0][1] = "Arrays"
*faq[0][2] = "What is an array?"
*faq[0][3] = "An ordered stack of data"

*faq[1][1] = "Arrays"
*faq[1][2] = "How to create arrays?"
*faq[1][3] = "Assign variable name to array object,
then assign values to the array."

*faq[2][1] = "Arrays"
*faq[2][2] = "What are two dimensional arrays?"
*faq[2][3] = "An ordered grid of data"

PLEASE Remove Firstly All Asterics *



Basic innerHTML Example


<*script type="text/javascript">
*function Msg1(){
*document.getElementById('myText').innerHTML = 'Thanks!';
}
*function Msg2(){
*document.getElementById('myText').innerHTML = 'Try message 1 again...';
}
<*/script>
<*input type="button" onclick="Msg1()" value="Show Message 1" />
<*input type="button" onclick="Msg2()" value="Show Message 2" />
<*p id="myText">



PLEASE Remove Firstly All Asterics *



Results:









Formatting with getElementById


<*script type="text/javascript">
*function changeColor(){
*var newColor = document.getElementById('colorPicker').value;
*document.getElementById('colorMsg').style.color = newColor;
}
<*/script>
<*p id="colorMsg">Choose a color...


<*select id="colorPicker" onchange="JavaScript:changeColor()">
<*option value="#000000">Black
<*option value="#000099">Blue
<*option value="#990000">Red
<*option value="#009900">Green
<*/select>

PLEASE Remove Firstly All Asterics *



Results:



Choose a color...







InnerHTML With User Input


<*script type="text/javascript">
*function showMsg(){
*var userInput = document.getElementById('userInput').value;
*document.getElementById('userMsg').innerHTML = userInput;
}
<*/script>
<*input type="input" maxlength="40" id="userInput"
onkeyup="showMsg()" value="Enter text here..." />
<*p id="userMsg">



PLEASE Remove Firstly All Asterics *



Results:








THANK YOU
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)