Javascript Lessons

Lesson 3: If statements in Javascript

The next two videos take you through how to write a simple Login form in Javascript

The steps are below as some students had trouble following the videos:

1) Open Google Chrome browser

2) Visit https://jsbin.com

3) in The HTML panel on the left between the <body></body> tags type in the following:

<h1>Login</h1>
<p>Please enter your details</p>
<label>Username</label>
<input type="text" id="username" />
<br>
<label>Password</label>
<input type="password" id="password" />
<br>

<input type="submit" value="Click here to login" onclick="login()"/>

You should see a heading, paragraph, textboxes, labels and one button appear on the output frame (on the right of the screen)

Take this opportunity to Save your work (File > Save snapshot should give you a special URL in the Address bar of your browser. If that doesn’t work then try File > Clone)

4) In the Javascript panel in the middle (and if it doesn’t appear click the Javascript button in the middle)

Type the following code:

function login(){
  var uname = document.getElementById("username").value;
  var pword = document.getElementById("password").value;
  //alert(urname + " " +pword);
  if(uname=="Bob" && pword == "cake"){
   alert("welcome you are now logged in!");
  }else{
   alert("incorrect login-please try again!");
  }
}

Try logging in with username Bob and password cake – you should get “Welcome you are now logged in”

Anything else will be “Incorrect login…”

Once this works try changing the username and password in the “if” line to something else and test it again.

(If you’re feeling more confident you could watch the second video to see how you can dynamically add pictures depending on whether the are logged in)