Introduction to Javascript ATLS 3020 - Digital Media 2 Week 2 - Day 2
Overview 1. What is javascript? 2. Output 3. Variables 4. Comments 5. Input 6. Putting it all together What is javascript? Output Variables Comments Input Putting it all together
What is javascript? ● “Real” programming language ○ HTML = hypertext markup language ○ CSS = cascading style sheets ○ Javascript = a scripting language ● Makes web pages dynamic and adds interactivity HTML HTML CSS CSS Javascript What is javascript? Output Variables Comments Input Putting it all together
What is javascript? ● Not Java Ham ≠ Hamburger ○ ajax Java ≠ Javascript ○ Javascript/jQuery Front-End ● Client-side scripting Client CSS Runs entirely in the web browser ○ HTML (not on the server) PHP Official language for HTML 5 Back-End ○ Runs in all major web browsers ○ Server SQL/MySQL What is javascript? Output Variables Comments Input Putting it all together
What is javascript? Javascript can be added in 2 ways ① Directly to the HTML page ② In an external file HTML index.html HTML index.html <body> <body> <h1>This is my webpage</h1> <h1>This is my webpage</h1> <script src="script.js"></script> <script> alert("Hello!"); </body> </script> </body> Javascript script.js alert("Hello!"); What is javascript? Output Variables Comments Input Putting it all together
Output ● Output means that something will display on the webpage when a users views it ● Javascript has many different ways to output to a webpage. ① Dialog box ② Print to webpage Javascript Javascript alert("Hello!"); document.write("Hello!"); What is javascript? Output Variables Comments Input Putting it all together
Strings ● Output must be a string ● A string is anything within single or double quotes. Examples: ○ “Hello!” ○ ‘I hope it doesn’t rain today’ ○ “123456790” ○ ‘! Alert # 4 !’ What is javascript? Output Variables Comments Input Putting it all together
Exercise ● Create a simple webpage that adds javascript directly to the HTML page. This webpage should use both types of outputs: ○ alert box ○ print directly to webpage ● Next, copy your javascript code into an external file and link it to the HTML page. What happens? Example webpage: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/outputs Download example code: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/outputs.zip What is javascript? Output Variables Comments Input Putting it all together
What are variables? ● A variable stores data within your code. ● Think of variables in algebra. Example: x=3 ○ “x” is the name of the variable ○ “3” is the value the variable holds ○ The value of x can (and will) change over time What is javascript? Output Variables Comments Input Putting it all together
Creating variables Creating a variable is done in 2 steps: ① Create the variable Or these can be combined into 1 line of code (but note there is still 2 steps Javascript happening). var firstName; Javascript ② Assign it a value var firstName = "Brittany"; Javascript firstName = "Brittany"; What is javascript? Output Variables Comments Input Putting it all together
Using variables Referring to a variable will access the value it has stored This . . . is the same as this: Javascript Javascript var firstName; firstName = "Brittany"; document.write(firstName); document.write("Brittany"); Why would we want to do this? What is javascript? Output Variables Comments Input Putting it all together
Exercise ● Update your webpage to use variables in place of the output strings. ● Change the capitalization of the variables (example: change firstName to firstname). What happens? Example webpage: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/variables Download example code: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/variables.zip What is javascript? Output Variables Comments Input Putting it all together
What is a comment? ● Comments are like notes that you can leave in code ● Help developers remember what different parts of the code does ● They will not display on the webpage What is javascript? Output Variables Comments Input Putting it all together
How to add comments Comment syntax depends on the language HTML CSS <!-- This is a comment --> /* This is a comment */ <h1>Welcome to my webpage!</h1> .red { color: red; } Javascript comments can be added in 2 ways: ① Single-line comment ② Multi-line comment Javascript Javascript Javascript /* /* // This is a comment This is a * This is also a multi-line comment document.write("Brittany"); multi-line comment */ */ document.write("Brittany"); document.write("Brittany"); What is javascript? Output Variables Comments Input Putting it all together
Exercise ● Add some comments on your webpage ● Does it matter where we add comments? (Before or after our code) Example webpage: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/comments Download example code: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/comments.zip What is javascript? Output Variables Comments Input Putting it all together
Input ● Input usually means the “user’s input” ● This finally adds interactivity to the webpage! ● We build webpages to prompt the user for input and then react to that input. What is javascript? Output Variables Comments Input Putting it all together
(Literal) Input prompt Javascript can “ask” the user for input in many ways, here is 1 example: Javascript prompt("What is your name?"); Why doesn’t this do anything? We need to store the response. Javascript ① Create a variable var name; ② Store the value of “prompt” in that variable name = prompt("What is your name?"); What is javascript? Output Variables Comments Input Putting it all together
Outputting the input Javascript We can use this variable just like var name; any other variable we’ve created. name = prompt("What is your name?"); document.write(name); What if we wanted to write: “Hello, <name>. How are you?” Javascript We can combine strings! var name; name = prompt("What is your name?"); document.write("Hello, " + name + ". How are you?"); What is javascript? Output Variables Comments Input Putting it all together
Exercise ● Update your script to prompt user for some input. ● Then use that data in one of your outputs. ● What happens if we add more than one prompt? Example webpage: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/inputs Download example code: creative.colorado.edu/~kosba/dm2/tutorials/w2-2/inputs.zip What is javascript? Output Variables Comments Input Putting it all together
Lab Assignment #2 ● Write a webpage that asks the user for their first name and then asks them for their last name. ● Use their input data to write a message back to them. ● Your webpage should include: both types of outputs (dialog box and printed directly to HTML) ○ at least one single-line comment and one multi-line comment ○ at least two “prompts” ○ at least two variables (your “prompts” should be stored with different variables) ○ ● You can write your javascript directly on the HTML page or you can include a javascript file, your choice. What is javascript? Output Variables Comments Input Putting it all together
Recommend
More recommend
