JavaScript has been around for almost 20 years and it’s probably the part of web pages you like the most. JavaScript is basically that part of the source code that gives action to a page. A clock that keeps changing. A button with a pop up box. A scrolling image gallery. These are the kinds of things you like to see when you look at most web pages because they make you feel like you can interact with them.
Similar to HTML and CSS, JavaScript is another coding language (or programming language) that has a completely different set of rules. You know that to write HTML, you need angle brackets and some attributes. You know that to write CSS, you need curly brackets and some properties. But with JavaScript, there’s a lot more going on. JavaScript uses a lot more symbols and a lot more rules than those other coding languages you learned in this class.
Some will tell you that JavaScript is pretty easy, but the truth is, it’s pretty complicated. And it takes patience. Quite a bit more patience than HTML or CSS. There are students who take an entire semester learning JavaScript and can never quite master everything about it. This is just one lesson and all you’re going to do is see how it works. You’ll get to write a little bit of JavaScript code, but you won’t be expected to achieve perfection. Just pay close attention and get ready to keep up.
LEARNING GOAL #4: Applied Web Design
Students will understand how to expand and apply their modest knowledge of HTML and CSS through Web Hosting, Search Engine Optimization, and JavaScript.
At some point during the last few months, you probably heard something about JavaScript. You might not have known what it was, but you heard it mentioned in class. So here is a REALLY simple explanation: JavaScript is a programming language for creating more interactive web pages. And the man who created JavaScript was Brendan Eich, pictured on the right.
Throughout the semester, you have learned how to write proper HTML syntax (or grammar) with angle brackets, tags, elements, and attributes. You have also learned how to write proper CSS syntax (or grammar) with curly brackets, selectors, properties, and values. But if you were going to try and learn JavaScript, you would also have to learn an entirely new syntax because it’s another kind of coding language.
Topic #2 – A Complex Language
According to W3Schools, JavaScript is an “easy” coding language to learn. But that’s not exactly true. Let’s put it another way. In about four weeks, you managed to learn almost all of HTML. And by now, you pretty much know enough about HTML to create a few pages from scratch. In four weeks, you also learned about 60-70% of CSS. You know how to build web pages and make them look nice. But when it comes to JavaScript, there is so much to learn that you could actually spend an entire semester (about 18 weeks) and still not know it all. Today, you are only going to spend about an hour with JavaScript.
Topic #3 – Static vs Dynamic Pages
During Lesson 3.7, when we talked about animations, you learned about the difference between static and dynamic pages. But just in case you forgot, let’s review it again.
Every single web page that you have made in this class was made with HTML. Even when you took time to make those pages beautiful or aesthetically pleasing, you used a coding language called CSS. But unless you were messing around with the codes, your pages would never change on their own inside the browser. When it comes to design, a web page that doesn’t change or show any movement is called a static web page.
On the other hand, most of the really good websites that you visit are constantly changing. They might have sliding image galleries or pop up advertisements, but there is always something going on. And when it comes to design, a web page that constantly changes or shows movement is called a dynamic web page. You might even see the word DHTML as a way of describing Dynamic Hyper Text Markup Language.
You just learned that JavaScript is a super complex code that requires quite a bit of time and practice. But that doesn’t mean you can’t learn a few things. As a class, we’re going to add some information to the “javascript.html” file in your Portfolio Website. So go ahead and open that page up as a split screen (code on one side, design on the other). Once everyone is ready, we’ll get started.
By now, you’ve set up a portfolio website with five pages and you should be getting close to finished (if you haven’t started, ask someone on your team). The purpose of this five-page website is to show off who you are and what you’ve learned throughout the semester. For example, you have an “about” page where you will share some information about your experience and your interests. You also have a “portfolio” page that will provide links to various pages and demos that you’ve coded in this class. And part of what you’re doing with this five-page website is making it personal. That means adding a couple of images and bringing in your own colors. In the end, you will have a complete website that you can show off as a way of demonstrating what you know.
If you were not here for the setup of your Portfolio Website, go back to Lesson 4.1 and go through the ten steps of the Daily Design. Otherwise, you may simply look below.
This is your last graded web design assignment before the final project begins. In order to get a good grade, you need to have the following five things.
Grading – Portfolio Websites
In order to get a good grade on this final assignment, you need to have the following six things:
Color Palette & Site Identification
Your design must have three unique colors (part of a color palette) that you have chosen to use and cannot have the same colors that were there when you started. You must also change the name on your website in the TITLE elements and the FOOTER elements of ALL pages so that they reflect your actual name.
Two Unique Images
You must add a logo to the header of all pages as well as a single image on the Home Page (index.html). You must build a logo with CoolText and figure out how to get it onto your website. You must also find an image that represents you and add it to the Home Page (index.html), as instructed in the code.
Three Unique Paragraphs
You must complete three paragraphs for the “about.html” page as instructed in the code, each one with 4-5 sentences. Paragraph 1 is about you as a person. Paragraph 2 is about you as a web designer. Paragraph 3 is about you as an individual with other skills.
Links to Pages and Demos
You must provide internal links to at least 10 of your pages and at least 2 of your demos. More is better, but the links have been started for you.
JavaScript Demos
We just did this as a class, so you don’t need to do anything else on the “javascript.html” page (other than making sure it looks like the rest of your website, with colors and logo, etc).
Accountability Essay
Don’t worry about this right now. We will do this as a class (Lesson 4.4).
If you have finished your Portfolio Website and you’re looking for a new challenge, this is a great place to start. You’ve added a little bit of JavaScript to a single page, but there’s a lot more that JavaScript can do. If you’ve gotten this far, the teacher will sit down with you and show you how to manipulate some of the elements you see, but you’ll need to get started. Follow the steps below to get set up.
Step #1 – Setting Up the File
Using Notepad++, create a new file and save it as “pjs.html” in your “pgs” folder.
Step #2 – Setting Up the Page
Copy/paste this code into your HTML file, then save it.
Step #3 – Setting Up the Split Screen
Open up your “pjs.html” file so that you can see the browser on one side and the code on the other.
Step #4 – Trying Things Out
The teacher can help to give you a few ideas for experimenting with this code, but try messing around with it on your own first. If you get stuck, just ask. If you’re this far, you might just get help without even asking.