javascript - atlas institutecreative.colorado.edu/atlas2200/pdf/week12-tech-js-madlib.pdf ·...
TRANSCRIPT
Javascriptnuts and bolts
Programming
it’s hard
there is a steep learning curve
I have to learn a new language
Words of encouragement
you can do it!
it is written in english! Lot’s of code is just shortened to save you time typing it charset =character set, href = hypertext reference, etc. programming is actually there to make your work easier…
http://creative.colorado.edu/atlas2200/example/simpsons-loop.html
“I want to roll around naked with javascript”
–local developer
consolejs playground (similar to css)
experiment and try new things
get feedback on what js is doing (console.log)
bug fix
js placementplace external js script after </body>
js executes AFTER html and css is rendered
or inside <head> and add defer attribute
JavaScript rulesJS is case sensitivevar date = new Date(); Use camelCase to concatenate words getElementById
variables - start with lowercase letter var talkingDog ;
Objects - start with upper class lettervar date = new Date();
End statements with a semicolon;
//use comments (single line)
/* or multi-line comments */
variablesstorage container for data
ALWAYS declare variables!
var = myName
myName = “Melvin”;
use shorthand (pretty much always)
var myName = “Melvin”;
weakly typed language
don’t have to declare what type of content we are putting into a variable
variable = generic container that holds multiple data types
Data Types
numeric - 1, 3.14, -5
string - “words and sentences” (straight single or double quotation marks)use escape (\) when you need to include quotations in your stringvar quote = “\“you are my sunshine\“”; boolean - true, false
building a js mad libstart with a script!
user inputs text value into form
js grabs value and stores it as a variable
user clicks button and js grabs variables and generates story
write out your mad lib
put into html comments for reference
proof of conceptstart small with one mad lib entry(easier to test and bug fix)
get the code to work!
use inspect console to check for errors
add the rest of the mad lib entries (rinse and repeat)
input and store info
html
web page
js
declare variable grab value of input textand store in variable
create buttonhtml
web page
js
button listens for event
connect variable to html button
js
declare variable
event runs function
functionsprocedure
block of code
set of statements that performs a task
executed when “something’ calls it
an event: button click, page load, etc.)
define function
js
keyword name parameters
block of code runs every time button is clicked
generate story
html
js
declare variable connect variable to empty divjs
write to variable write text add variable value
add to function
click the button
boom
no boom?open inspect and check console
is js connected? (test with console log)console.log("js in the house”);
not declared
wrong variable name (case-sensitive)
source code (simple version)
http://creative.colorado.edu/atlas2200/example/madlib-simple.html
reference only - DO NOT COPY & PASTE
hand code - make mistakes
bug fix and learn from your mistakes
start with external js (see
add rest of entries
stylize the html formhttps://www.w3schools.com/css/css_form.asp
removes default
blue focus outline
text input
focus state
focus state
buttonstyle
focus state