CGS 3066 Web Programming and Design Fall 2019
CGS 3066: Web Programming and Design Fall 2019 Introduction to Java. Script
What is Java. Script? • 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 Java. Script Engine (e. g. V 8 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 Java. Script? • 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) • Java. Script can – create an HTML element –add/modify content of an element –add attributes –change attribute values –add/modify styles –can manage event handlers
How to use Java. Script • Java. Script 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 HTML 4, optional for HTML 5
How to use Java. Script • Java. Script code in HTML must be inside the <script> tag. • Java. Script can be also included from external sources using <script> tag. • Just put the following into <head> or <body> tag <script src="my. Script. 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
Java. Script Syntax • Java. Script’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
Java. Script 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
Java. Script Variables • Java. Script 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 num 1 = 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 Arrays, Objects etc.
Java. Script Variables • Java. Script 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 Java. Script typeof operator to find the current data type of a Java. Script variable. window. alert(typeof "John"); //prints “string”
Math object var rand 1 to 10 = Math. floor(Math. random() * 10 + 1); var three = Math. floor(Math. PI); • Methods: abs, ceil, cos, floor, log, max, min, pow, random, round, sin, sqrt, tan • Properties: E, PI
Special Vaues – null and undefined var ned = null; var benson = 9; // at this point in the code, // ned is null // benson's 9 // caroline is undefined • undefined : has not been declared, does not exist • null : exists, but was specifically assigned an empty or null value
Special Vaues – null and undefined var ned = null; var benson = 9; // at this point in the code, // ned is null // benson's 9 // caroline is undefined • undefined : has not been declared, does not exist • null : exists, but was specifically assigned an empty or null value
Java. Script Operators ● Arithmetic: +, -, *, /, %, ++, -- https: //developer. mozilla. org/en-US/docs/Web/Java. Script/Reference/Operators/Arithmetic_Operators ● Assignment: =, +=, -=, *=, /=, %= etc. https: //developer. mozilla. org/en-US/docs/Web/Java. Script/Reference/Operators/Assignment_Operators ● Relational/Comparison: <, >, <=, >=, ===, != https: //developer. mozilla. org/en-US/docs/Web/Java. Script/Reference/Operators/Comparison_Operators ● Logical: &&, ||, ! https: //developer. mozilla. org/en-US/docs/Web/Java. Script/Reference/Operators/Logical_Operators
String type and operations var name = “Dan King"; var f. Name = s. substring(0, s. index. Of(" ")); // “Dan" var len = name. length; // 8 • methods: char. At, char. Code. At, from. Char. Code, index. Of, last. Index. Of, replace, split, substring, to. Lower. Case, to. Upper. Case • char. At returns a one-letter String (there is no char type) • length property (not a method as in Java) • Strings can be specified with "" or '' • concatenation with + : • 1 + 1 is 2, but "1" + 1 is "11"
String Concatenation ● 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 ”ben 10” • (+=) 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”
String type and operations var count = 10; var s 1 = "" + count; // "10" var s 2 = count + " bananas, ah ah ah!"; // "10 bananas, ah ah ah!" var n 1 = parse. Int("42 is the answer"); // 42 var n 2 = parse. Float("booyah"); // Na. N var first. Letter = s[0]; // fails in IE var first. Letter = s. char. At(0); // does work in IE var last. Letter = s. char. At(s. length - 1); • escape sequences behave as in Java: ' " & n t \
String Split/Join • split breaks apart a string into an array using a delimiter –can also be used with regular expressions (seen later) • join merges an array into a single string, placing a delimiter between them var s = "the quick brown fox"; var a = s. split(" "); // ["the", "quick", "brown", "fox"] a. reverse(); // ["fox", "brown", "quick", "the"] s = a. join("!"); // "fox!brown!quick!the"
Javascript Input/Output capabilities • Javascript can perform limited Input/output through pop-up boxes • To generate a pop-up box: window. alert("Hellonworld!"); • 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("<h 1>we can also write Content with HTML tags</h 1>"); • 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 F 12 and click on ‘console’ • To print message to the console, use the console. log() function console. log(" press f 12 or right click to Inspect Element. n Then click Console to find this message!");
Popup Boxes alert("message"); // message confirm("message"); // returns true or false prompt("message"); // returns user input string JS
- Slides: 23