JavaScript Basics and Usage in Web Development

JavaScript CSC 242 Professor John Carelli Kutztown University Computer Science Department

Introduction to JavaScript A scripting language used to enhance functionality and provide control of web page appearance interpreted all major browsers contain interpreters object-oriented loosely-typed variables declared, but context dependent runs on the client side (in the browser) may need to be enabled in the browser! de-facto standard used in web-pages Professor John Carelli Kutztown University Computer Science Department

JavaScript IO JavaScript is an embedded language it relies on its host environment for IO JavaScript IO options: console.log: writes output to the browser console alert: writes output to pop-up window document.write: writes output to the HTML document Source Dylan Schwesinger Kutztown University Computer Science Department

JavaScript Usage JavaScript code is embedded in HTML using <script> </script> tags <script type= text/javascript > JavaScript code </script> text between <script > and </script> is JavaScript code and is sent to the JavaScript interpreter for execution MIME format for JavaScript is: type= text/javascript however, it is NOT necessary to include the type attribute by default, browsers assume JavaScript in HTML5, so it can be omitted The result returned from the JS interpreter is then, in turn, interpreted by the browser as HTML code Note: the <noscript> tag can be used to define alternate content when JavaScript is disabled or not available welcome.html Professor John Carelli Kutztown University Computer Science Department

JavaScript in an external file JavaScript code can also be placed in a separate file Similar to an external style sheet Use the src attribute in the script tag <script src= file.js ></script> file.js contains the JavaScript code PassArrayDOM.html Professor John Carelli Kutztown University Computer Science Department

Some JavaScript Basics Text is managed using strings String literals are enclosed in single or double quotes Statements end with a new-line (sometimes) or a semicolon A statement does not need to be terminated by a semicolon when it is the only statement on a line But, better to use the semicolon to avoid misinterpretation!!! JavaScript is case-sensitive i.e. case matters Supports C++ style comments both // and /* */ Professor John Carelli Kutztown University Computer Science Department

Variables JavaScript variables must be declared using var The variable type (float, string, ) is NOT specified let can also be used to declare local (block-scope) variables Data type is determined based on usage (context) It may change during execution! addition.html and datatypes.html Professor John Carelli Kutztown University Computer Science Department

JavaScript Variable Naming Rules A variable may include only the characters a-z, A-Z, 0-9, the $ symbol, and the underscore (_) No other characters are allowed in a variable name The first character in a variable name must be a letter, $, or _ Variable names are case sensitive Source Dylan Schwesinger Kutztown University Computer Science Department

JavaScript Types JavaScript data types: Object Function Number: (Integer and Float) String Boolean Null Undefined JavaScript is dynamically typed types of variables do not need to be declared JavaScript is weakly typed some type conversions are automatic Source Dylan Schwesinger Kutztown University Computer Science Department

String Objects The string type represents a sequence of characters The string type must be enclosed by single or double quotes JavaScript supports Unicode, which represents a large portion of the world s languages The escape character is the backslash (\) Concatenationcan use the concat method or the + operator Many methods are supported Multi-line string: A string can be defined over multiple lines by escaping the newline character name = "first_name \ last name"; Source Dylan Schwesinger Kutztown University Computer Science Department

JavaScript Implicit Type Coercion The type of a variable is implicitly converted based on the context in which the variable is used <script> x = "10"; // string y = 3.14; // number z = x * y; // number </script> The typeof() function returns a string representation of a variable s type Source Dylan Schwesinger Kutztown University Computer Science Department

Explicit Type Casting Functions Variable types can be explicitly cast using built-in functions parseInt() cast to Int, Integer Boolean() cast to boolean parseFloat() cast to Float, Double, Real String() cast to string split() cast to array Source Dylan Schwesinger Kutztown University Computer Science Department

First JavaScript Objects document object The document object, managed in the browser, represents the HTML document currently being displayed in the browser resides in the computer s memory Browser contains a complete set of objects that allow script programmers to access and manipulate every element of an HTML document via the document object window object objects managed by the operating system More Examples: welcome2.html, welcome3.html, and welcome4.html Professor John Carelli Kutztown University Computer Science Department

First Example: welcome.html document.writeln( ) Calls the writeln() method from the document object document is a built-in JS object for managing the current document (web page) writes the argument, sending it back to the browser to be interpreted as HTML code accepts a single string argument Adds a newline to the end of the HTML code The newline is in the returned HTML code Does NOT mean a new line (or row) appears in the displayed web page!!! Don t confuse the formatting of the returned HTML code with how it is displayed!!! It still needs to be interpreted by the browser!!! document.write( ) does the same thing, but without the newline in the HTML code Note: both will render the same! Professor John Carelli Kutztown University Computer Science Department

Arithmetic and Assignment Operators Source Dylan Schwesinger Kutztown University Computer Science Department

Equality, Comparison, & Logical Operators Note: === match based on both type and value 0 == is true! 0 === is false! Source Dylan Schwesinger Kutztown University Computer Science Department

Common Language Constructs JavaScript supports C++ syntax for the following: Numerical arithmetical : +- * / % Increment/decrement operations: ++ and String + is concatenation Decision making: if - else if - else(note: else if is two separate words) switch (case statements not limited to integer types) Looping: for - while - do while Examples under Language Constructs: Professor John Carelli Kutztown University Computer Science Department

Selection switch if, else, and else if switch (page) { case ("Home"): document.write("Home"); break; case ("About"): document.write("About"); break; default: break; } if (a > 100) { document.write(">") } else if (a < 100) { document.write("<") } else { document.write("=") } Source Dylan Schwesinger Kutztown University Computer Science Department

Iteration while loops do while loops for loops Example: for (var count = 1; count <= 10; ++count) { document.write("Count:" + count + "<br>"); } break and continue Source Dylan Schwesinger Kutztown University Computer Science Department

Functions Function definitions are similar in syntax to C++ prototypes are not necessary, just the function definition is required maximum.html Similar scoping rules variables defined in a function have local scope variables defined external to (and before) functions have global scope scoping.html Basic arguments are passed by value (numbers, strings, ) Objects are passed by reference (more later ) Global Functions parseInt, parseFloat, isFinite, isNaN, encodeURI, decodeURI globalFuncs.html Professor John Carelli Kutztown University Computer Science Department

Defining a JavaScript Function function function_name([parameter [, ...]]) { // Statements [return] } A definition starts with the keyword function Next is the name of the function, which must start with a letter or underscore, followed by any number of letters, numbers, or underscores Function names are case sensitive The parentheses are required Zero or more parameters, separated by commas A value can be returned from a function with the return statement Source Dylan Schwesinger Kutztown University Computer Science Department

Variable Scope Local variables are accessible in context in which they are defined Global variables are accessible from all parts of the code Function parameters have local scope The var keyword defines a local variable with a scope of the current function Example: function test() { a = 123 // global var b = 456 // local if (a == 123) { var c = 789 // local } } Source Dylan Schwesinger Kutztown University Computer Science Department

JavaScript Objects JavaScript supports object-oriented programming A JavaScript object groups data with functions that manipulate it The data members of an object are referred to as properties The functions of an object are referred to as methods Source Dylan Schwesinger Kutztown University Computer Science Department

Date and Math Objects Date Object methods for manipulating dates and times DateTime.html Date at W3Schools Math Object methods for performing basic mathematical functions exp, trig, sqrt, pow, rounding, Math at W3Schools Professor John Carelli Kutztown University Computer Science Department