JavaScript input and variables

JavaScript is a scripting language, a lightweight programming language, specifically designed for adding functionality to the elements of web pages.

Today we are going to look at some basic concepts in JavaScript that will allow us to interact with the browsers.

The power of writing code is that we can build designs that react and change to various input, whether it is user interaction through the mouse, keyboard, touchscreen or other inputs.

The Console

Let's go ahead and open the JavaScript console (in Google Chrome).

View > Developer > JavaScript Console

CAj

The console in the browser is sort of like the Terminal app for OSX, it's a text based interface for the application. We're going to add a series of commands and see what happens.

console.log

console.log() is a JavaScript function that can be used to report things that are happening in the program to the developer console. Like all languages, we need a way to print things to the console to see what works and doesn't it. It's extremely useful and easy to use, but you have to remember to be specific.

You can put pretty much anything in the argument parentheses for console.log(), so make sure it's something useful, like an element, a variable, or something else that you want to be able to read. This is a good way to read data from various events.

When you have the console open, any statement you type without an operator will be evaluated as if it was inside a console.log() call.

Start by typing into the console.

document

Look familiar? This is our HTML document, interpreted as a node structure by the Document Object Model.

What is the document object model?

  • DOM
  • DOM Examples

    • We'll cover DOM in detail in another class.

    Okay, let's try a couple more lines: 

    document.body
document.body.children
document.body.style
document.body.style.color = "purple";

    Try this:

     document.write("Hello world!");

    We could write our entire HTML document this way, but its easier to write some HTML and then modify it with JavaScript.

     var elem = document.createElement("h1");
 elem.innerHTML = "JavaScript is kewl!";
 document.body.appendChild(elem);

    Variables

    In Javascript, variables are declared with var regardless of what type of information it holds.

    Variables are pieces of data stored in the computer memory that are referenced by the variable name created by the developer.

    Data storage: var, const, let

    Creating a var stores information in the computer's memory with the name of the variable as a short code. Starting in 2015, JavaScript introduced two new keywords for data storage: const and let.

    const is short for constant and it make prevents the rebinding of values. This means you can't assign a constant the value of 7 and then change it to 20.

    let x = 0; x = 1; // ok const y = 0; y = 2; // Uncaught TypeError: Assignment to constant variable.

    let is like var but block scoped. This is a bit more complicated and we'll discuss it more later in the semester.

    button

    A button element is one of the simplest input elements though it isn't as popular as it once was. Here it is in HTML:

    <button id="submit">Click me.</button>

    We get a reference to the button using the document.getElementById method in JavaScript:

    const submitButton = document.getElementById("submit");
console.log(submitButton);

    For now, let's write a very simple event handler to tell our program the button is clicked.

    submitButton.onclick = function(event) {
	console.log(this);
	console.log(event);
	console.log("You clicked me :)");
};

    this refers to the element the event listener is bound to.

    this doesn't always refer to an element, in some cases it refers to funcion scope, but for now this will typically refer to an element bound to an event listener. More on this.

    event is an optional argument for the function that gives you data about the event itself, such as what type of event it was, the element, the position of the click within the element, modifier keys and other info.

    input

    There are different types of input. Today we'll just use a text input:

    <input id="name" type="text" placeholder="Input name">

    We can use JavaScript to grad the value the user types in:

    const nameInput = document.getElementById("name");
submit.onclick = function() {
	console.log(nameInput.value);
};

    Add it all up

    We can get the users input and then give them a response. This is one of the most fundamental basics of web interactions. We can also create new HTML nodes do add that information.

    Later we will grab this information and store it in a database. For now, we can simply return a response to the user.

    The HTML.

    <input id="name" type="text" placeholder="Name"> <input id="password" type="password" placeholder="Password"> <button id="submit">Login</button> <p id="login-message"></p>

    JavaScript

    const submitButton = document.getElementById("submit"); const nameInput = document.getElementById("name"); const passwordInput = document.getElementById("password"); const message = document.getElementById("login-message"); submitButton.onclick = function() { message.textContent = "Welcome " + nameInput.value + "."; };