February 2, 2015
- Build an interactive calendar
- Load data from other websites or sources onto your webpage
- Use API’s to tie into other developers projects to customize their data for your specific use.
- Manipulate video, audio, CSS, and more
- Control a users webcam with their permission of course.
- Use pre-built frameworks and libraries to rapidly build applications and websites
- Create a search application that fires back data in real-time as opposed to loading another page or resource.
The famous hello world example can be a big help in getting started in any programming language. Starting small and building upon what you know is key and is the path we are taking in this series. Once you can understand a new technique or piece of code only then should you move forward. This allows you to process what you have learned and apply it so you don’t forget it!
src=“” attribute. Before you used to have to specify a
The key thing to remember is to close your opening script tag. Doing this along with linking to the correct file inside the correct directory will get you on your way in no time.
h1 tag with whatever content you like.
Take note of your content between the
h1 tags. Then in your
main.js file add the code below.
var myHeading = document.querySelector('h1'); myHeading.innerHTML = "Hello World!";
With the code added, open up the
index.html file in a browser of your choice. You should now see the H1 tag displaying “Hello World!” as opposed to what I originally I use chrome because it’s my favorite but use whatever browser you prefer.
If you remember our initial HTML had “This is a Heading” as the content between the
Quick Code Review
var myName = “Andy”;
I named the variable
querySelector property. When you give the
h1 tag to the
querySelectorproperty as a parameter, the code will traverse the HTML document until it finds what you have supplied. This is all taking place in this one line of code which I have set to the
var myHeading = document.querySelector(‘h1’);
After assigning this functionality to a variable I needed some way to print it inside the page where our current
h1 tag lives. To do this I used the innerHTML property to replace the default text we created with the new “Hello World!” text.
var myHeading = document.querySelector(‘h1’); myHeading.innerHTML(‘Hello World!’);
In the code I made use of the variable I created to chain it to the
innerHTML property which in return injected the new content into our HTML page.
Resources to Speed Up Learning