Coding with JavaScript: Hyperlinks are an important first step in creating a web page that responds to the user. But if we want to code a page that is really interactive and changes according to what the user does, we need to use a new programming language called JavaScript with our HTML. JavaScript is the most popular programming language in the world. It transforms an HTML and CSS web page by making it interactive. We need JavaScript to do all sorts of useful things, such as making buttons and alerts and storing information.
In this lesson, we are going to learn how we can use JavaScript with HTML to create a password so that the information about the secretinfo.html is kept safe from the cyber-criminals in the wild.
We saw earlier how HTML documents are made up of different elements and that you use attributes to change those elements. JavaScript also has its own syntax or set of rules, for writing code. JavaScript syntax is made up of pieces of code called statements, variables, operators and functions.
Let’s learn about them and see how we can use them to build the password.
Coding with JavaScript: Adding JavaScript to your HTML page
Before you can start writing JavaScript you need to tell your browser that you are switching from HTML to JavaScript. You do this by using the < script > tag.
If you don’t put your JavaScript code between the opening and closing < script > tags your code won’t run. You can have as many < script > tags as you want in your HTML document and you can put them inside either the < head > or < body > on your page.
<!DOCTYPE html> <html> <head> <title>Password</title> </head> <body> <script> </script> </body> </html>
Here the < script > tag is inside the < body > of our page.
Sometimes we call this a < script > block.
Coding with JavaScript: JavaScript Statements
When we write an instruction for our browser in JavaScript, we call this writing a statement. JavaScript programs normally contain many statements. A statement usually starts with a keyword that tells you what action it will perform.
It always ends with a semi-colon (;). Your browser runs one statement after another in the order they are written.
Let’s look at some JavaScript statements.
When we save this code and run it in our browser, this happens:
<!DOCTYPE html>
<html>
<head>
<title>Password</title>
</head>
<body>
<script>
alert("We need a password urgently!"); //these are statements followed by semi-colons
alert("Use the password GabbaGabbaHey"); //these are statements followed by semi-colons
</script>
</body>
</html>
The statements in the code above are followed by the following code:
//these are statements followed by semi-colons
These are comments in JavaScript. Comments are for documentation purposes and do not affect the program execution in any way. Programmers use comments to keep the code documented and organized.
The two statements between the opening and closing < script > tags have run one after another, popping up two alert boxes with different messages inside.
An alert is a piece of JavaScript called a function, and it’s built into your web browser. We’ll learn more about it later.
JavaScript is case sensitive, so it’s important to make sure you have used the correct capital letters.
If you have to choose a name for a piece of JavaScript, you can’t leave spaces between words. A good way to write two words is to use camelCase.
CAMELCASE is the practice of joining two words together to form one word. The first word starts with a lower-case letter and the second word begins with an uppercase letter, but there is no space between them, just like the humps of a camel. An example of camelCase is sayHello.
