CSCI E12 Fundamentals of Web Site Development Brief

CSCI E-12 Fundamentals of Web Site Development Brief Introduction to Java. Script

CSCI E-12 Fundamentals of Web Site Development Today’s Agenda l Structure, style, and function revisited l What is Java. Script? l What can Java. Script do? l Adding Java. Script to your pages l How does Java. Script work? CSCI E-12: Fundamentals of Web Site Development September 25, 2020

CSCI E-12 Fundamentals of Web Site Development Structure, Style, & Function… Oh My! HTML ere eh e ar W CSS CSCI E-12: Fundamentals of Web Site Development Java. Script Remember: Good web page design means the three are separate, but work together September 25, 2020

CSCI E-12 Fundamentals of Web Site Development What is Java. Script? l HTML is a markup language l CSS is a set of presentation rules applied to markup l Java. Script is a programming language that can dynamically manipulate both HTML and CSS l Not surprisingly, Java. Script is the most complex of the three l But it can do really, really neat things CSCI E-12: Fundamentals of Web Site Development September 25, 2020

CSCI E-12 Fundamentals of Web Site Development A Programming Language? ? ? l Yes, Java. Script is a programming language l (Okay, some purists would argue otherwise—ignore them…) l Indeed, we could spend a semester teaching an Introduction to Web Programming Using Java. Script l But we will not ask you to learn Java. Script in-depth l We really won’t even ask you to program Java. Script l But we will ask you to take advantage of ("hack") other people’s Java. Script CSCI E-12: Fundamentals of Web Site Development September 25, 2020

CSCI E-12 Fundamentals of Web Site Development What Can Java. Script Do For Me? l Manipulate HTML structure l Manipulate CSS properties l Communicate with the web server (usually in the background) l All in all, it helps turn your web page into a web application CSCI E-12: Fundamentals of Web Site Development We accomplish both of these by manipulating the Document Object Model (DOM) We accomplish this through a technology called AJAX Remember DOM and AJAX. They are terms you will hear often… September 25, 2020

CSCI E-12 Fundamentals of Web Site Development Adding Java. Script to Your Page l Very similar to adding CSS to your pages l You can specify JS in special HTML element attributes l l You can write JS in a script tag (may be in head or body elements) l l <a href=“#” onclick=“do. Something(); ”>Do Something</a> <script type="text/javascript" > … </script> You can import JS from an external file (most common way) l <script src=“my. Code. js” type="text/javascript" > </script> CSCI E-12: Fundamentals of Web Site Development September 25, 2020

CSCI E-12 Fundamentals of Web Site Development How Does Java. Script Work? l It’s actually like HTML and CSS in the sense that… l You write some code… l And your web browser takes care of the rest l Never forget your web browser is many engines packed into one giant piece of software CSCI E-12: Fundamentals of Web Site Development CSS Renderer If your browser was a starship… Java. Script Interpreter HTML Parser September 25, 2020

CSCI E-12 Fundamentals of Web Site Development How Does Java. Script Work? l It is an object-oriented language l Much of what you do involves accessing or manipulating Java. Script objects l These are objects that are internal to Java. Script l Or objects that you or another coder have written l Which begs the question… What is a Java. Script object? l Before we can answer that, let’s take another anatomy lesson CSCI E-12: Fundamentals of Web Site Development September 25, 2020

CSCI E-12 Fundamentals of Web Site Development Anatomy of Java. Script l For simplicity’s sake, we’ll divide Java. Script into a few discrete components l Variables l Statements l Functions l And, last but not least, objects l We’ll tackle each one in turn l (Remember, you will not necessarily need to program, but you should understand the concepts) CSCI E-12: Fundamentals of Web Site Development September 25, 2020

CSCI E-12 Fundamentals of Web Site Development This is how we create a variable in Java. Script. It creates a “box” with a label of “x” and stores the value “ 2” in it… var x = 2; Variables l Ultimately, computers (and hence programming languages) deal with data l A variable stores a piece of data l Variables have names and values (sound familiar? ) l Think of it as a virtual box that can hold: l Numbers l Letters (Strings) l Other complex data structures CSCI E-12: Fundamentals of Web Site Development 2 x Here we take the variable “x” and replace its contents with a string. . . x = “AJAX”; X A AJ x September 25, 2020

CSCI E-12 Fundamentals of Web Site Development This is actually a statement, telling the browser to create a variable “x” with a value of “ 2” var x = 2; Statements l l l Statements are commands that tell the web browser to do something Several kinds of statements… l Variable assignments l Conditionals l Loops l Etc… 2 x on Ac if (x == 2) { console. log(“X is 2. ”); }; l na io dit p oo Al while (x == 2) { console. log(“Infinite loop!”); } BY YOUR COMMAND… Statements often utilize variables CSCI E-12: Fundamentals of Web Site Development September 25, 2020

CSCI E-12 Fundamentals of Web Site Development nts me e um g r A Na Functions l function sum. It. Up (x, y) { var z = x + y; return z; } Ret urn valu e Functions are reusable collections of statements l Functions have names l Functions can be passed arguments l Functions can return values l Many built-in functions CSCI E-12: Fundamentals of Web Site Development What do you think this function does? Answer: Takes a variable named “x”. Takes another variable named “y”. Adds “x” and “y” together and stores the sum in “z”. Returns the value of “z”. So if “x” was 2, and y was “ 3”, the function would return “ 5”. I am fully functional… September 25, 2020

CSCI E-12 Fundamentals of Web Site Development l Objects are reusable collections of variables and functions // Define Phaser object function Phaser(setting) { this. setting = setting; this. shoot = function() { if (this. setting == "kill") { console. log("Peeoww!"); } else { console. log("BLAM!"); } } } l There may be multiple instances of a single kind of object // Create phaser instances var kirks. Phaser = new Phaser("kill"); var spocks. Phaser = new Phaser("stun"); l Variables within objects are called properties l Functions within objects are called methods l Many built-in objects Objects CSCI E-12: Fundamentals of Web Site Development We come in peace… Shoot to kill… September 25, 2020

CSCI E-12 Fundamentals of Web Site Development Accessing and manipulating objects l Java. Script uses the dot notation l [object name]. [property or method name] l If a method or property returns another object, you can continue stringing everything together with additional dots CSCI E-12: Fundamentals of Web Site Development // Set phasers // Create phaser instances var kirks. Phaser = new Phaser("kill"); var spocks. Phaser = new Phaser("stun"); kirks. Phaser. shoot(); spocks. Phaser. shoot(); // Stringing example document. get. Element. By. Id(“p 1”). style. text. Align = “center”; // The above is the same as… var p 1 = document. get. Element. By. Id(“p 1”); var p 1 Style = p 1. style; p 1 Style. txt. Align = “center”; September 25, 2020

CSCI E-12 Fundamentals of Web Site Development A Quick Review l l Java. Script consists of l Variables l Statements l Functions l Objects Java. Script is object-oriented l l Most of what you do is accessing and manipulating objects You access/manipulate objects with dot-notation CSCI E-12: Fundamentals of Web Site Development September 25, 2020

CSCI E-12 Fundamentals of Web Site Development Tying It All Together l According to your web browser, your web page is really one big object l My darling web page, you are more than just an object of affection… Oh, Java. Script, manipulate me… (Okay, it’s a little more complicated than that) l Remember the Document Object Model (DOM)? l Each HTML element is an object, each with its own properties and methods l With Java. Script, you can manipulate all of these objects, methods, and properties CSCI E-12: Fundamentals of Web Site Development September 25, 2020

CSCI E-12 Fundamentals of Web Site Development Bookmark This! l Java. Script Tutorial: http: //www. w 3 schools. com/js/default. asp l Java. Script Developer Center: https: //developer. mozilla. org/en/javascript l Java. Script Tutorial (for non-programmer): http: //www. webteacher. com/javascript/index. html l Code Academy (for other programming languages, too!) http: //www. codecademy. com/ CSCI E-12: Fundamentals of Web Site Development September 25, 2020