Computer Science 103 Chapter 3 Introduction to JavaScript

JavaScript What is it? Comments, Print text Variables assignments & expressions Control Structures Functions & external JavaScript files

What is JavaScript? JavaScript is a scripting language that allows web pages added flexibility and functionality. It is not HTML, though it works with HTML. – HTML pages are static, JavaScript can be dynamic. – JavaScript is a programming language, HTML is not.

What is JavaScript Cont ’ d JavaScript code is enclosed in All JavaScript code must be in between these tags.

Comments & Printing text Comments are code that is not printed in the browser, they are only viewable in the source. JavaScript comments, different than HTML: – // line comments – /* block comment line 2*/ Comments are useful: – Explain your code to other programmers – Help you remember what your code does

Comments & Printing text document.write() – Writes a line to the webpage. – document.write("Hello World!"); document.writeln() – Writes a line to the page with a carriage return at the end. – Must be between … tags – document.writeln("Hello World");

Variables Assignments A variable is a place to store a value. Three types of variables – Number (12543) – Logical/Boolean (TRUE/FALSE) – String ("HELLO") To assign a value to a variable use “ = “ – x = 42 y = false

Expressions An expression is a statement that JavaScript can evaluate to produce a value. – z = x + y (Numeric) Adds x & y – z = x + y (String) Concatenates text x and text y together Concatenates "box" + "check" is equal to "checkbox" z = "hello" + "world" is equal to "helloworld" – Standard -, *, / can also be used for numbers

Expressions A simple example with integers myNumber = 10; theAnswer = (myNumber + 5) / 5; document.writeln( " The answer is: " + theAnswer); A simple example with text myFirstName = "Joe"; myLastName = "Schmoe"; document.writeln(myFirstName + " " + myLastName);

Control Structures IF ….Then statement – The word if. – A conditional expression enclosed by parentheses. – Executable statements following the conditional expression. Example if (5 > 4){ document.writeln("You are correct!"); }

Control Structures If ….another example var number = 5; if(number == 4){ //this line will not print document.writeln("Number = 4"); } else{ //this line will print document.writeln("Number = " + number); }

Control Structures While statement – First checks if a conditional statement is true – If true, it loops through a set of executable statements until the conditional statement becomes false. Example var x = 4; while(x > 2){ document.writeln("x = " + x); x--; }

Functions Function – A reusable code-block that will be executed by an event, or when the function is called. – Should be defined in HEAD section for better organization – alert(), confirm(), and prompt() are built-in functions – It is very useful to make your own functions to perform repeated tasks

Example that requires two parameters function max(num1, num2){ if(num1 > num2) return num1; else return num2; } Functions

Example of how to call the function max x = 5; y = 6; z = max(x, y); document.writeln("The largest number was equal to " + z); Functions

Including External files – Useful for calling frequently used JavaScript on many pages – The external file only contain JavaScript code – Could be used to include the Honor Code on every page Example //other JavaScript goes here External.js files