MTEC1003 - JavaScript

Let’s Talk About

What is JavaScript anyway, and where have you seen it?
Why are we using JavaScript?
The tools that we’ll need for programming in JavaScript
A quick JavaScript demo

A Book That You May Be Interested In

Check out Eloquent JavaScript if you’d like to follow along with a book.→

it’s a great JavaScript / intro to programming book
the online version is free
a lot of the material in the JavaScript portions of this class is based off of the second edition of Eloquent JavaScript

JavaScript

JavaScript is a widely used, high-level programming language that is available on many platforms
JavaScript and Java are two entirely different programming languages

Some History

Originally created in 1995 as a way to add interactivity (through programming) to web pages in Netscape Navigator!

Where is it Now?

JavaScript is now a widely used programming language!

it’s usage is ubiquitous; it’s common to have some JavaScript on a web page
it’s usage has gone beyond web page interactivity:
- processing.js
- server side language (node.js)
- embedded scripting language (max/msp)

It’s a High Level Language

As compared to a low level language what does being a high level programming language mean? →

meant for humans to read and write (unlike machine language or assembly)
consequently, easier to read and write; closer to a natural language
abstracts away details of underlying machine (you don’t have to know about registers, your CPU’s instruction set, etc.)
must be compiled (translated) or interpreted (translated on-the-fly) into a language that the computer can understand (such as machine language)

It’s Available!

it’s available on every major browser (such as Chrome, Firefox, Safari, or Internet Explorer)
not only are you able to run JavaScript, but… if you have a web browser and a text editor, you will be able to write and debug JavaScript programs as well!
check out the JavaScript console in Chrome →
In Chrome: View → Developer → JavaScript Console

And We’re Doing This Because?

Why are we learning JavaScript? →

we need something to put into version control
JavaScript is a widely used, high-level programming language that is available on nearly every platform
some understanding of basic JavaScript will be helpful in other classes
It’s fun (really!)

So, Let’s Write Some JavaScript

Our workflow:

we’ll create files using a text editor, SublimeText
we’ll version our files using Git

Clarification: Let’s Write Some JavaScript for the Browser

Because we’re targeting Chrome’s JavaScript Console we’ll be writing our JavaScript in web pages
that means editing .html files (with SublimeText)
it’s not good practice to have actual JavaScript code interspersed with your html
- because you’ll want to separate the logic of your program from its display
- having the two tangled makes it difficult to change one or the other
but for our purposes of getting started it’s ok

Our Tools

Again, we’ll be using the following:

Chrome to run and debug our JavaScript programs; we’ll use its JavaScript console
- as a place to output messages →
- as an error log →
- as an interactive shell →
SublimeText to edit JavaScript/html files

A Few Steps

Our workflow for creating a JavaScript program will be:

open SublimeText
create an .html file
create script tags
write your JavaScript
debug with Chrome’s JavaScript console

A Quick Example

Let’s check out a short JavaScript program. Begin by… →

creating a new file and saving it as .html in SublimeText
inserting some basic html (there are snippets in SublimeText if you don’t like typing… you can start with html, then tab (of course))

<!DOCTYPE html>
<html>
<body>
</body>
</html>

A Quick Example Continued

Add some script tags. →

<!DOCTYPE html>
<html>
<body>
<script>
Your code will go here! 
</script>
</body>
</html>

A Quick Example Continued Some More

What does this (super simple) program do? →

<!DOCTYPE html>
<html>
<body>
<script>
alert("Let's learn some Javascript");
</script>
</body>
</html>

displays a box that pops up with the message "Let's learn some Javascript"

Introducing JavaScript