With this module we are going to look at an entirely new programming language, JavaScript. While you won’t learn JavaScript from this module, you will be exposed to it and learn how to make some simple edits to it. We will learn how to integrate JavaScript into your HTML and CSS.

About JavaScript

Website browsers, like Chrome, can read three languages: HTML, CSS, and JavaScript.

HTML, CSS, and JavaScript each have their own role in creating a web page. 

HTML: We use HTML for the web page structure and for the content

CSS: We use CSS to style the website.

JavaScript: We use JavaScript for interactivity on the web page

There is some overlap among the three languages. You can make text bold with the HTML <strong> tags, even though that is a style. You can make simple interactive animations with CSS. We are likely to see the languages evolve to have more separation of content, style, and interactivity. For example, the <center> tags were removed from HTML5.

The JavaScript Language

Until now, we have only used HTML and CSS. JavaScript is the third language used by browsers.

JavaScript uses camelCase instead of a dash between words. For example, the JavaScript method getElementById()capitalizes the “E”, “B”, and “I”, but not the the letter “g”. JavaScript files end with .js.

JavaScript is not related to the Java language. However, most programming languages we use today are based on the C language, and so you will see similarities among the languages you learn.  

Other Languages for Web

While only HTML, CSS, and JavaScript can be used by the browser, other languages are used to make websites. The other languages are compiled into HTML, CSS, and JavaScript. The other languages include:

• PHP and MySQL/LAMP Stack (Server Side – Offered in the Fall at Saint Paul College)
• C# (.NET) 
• Java
• Ruby on Rails
• MEAN Stack

Even if you program in one of these other languages, since most programs today are web-based your code will compile to HTML, CSS, and JavaScript.

Simple JavaScript

Before we dive into JavaScript, here is a quick refresher on HTML Elements and Attributes.

An HTML element includes the opening and closing tag, and everything in between. For example:

<p>This is a paragraph</p>

HTML Attributes define additional characteristics or properties of the HTML element. You already know several attributes:

href=””

src=””

height=””

width=””

alt=””

class=””

id=””

How to Insert JavaScript to a Web Page.

Like with CSS, JavaScript statements can be added to a web page in three ways. 

1. Embedded. Place JavaScript code between <script> tags. The <script> tags go after the footer and before the closing </body> tag. (With embedded CSS, we would use <style> tags.)
2. External. Link to a separate JavaScript file, eg. <script src=”my-javascript.js”></script>. The external file ends with .js. (With CSS, we use .css files)
3. Inline. Place JavaScript code as part of an event attached to an HTML element as an attribute. W3Schools has a nice example: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_date

The HTML attribute, onclick, can be used to insert inline JavaScript into the HTML. Here is an example:

onclick=”document.getElementById(‘content’).innerHTML”

In the above code:

• onclick is the HTML attribute.
• The document is the entire web page
• The JavaScript method is getElementById()
• The property is innerHTML. innerHTML is the content between the two tags in the element, eg. <h1>This is the innerHTML</h1>

Putting it all together into a button:

<button type="button" onclick="document.getElementById('content').innerHTML = 'Hello JavaScript!'">Click Me!</button>

What this code does is find an element with the id of content (eg. id=”content”), then it changes the innerHTML to “Hello JavaScript!”

onclick Example in JSFiddle

Let’s look at some onclick examples in JSFiddle. The JSFiddle below is embedded in an iframe, like we learned about last week. You can toggle between the HTML and the Result.

Click on the result button, and click the first “Click Me” button. Now click on HTML and look at the code. In the first example, when the user clicks the Click Me button, the text of the innerHTML changes. The innerHTML is the text between the tags.

Now click on the second Click Me button. In the second example, the clicking the button changes the CSS.

Here is the code if you would like to try it yourself. While you may not fully understand all of the JavaScript, you understand enough of the HTML to make changes to it.

<p id="content">JavaScript can change HTML content.</p>
  <button type="button" onclick="document.getElementById('content').innerHTML = 'Hello JavaScript!'">Click Me!</button>
<hr>
  <p id="size">JavaScript can change the style of an HTML element.</p>
  <button type="button" onclick="document.getElementById('size').style.fontSize='35px'">Click Me!</button>

JavaScript Example with a Conditional (if) and a Prompt

Like most programming languages, you can use a conditional (if->else) to write functions. This example is a bit more complex than the last one and uses function and a popup prompt, as well as a onclick button. The JavaScript is embedded in <script> tags.

Go to the “Result” and click the “Try It” button. Follow the prompts.

1. Try leaving the name blank to see what happens
2. Try putting in your name to see what happens.

In this example, the Try It button onclick calls a function named “myFunction()”. You can see myFunction() in the <script> tags below the HTML. First there is a prompt to ask for a name, and then based on what is in the name there is a different result, a conditional or if/else. If you don’t provide a name, it prints, “Why don’t you tell me your name?”. If you do provide your name, your name is inserted into the resulting response.

Frameworks

A framework is a CSS or JavaScript file that you add to your website to attach some pre-built code. Most websites today use multiple frameworks. jQuery is a very common framework used in 90% of websites that use JavaScript

We will be learning how to use two frameworks in Module 11:

1. Font Awesome
2. Bootstrap

Framework Example: The Place in Order

If you are taking CSCI-1450, you likely did the Place in Order exercise while preparing for the exam. A developer adds frameworks to add functionality. To create the Place in Order exercise I used these frameworks:

• jQuery
• jQuery UI for the sorting
• jQuery UI Touch Punch to make the sorting work with mobile (touch vs. a mouse)

To add the functionality, I had to include these framework scripts: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>

By attaching these scripts to my website, I inherited a host of prebuilt JavaScript that helped me to make the drag and drop exercise.

Do you see a difference in the third script? I linked to external files for the jQuery and jQueryUI, but I couldn’t find an external file for the Touch Punch and so had to add the actual file to my project.

When you want to do something interactive, try searching for a tutorial on how to do it. Web programmers walk you through the JavaScript required. Most tutorials will use jQuery. 

My process for making the Place in Order exercise was this:

1. I searched for a JavaScript tutorial place in order.
2. I studied the tutorial. I needed to understand it to edit it.
3. I copied the code from the tutorial into my project.
4. Before I started to edit the code I made sure the code you moved works in my project.
5. Then I started to edit the code for the exercise.

You will find that is how most developers do their work most of the time. Pay it forward by contributing when you can.  

(I can’t remember what tutorial I used to create the place in order, but here is one that I might have used. https://www.tutorialspoint.com/jqueryui/jqueryui_sortable.htm)

JQuery: A JavaScript Framework

Here is a definition of jQuery from W3 schools:

jQuery is a lightweight, “write less, do more”, JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

W3 School Definition

Of websites that use JavaScript, over 90% use jQuery. jQuery is used with Bootstrap, which we will learn in Module 11. 

You attach the jQuery framework by including the link to it, for example:

As an internal file: <script src=”jquery-3.5.1.min.js”></script>

OR

As an external file: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js“>

In the first example, you would include the jQuery file in your package of code. In the second example, you link to an external reference. Most developers, most of the time, link to an external reference. 

jQuery fadeIn/fadeOut Example and Exercise

The jQuery framework includes a lot of pre-built methods that make development time faster. What follows are a few examples of how to do some cool things with jQuery.

With this example, let’s take it a step further and try to modify it. First, here is the jQuery example:

It may be easier to open JSFiddle in a new tab on your browser. Let’s look at the result first. There are two buttons that allow you to fade the image in and out. fadeIn() and fadeOut() are jQuery “methods”. Methods have parameters that go into the parentheses.

For fadeIn() and fadeOut() the parameter that you put in parentheses is the amount of time in milliseconds for the fading in and out. There is 1000 milliseconds in 1 second, so fadeIn(1000) would fade in over 1 second.

Now, let’s try to add a third button. The third button will both fade in and fade out. Here is the jQuery you need to make the button:

The button is an image so you can try to type it in yourself. It addition to the jQuery, you also need to add a third button with a different class in the HTML. If you have errors in your code, use the JSFiddle hints to try to resolve them. It can be challenging to type in all of the punctuation for JavaScript.

At the end, your JSFiddle should look like this, and your Fade in and out button should have the image first fading out then back in.

This is just a beginning exposure to JavaScript and jQuery. One of the points of the exercises in this module is to show you that even though you don’t have a strong knowledge of JavaScript and jQuery, you can find code online and edit it to make it work for you.

The lab for this week follows the same track. What we will do is take a JavaScript game by W3Schools, and customize the game.