In the previous article we discussed about introduction to javascript, in this article we will discuss about how to write a javascript code, where we can add javascript in our web pages, how to use tools that are built in our web browser, how to validate HTML5/javascript code.
Validation of HTML5 document
In order to validate HTML5 code, we write the following code.
<!DOCTYPE html>
<html>
<head>
<title>TheGeekyWay.com</title>
</head>
<body>
<h1>Welcome to TheGeekyWay.com</h1>
</body>
</html>
There are various validators online to check the validation, the reason we are doing this so as to correct them now as it might create a problem in future when we are writing the code. The famous validator is http://html5.validator.nu/ validator. Copy and paste the code there, and select the text field and click on validate. After validation you must get this green box.
If you are getting a red/pink box, please recheck the code.
Find your Javascript editor
A good editor is a must, some features that might help you to determine what makes a good editor.
Code is more writable
- Auto-typing
- Block balancing
Code is more readable
- Syntax Highlighting
- Code Folding
- Function navigation
Some of the good editors are
- Sublime Text(Windows, Linux, Mac)
- Adobe Dreamweaver(Mac, Windows)
- Aptana Studio(Mac, Windows, Linux)
- BBEdit(Mac)
- Text Wrangler(Mac)
Browsers
In this section we are going to discuss browsers and web consoles, various tools that are used for intersection between browsers and web pages. For now you just should pick one, any browser you pick will probably have some tools built in.
Here are some of the options :-
Google Chrome
- Console : Developer Tools
- Developer Version : Chrome Canary (if you are a serious developer then you should use chrome canary, it has great development tools).
Firefox
- It has a web inspector but generally speaking if you want to do any serious work you need to have a firebug addon.
Safari
- Console : Web inspector
- Developer version : Webkit Nightly
Internet Explorer
- F12 Developer Tools(built-in)
Writing your first javascript code
In order to write our first javascript code, we need to include a script tag in the head section of html coding (later in the articles Ill show why we should never use script tag in javasctipt inside html) but for now, since the code is small, so we can use this method.
Analyze the following code
<html>
<head>
<title> TheGeekyWay.com </title>
<script type="text/javascript">
function replace() {
var myValue = document.getElementById('textBox1').value;
var getTitle = document.getElementById('title');
if (myValue.length == 0) {
getTitle.innerHTML = "Nothing entered, enter a valid character";
return;
}
else {
getTitle.innerHTML = myValue;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1 id="title">Welcome to TheGeekyWay.com</h1>
<input type="text" id="textBox1" />
<input type="button" value="Submit" id="myButton" onclick="replace()" />
</div>
</form>
</body>
</html>
[codepen_embed height=220 theme_id=3 slug_hash='wLDGe' user='Deep_Singh' default_tab='Result' animations='run'/]
Remember that all your javascript code will be written under script tag with the type "text/javascript". Now lets analyze line by line, in the first line we are creating a variable myValue which gets the value from textbox via getElementById() method which takes the value from the text box id, similarly we take the id from title. In the if condition, if the length of the code entered is 0, then it will display "Nothing entered, enter a valid character", else it will take the value from textbox and put the value in title. (Remember that this is just the starting of the javascript series tutorial, its highly recommended not to put your javascript code under the head tag, the exact reason will be discussed in the following tutorials.
Hope this tutorial finds you interesting, hit the following social buttons below and spread this article.
Posted By: Sanyam Khurana
The Geeky Way is founded by Sanyam Khurana. He graduated from Georgia Tech, Atlanta, US with a Master's degree in Computer Science. He goes by 'CuriousLearner' all over the web & has spoken at many international conferences. He likes to contribute to FOSS. He is listed as an individual contributor of the Django project, bug-triager for CPython & has his name listed in the credits section of every browser ever released by Mozilla. In his free time, he likes to improve his guitar skills or binge-watch series.. You can find him on Twitter