JavaScript
JavaScript is a web language used for elements on a web page that are subject to change or can be changed manually. Think of the date and time, they are continually changing and if you wanted to include them on a page you wouldn't want to update them every single second.Tell me more
Like CSS and HTML, JavaScript has a tag to let the web browser know what we want it to do. The tag is <script></script>. The simplest thing we can do with JavaScript is to write something on a web page. We do this with document.write like this:If you copy and paste this text into your text editor and save your file with a html extension (e.g. index.html) then drag it into your web browser, you'll see that it works. But let's do something with the code that makes use of an element that is "subject to change", the date and time.
<!DOCTYPE html>
<html>
<head></head>
<body> <script>document.write(Date());</script>
</body>
</html>
<html>
<head></head>
<body> <script>document.write(Date());</script>
</body>
</html>
The browser here provides our code with the date and time, and we write it on the screen.
Getting even more dynamic
Let's extend things a little further and respond to a user input.
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="text" onchange="document.write(value);"></input>
</body>
</html>
<html>
<head></head>
<body>
<input type="text" onchange="document.write(value);"></input>
</body>
</html>
Copy and paste this as before and load it into your web browser. Now type in the input box and press return or tab and notice what happens. The observant among you will notice that we haven't used <script></script> tags here and you might think that "input" is some kind of pseudo script tag, but it isn't, all of the JavaScript is contained in the bit that reads
onchange="document.write(value);"
The onchange part tells the browser to perform this when something about the input box changes, as it does when we write in it and then press enter; the document.write bit does exactly as it did above; and, the value is literally the "value" or the text entered in the box. It is known as passing a function a value.
Creating your own functions
The more sophisticated use of JavaScript involves creating your own functions to manipulate values passed to them. Let's suppose we want users to write their name in the box and we want to then say hello to them. We'd need to create a "function" that looks like this:
function sayHi(value) {
return "hello "+value;
}
The function's name is sayHi and it takes a variable, i.e. the thing the user writes in the input box, and can make use of this thing it calls "value", although it wouldn't matter if we called it potato instead, so let's do that.
function sayHi(potato) {
return "hello "+potato;
}
The quotation marks denote text and the addition sign is doing something called concatenating (i.e. joining the text to the variable), while return is literally returning the resultant text and sending it back to where it came from, i.e. the document.write bit further down the page.
Great, but how do I use it?
To make use of the code we need to place it inside script tags (yes we need them again now!) and the best place for the function is inside the head of the HTML page.
<!DOCTYPE html>
<html>
<head>
<script>
function sayHi(potato) {
return "hello "+potato;
}
</script></head>
<body>
<input type="text" onchange="document.write(sayHi(value));"></input>
</body>
</html>
<html>
<head>
<script>
function sayHi(potato) {
return "hello "+potato;
}
</script></head>
<body>
<input type="text" onchange="document.write(sayHi(value));"></input>
</body>
</html>
Look at how we've called the function: the text sayHi(value) will be replaced with the stuff that is "returned" from the called function when we pass it the value from the input box and then document.write will put it on the web page.
While the value passed to the function is given the name potato by the function for its own internal workings, we can't actually call the value potato inside the input tag, because "value" has a special meaning here, i.e. the value of what's inside the box.
Is that all?
There's plenty more to learn and I want to cover some of it in a future post on a JavaScript "library" called jQuery, but for now there's one more thing to be aware of and that is the ability of users to disable or turn off JavaScript and the fact that your page should be able to respond to this scenario. Thankfully there's a tag for it, and it's called <noscript></noscript>. Let's add that now.
<!DOCTYPE html>
<html>
<head>
<script>
function sayHi(potato) {
return "hello "+potato;
}
</script></head>
<body>
<noscript>Hello Mate! Don't worry about the box, it won't work for you without JavaScript</noscript>
<input type="text" onchange="document.write(sayHi(value));"></input>
</body>
</html>
<html>
<head>
<script>
function sayHi(potato) {
return "hello "+potato;
}
</script></head>
<body>
<noscript>Hello Mate! Don't worry about the box, it won't work for you without JavaScript</noscript>
<input type="text" onchange="document.write(sayHi(value));"></input>
</body>
</html>
The added text will only appear when you have JavaScript switched off.
I'm not going to walk you through disabling JavaScript on each and every browser, but if you know how or you want to research it, then give the new code a try.
Comments
Post a Comment