Add to collection(s) Add to saved
  1. Engineering & Technology
  2. Web Design

Lecture 10

advertisement 
CGS 3066: Web Programming and Design
Spring 2016
Introduction to JavaScript
What is JavaScript?
•A programming language that can be executed in every modern browser.
•“Interpreted” language
–Do not need to be compiled before execution.
–Must be executed by an interpreter. Browsers come with their own
JavaScript Engine (e.g. V8 in Chrome, Gecko in Mozilla)
•Written in scripts, executed at the client side(browser)
–To interact with the user locally
–No need to refresh the page, less traffic for server
Are Javascript and Java Similar?
● No!
● Java is a full-fledged object-oriented programming language,
popular for developing large-scale enterprise applications
and web applications
● Javascript is meant for use in Web programming only
● No File I/O capability, networking functions
● Targeted for HTML authors
● Faster alternative to Java in web applications
What can we do with JavaScript?
• A lot
•Most common uses include
–Interaction with user through pop-up boxes
–Access any element in the document and manipulate its look,
content and attributes
–Create new elements and content and apply them to the document
when and if they are needed
–Event handling: execute operations when certain events are
detected(button clicked, key pressed, mouse hovered, page loaded,
value of some HTML element changed, or simply at specific time
interval)
Javascript usage examples
•Form validation
•Survey/Questionnaire design with dynamic contents
•Draw and animate graphic elements
•Create User interface widgets(e.g. Search box with autocomplete,
draggable and resizable objects)
How to use JavaScript
•JavaScript code can be inserted into a HTML file.
–In both <head> and <body>
•For example
<head>
<title>JS Hello World</title>
<script type="text/javascript">
window.alert("Hello World");
</script>
</head>
* The type attribute ("text/javascript“) is required for HTML4,
optional for HTML5
How to use JavaScript
•JavaScript code in HTML must be inside the <script> tag.
•JavaScript can be also included from external sources using <script> tag.
•Just put the following into <head> or <body> tag
<script src="myScript.js“ async defer></script>
• async tells the browser to load script from source asynchronously (in parallel with
loading HTML content )
• defer tells the browser to load script after the entire HTML document is loaded
JavaScript Syntax
•JavaScript’s basic syntax is identical to that of C++ and Java.
•// begins a comment that ends at the end of the line
•/* and */ may be used to contain multiline comments
•For instance
//This is Inline comment
/*Multiline comment*/
•<script> tags typically contain one or several Javascript ‘statements’
•statements must be separated by new lines or the semicolon(;) character
JavaScript Variables
•
•
•
•
Named variables are used to store data values.
The “var” keyword is used to declare variables.
“=” is used to set values to variables.
Example:
var length;
length = 6;
• Variables may be declared and defined in a single statement:
var length=6;
• Unlike HTML, Javascript variables are case-sensitive
JavaScript Variables
•JavaScript does not have typed variables.
–The variable declarations do not specify a data type for the variables
–May be used to associate values of any type to a variable
–E.g.
Integer: var num1 = 10;
Floating point numbers: var PI = 3.1416;
Alphabetic Character: var color = ‘c’;
String of Characters: var firstname = “David”// ‘David’ also works
Booleans : var x= true; var y= false;
Empty/null value: var x=null; //not NULL or Null;case-sensitive
Or, Arrays,Objects etc.
JavaScript Variables
•JavaScript has dynamic types.
•A Variable having value of a certain may be re-assigned to contain another
data type
var x; //no data type
var x = 5; //it is a number
x = “Steven” //change to a string
• You can use the JavaScript typeof operator to find the current data type
of a JavaScript variable.
window.alert(typeof "John"); //prints “string”
JavaScript Operators
● Arithmetic: +, -, *, /, %, ++, -https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators
● Assignment: =, +=, -=, *=, /=, %= etc.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators
● Relational/Comparison: <, >, <=, >=, ==,===, !=
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators
● Logical: &&, ||, !
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators
JavaScript String Concatenation operator
● The (+) operator is used to concatenate/join the operands
when at least one operand is of String type
var x=“Foo”+”bar” //x becomes ”Foobar”
var y=“ben”+10 //y becomes ”ben10”
• (+=) may also be used for concatenation, depending on
the context
var x=5;
x+=5;
//x is 10
var y=“5”
y+=5//y is “55”
x+=y //x is “1055”
Javascript Input/Output capabilities
• Javascript can perform limited Input/output through pop-up boxes
• To generate a pop-up box:
window.alert("Hello\nworld!");
• Use ‘\n’ to enter new line inside pop-up message
• To read input from pop-up:
var name= window.prompt(“Enter your name”);
* alert() and prompt() also works even if not preceded by “window.”
Javascript Input/Output capabilities(2)
• To print some content directly to the web page, use document.write()
function:
document.write(“plain HTML content");
document.write("<h1>we can also write Content <br>
with HTML tags</h1>");
• document.writeln() automatically adds a line at the end of string
document.writeln(“HTML content with newline");
Javascript Input/Output capabilities(3)
• Most current browsers provide access to the browser's debugging
console. Although a non-standard feature, the console is frequently
used be developers to print and inspect data in bulk
• To access the console output , press F12 and click on ‘console’
• To print message to the console, use the console.log() function
console.log(" press f12 or right click to Inspect Element. \n
Then click Console to find this message!");
Download
advertisement