Don't like this style? Click here to change it! blue.css
For our hello world there are three primary ways of getting output: the console, an alert box, and via the website itself (by manipulating "the DOM"):
JS Bin on jsbin.com
console.log("hi there"); alert("hello"); document.querySelector("body").innerHTML = "Howdy";
Hello Task 1: Change the hello world messages and confirm you get that.
Console Task 2: Head to a website on a browser. Open the console. Erase the
innerHTML should not be used with care for user-created strings, it allows "injection attacks"
where a user can cause scripts to execute on your page. This is really a problem when one user's text shows on
another user's page (and you have cookies). For now use it and we'll do the more verbose version later.
JS is dynamically typed, so you can reassign any variable to anything.
var (local to this execution content / script) or
let (local to this block) (BTW
let is an ES2015 feature).
var x = 34; console.log(x*12 + 32);
Family Array Task 4: Create an array of objects that represent your family. Use slice to create a new family from the first 2 people. Use splice to separate them from the family. (You will have to google search.)
You can also loop through the keys of an array/object using
for varname in obj/array.
Nested Detection Task 6: Adjust my above example so that when the value in the
array is itself an object or array it loops through the keys of that object. (Look up the
Your connection to the DOM is usually two words:
tab if your browser needs that). Take a look at all of the methods. Pick out two and read up on them. Repeat
Here is a summary of how you can get access to any particular element in your document (you can use any particular element or the root document as the object that these methods get called on):
an array of elements which have the 'p' tag. Use the console to deduce how to get the
attribute from the first
p tag. Now write a loop that logs every class value from all of the
paragraphs you found there.
Class Selection Task 9: Now use one of the classes you found to get all elements that share that class.
Query Selector Task 10: Now use the CSS selector version of the last task.
document.querySelector('.class_name_here')) Alter that elements innerHTML to be "Your name
You can access and manipulate CSS properties on HTML elements once you have access to that element.
element.style gets you the properties and
you the final values.
Alter the styles for the whole page by using
'value_here' or specific elements using
element.style.property_name_here = 'value_here';.
Aside: By the way, I have leaned on jQuery for a long time and only recently have I been motivated to just go vanilla. http://youmightnotneedjquery.com/ is a nice way to find jQuery-free ways of doing things.