Session Date: Wednesday Oct 04, 2017

Web Design Lab

Use this time to put the finishing touches on your sites. Plan to share experiences with one another. Those who are done with their sites should plan to help those who are still working on theirs. If you have found a good design, a good tool, a good way to do something, share it with your colleagues.

I am aiming for starting office hours no later that 2:00 p.m. but if I can get over earlier, I will post an earlier time here. Be sure to refresh this page to clear the cache to see if I have updated my office hours start time.

I will also have office hours after class, and I will have office hours on Thursday starting at 10 a.m. I will stay as long as students need help.

Use this time to put the finishing touches on your sites. Plan to share experiences with one another. Those who are done with their sites should plan to help those who are still working on theirs. If you have found a good design, a good tool, a good way to do something, share it with your colleagues.

No time to create a Javascipt video, but I have a solid lesson plan in place...

It only takes a few minutes, so I will demo it in class. the steps are detailed below. I will not require the PHP task; we have simply run out of time, and it is not fair to grade you on that task. If you have already figured out the php task and done it, I will count it as extra credit. You have all learned a great deal about git and cloud computing, so I am very happy with the ground we have covered. You should be very pleased with the technological confidence that you have gained. This was not an easy session!

How to create html with javascript, how to create the js file, and how to connect them

In this tutorial you will create a <p> element with an id which will reference javascript in separate file, and then you will connect them. This is very standard procedure for incorporating javascript when you are using frameworks with javascript links. The skeleton template does not use javascript, but most other templates or frameworks do.

Mozilla Development Network reference for document.getElementById()

First, we are going to create a folder and a file to hold our javascript file:

1. Right click in the atom sidebar and create a new folder named js.

2. Then right-click on top of the js folder and create a new file named main.js. It will automatically save inside the folder. If you mess up, make sure to drag the main.js file into the js folder.

Then open this link to my javascript code pen sample named JS via the DOM tree:

https://codepen.io/lblakej/pen/EZYLdd

You will see that there is an html window, an empty css window, and a js window.

1. You will copy the contents of the html window into one of your content divs in the about.html page. You will then save that file.

2. You will then copy the contents of the JS window and paste that into main.js file that is inside of your js folder.

3. Now, all that you need to do is put a script link in your about.html page so it can connect the html and the javascript that is in the js folder.) <script src="js/main.js"></script>

Where to paste it:

Best practice is that you place your javascript source at the bottom of the page just before the </body> tag.

Yahoo Best Practices: JS at the Bottom

Make sure you do not put it in the div container. Put it between your last closing </div> and the closing </body> tag. You can copy the script line below (only that line that starts with <script>)and paste it where is is supposed to go in the about.html page.

  </footer>
</div>
<script src="js/main.js"></script>
  </body>
</html>

When you save your files, you will be able to see the hello world message on your about.html file when you view it in your browser. Now go to the main.js file and put in some different text other than hello world. Don't forget to stage and commit and push.

last page update: Friday Oct 20, 2017