BTI220 notes – Tue Jul 02

On the course’s first day, we will introduce the course, discuss “Internet Architecture”, and then get started with “Development” by working with JavaScript.

.

Introduction to the course

Essentially, this is a JavaScript programming course. Along the way, you will learn foundations of HTML, the HTML DOM, and CSS. Together, these are the HTML5 technologies.

Keys to success in this course:

  • Do not fall behind
  • Prepare BEFORE class – read the posted notes
  • Be an active in-class participant – ask AND answer questions
  • Read, analyze, and apply the knowledge you learn in the readings/resources
  • Practice, practice, practice
  • Blend YOUR learning style with the course delivery style
  • Give me regular feedback about the course and its content, my teaching style, and meeting your needs

Important things to know about this course

  • I am demanding, but fair
  • All course content is on the web, and some notices may be sent to your College email account; your grades will be posted on My.Seneca
  • Your keyboard and app multitasking skills will be enhanced (and you’ll learn many keyboard shortcuts)
  • Your online research and reading comprehension skills will be enhanced
  • You CANNOT use a personal device (e.g. laptop, tablet, smartphone) during lecture sessions
  • You will do your own work, although you can collaborate with others as you learn
  • If your work is late – past the due date and time – there is no tolerance for that

So… the course is named “Internet Architecture and Development“. In today’s first period (and periodically later on), you will learn something about the “Internet Architecture” part of that course title. After that, we’ll turn to the “Development” part, and spend the rest of the course there.

.

Note-taking

You must write your own class notes. You cannot use a personal device during lecture sessions.

Read the document titled “Your responsibilities” for note-taking tips.

.

One-page web programming course

Read the “One-page web programming course” document.

Comments?

.

Internet Architecture…

To be an effective web programmer, you must know something about “Internet Architecture”. This obviously includes some history, some facts-and-figures, and deep technical knowledge. We’ll discuss the following.

Internet

TCP/IP, IP, TCP, UDP, request-response

DNS and other application services

Applications – Web, Mail, remote terminal, file transfer

Domain, host

URI, URL, scheme

World Wide Web, HTTP

Browser (requestor), server (responder)

Tim Berners-Lee, Roy Fielding, Henrik Nielsen

.

…and Development

HTML5 is the term used to describe the collection of web programming technologies that have been modernized over the past few years.

HTML5 technologies – overview

  • JavaScript
  • HTML and the HTML DOM (Document Object Model)
  • CSS

.

JavaScript

Brendan Eich, created it in 1995 (over a ten-day period)

Was originally known as Mocha, then LiveScript

Now it’s ECMAScript (aka ECMA-262 standard); JavaScript is an implementation

Interpreted, ready-to-run code

Implemented as a runtime in a host; a browser is a host, but the runtime can be outside a browser (e.g. on a server)

JavaScript? The future – the most important language you will learn

JavaScript purpose? For us, in this introductory web programming course, we’ll use it to 1) modify the DOM (the HTML Document Object Model, a web page’s data structure), and 2) to create simple applications

This is a super-important statement – our goals are to learn how to modify the DOM, and create simple applications.

Success will mean that you can handle more complex JavaScript work in the future.

.

HTML 

Tim Berners-Lee, created during the early 1990s

We’ll learn more about HTML in the near future.

.

The HTML DOM (Document Object Model) 

Standardized by the W3C

Represents a web page – a “document” – as an in-memory data structure

It is the API – the application programming interface – to the document

We’ll learn more about the HTML DOM in the near future.

.

CSS 

Affects appearance and formatting of HTML documents

We’ll learn more about CSS in the near future.

.

Get started with JavaScript

In this Software Development program, you have acquired some knowledge and experience with the C programming language, and probably some C++, SQL, and bash shell knowledge along the way. Before this program, you may have learned some Java, C#, or Visual Basic, and maybe even some JavaScript.

So, when you must learn JavaScript, you often ask a number of questions to orient, align, and compare your existing knowledge with JavaScript. They may include:

  • How do I create/edit/save the source code?
  • How do I build/compile and then execute/run my program?
  • What data types can I use?
  • How do I declare new variables/fields of a data type?
  • What operators are available to me in this language?
  • What is the syntax of a statement, and of an expression?
  • What syntax enables flow-of-control (if-else, loops)?

(A complete “Top Ten” list of questions is answered in this post.)

.

Firefox and its Scratchpad

Let’s answer the first two questions from above.

The Firefox browser includes a JavaScript Scratchpad. It’s a separate window that enables you to enter JavaScript code, and then execute it in the browser window/tab. It also enables you to save your code, and to open/retrieve existing code.

.

Start Firefox, and open Scratchpad

On Windows, press Shift+F4, or from the Firefox menu, select Web Developer > Scratchpad.

On OS X, press Shift+F4, or from the Tools menu, select Web Developer > Scratchpad.

It will be helpful to arrange your windows so that the Scratchpad window and the browser window/tab are side-by-side, with minimal overlap.

If you wish to save your code, use the menu’s File > Save (or File > Save As…) choices.

If you wish to open/retrieve existing code, use the menu’s File > Open File… choice.

.

Scratchpad help

The Mozilla Developer Network (MDN) has online help documentation.

.

Input and output

JavaScript does not include input and output facilities. Its host environment (e.g. a browser) provides these.

In C, you know about the scanf function. In JavaScript, you can use the prompt function to get user input

  • We will also simply assign values to variables in situations when we don’t need user input

In C, you know about the printf function. In JavaScript, you can use the alert function.

However, instead of the alert function, you should probably use the console.log function. When you do, you must have the (Firefox > Web Developer > Web Console) “web console” window open or visible. The advantage of console.log is that you can execute multiple console.log statements, and the result just appears in the web console. In comparison, each alert statement requires the user to dismiss its dialog.

.

Answering the other questions from above

We’ll work through the MDN JavaScript Guide.

.

The JavaScript language

Primitive types – Boolean, Number, String

Special values – Null, Undefined

Complex type – Object (including Array, Function, Date, Math, and RegExp)

Named variables are declared/defined by the var keyword

Typing… a variable’s value is typed – not the variable itself

So, set the type in the assignment part of the declaration, e.g. var name = ‘Peter’;
(if you don’t initialize a variable, then its value is “undefined”)

.

Functions are declared with the function keyword

Functions are first class objects

Functions can be stored in objects, and passed as arguments to functions

In a function, new variables are created every time the function is called (which enables recursion)

Variables have function scope, not block scope

.

Testing equality – use === and !==

.

js-in-host-all.

.

.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: