Javascript : variables and parameters

Javascript:variables and parameters 20 March 2014

Rememberjavascriptis very, very case sensitive

javascript console • Shows errors • Lets you write messages and intermediate results console.log ( whatever helps);

Using jsfiddle • Validation • Testing • Cut and paste • Add HTML and CSS if you are having problems

What we want to do

Form with input, button, output HTML JavaScript

Add data HTML JavaScript

Push button and input data sent to javascript HTML JavaScript

Javascript uses the data to create a new result HTML JavaScript

And moves it to the output location HTML JavaScript

How do we do it?

variables • A place to hold a value • Mailbox: know where to pick up my mail; don’t know what’s in it • How to define? varname; varname = initial-value;

Assignment statements target = new-value; • CHANGE the value of the target variable TO the new-value • new-value can be a constant, a variable, or an expression x = 3; x = y; x = x+ 5;

Using values from forms • Value in the form can be treated just like a variable! • Giving it a value • User input • Assign it a value in an onclick • Define it in the HTML

FUNCTION: collection of instructions HTML JAVASCRIPT (function.js) function doit () { alert(“Hi!”); } <head> <script src=“function.js”></script> </head> <body> <button type=“button” onclick=“doit();”> </body>

parameters • Just a special type of variable • Something that you hand to the function • Q: Many users: how do you name? • A: Give it its OWN names to use locally • Q: How do you match up? • A: By POSITION

FUNCTION with parameters HTML JAVASCRIPT (function.js) function doit(a,b) { var c = a*b); alert(“product is ”+c); } <head> <script src=“function.js”></script> </head> <body> <button type=“button” onclick=“doit(3,5);”> </body>

Return value return (value); • Want to get information BACK to HTML • With a return, the function has a VALUE • Can be used anywhere you can use a constant or variable • Alert • Assignment statement

FUNCTION with return HTML JAVASCRIPT (function.js) function doit(a,b) { var c = a*b); return(c); } <head> <script src=“function.js”></script> </head> <body> <button type=“button” onclick=“alert(doit(3,5));”> </body>

Javascript : variables and parameters