Navigation Menu+

Lesson 4.3
Introduction to JavaScript

Lesson 4.3
Introduction to JavaScript


LEARNING GOAL #4: Applied Web Design

Students will understand how to expand and apply their knowledge of HTML and CSS through Web Hosting, Search Engine Optimization, and JavaScript.


OVERVIEW:

lesson4-3_javascriptJavaScript has been around for almost 20 years and it’s probably the part of most 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.


DAILY SCHEDULE (85 MINUTES):


PART 1: CLASS DISCUSSION – Introduction to JavaScript

Click here to show/hide contents

Topic #1 – INTRODUCTION TO JAVASCRIPT

eichAt 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 simple explanation: JavaScript is a programming language for creating more interactive web pages.

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. 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 – JS: 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 & DYNAMIC PAGES

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.


Topic #4 – A WORD FROM BRENDAN EICH

“JavaScript would not have survived without a creative, loyal, and patient community of developers: I owe them each a huge debt of thanks.” (Foreword to The JavaScript Bible by Danny Goodman)


PART 2: DAILY DESIGN – Writing Beginner JavaScript

Click here to show/hide contents

wjsThe steps below were created to help you set up a simple web page with HTML and CSS, but also with a few empty <script> elements that can be used for writing JavaScript.

Step #1 – SETTING UP A FOLDER

Go to your Root Directory (also known as your /webdesign folder) and create a new folder called “js” (for JavaScript).

Step #2 – SETTING UP A FILE

Using Notepad++, create a new file and save it as “wjs.html” in your new “js” folder.

Step #3 – COPYING THE CODE

Copy/paste this code into your HTML file, save it, then open it with Google Chrome.

Step #4 – WAIT FOR INSTRUCTIONS

Once you have your page working, leave it up on the screen, help your partner(s), then wait quietly for more instructions. The teacher will show you how to write a little JavaScript.


PART 3: DAILY DESIGN – Writing Advanced JavaScript

Click here to show/hide contents

pjsThe steps below were created to help you see a more complex web page with JavaScript, how to manipulate some of the objects on the page, and how to create an animation.

Step #1 – SETTING UP A FILE

Using Notepad++, create a new file and save it as “pjs.html” in your new “js” folder.

Step #2 – COPYING THE CODE

Copy/paste this code into your HTML file, save it, then open it with Google Chrome.

Step #3 – WAIT FOR INSTRUCTIONS

Once you have your page working, leave it up on the screen, help your partner(s), then wait quietly for more instructions. The teacher will show you how to write a little JavaScript.


RESET WORKSTATIONS (2 Minutes)

Translate »
error: Content is protected !!