An Introduction to Front-end
Web Development
Tom Perkins
Disclaimer
• Examples follow
–
–
–
–
Pluralsite.com
Learning to Program – Part 1: Getting Started
Scott Allen
Node.js
• Programs run inside node.js
• Node
– Easy to install
– Can run on Mac, Windows, or Linux
• First thing to do – Install Node
Node.js
•
•
•
•
•
•
Superfast, stand-alone JavaScript interpreter
Can function as a web server
Easy to install
Started from the Command Prompt
JavaScript programs run “inside” Node.
Two “run modes”
– REPL (Loop)
– Execute external JavaScript programs
Installing Node
•
•
•
•
Launch any web browser (IE, Chrome, FireFox)
Go to nodejs.org
Download node
Install node (use defaults)
Start Node
• Search your apps
for “node”
• Select the ”Node.js
command prompt”
• This will open the
Command Prompt
Window
The Command Prompt Window
• Run node by typing node <enter> at the
command prompt
Run node
• Node runs JavaScript in the REPL loop.
Node’s REPL
REPL Examples
To exit Node, type “.exit” at the command
prompt (no quotes)
Some Node.js Objects
• Console
– console.log(data) – outputs data to the output
device
• Process
– process.argv – returns an array containing
command line arguments
• First element – ‘node’
• Second element – name of JavaScript file
• Next elements – remaining command line arguments
Notes for process.argv()
// print process.argv
process.argv.forEach(function(val, index,
array) {
console.log(index + ': ' + val);
});
This will generate:
$ node process-2.js one two=three four
0: node
1: /Users/mjr/work/node/process-2.js
2: one
3: two=three
4: four
A Simple JavaScript Program
Using Functions
Running in Node
A Simple JavaScript Program
(using functions)
• Program: \NTPCUG_Node\Functions\ functions.js
• Code editor: Notepad++ (free download)
• Steps taken:
1. Create the program in Notepad++
2. Save the program as functions.js in the folder
\NTPCUG_Node\Functions
3. Select the Command Prompt from the Start Menu
4. Enter cd\ntpcug_node\functions
5. Type: node functions.js <enter>
6. The program will execute …
A program to simulate the roll of a die and to evaluate that
roll:
3, 4, 6 -> Great roll!
1 -> Terrible roll!
Otherwise -> Ok roll.
Structured Walkthru:
A JavaScript Program employing
Functions
A JavaScript Program
Demonstrating an Object
A JavaScript Program demonstrating a JavaScript Object
Structured Walkthru:
A JavaScript Program using an Object
USING MULTIPLE FILES
• Objects group related data and behavior into a
container called an “object”.
• To hide complexity
– Use objects
– Use multiple source code files to build an
application
• A file may contain the definition of one or
more objects
• No limit on number of files in an application
Multiple Files
dice.js
(code related to rolling
dice)
Object.js
Program.js
(main program –
controller)
Both files in the same folder:
\ntpcug_node\multiple
Loading a file
• Require keyword – used to load a file
• All properties and methods are hidden by default in a
loaded file
• Inside a called program, you have to explicitly tell node
what you want to make available to calling programs
• Use the node “exports” object to identify what you
want to expose
• Add a “die” property to the exports object
– exports.die = die;
• To gain access to the exported members in the “required”
program, place the “required” object into a variable in the
calling program
– var dice = require(“./dice”);
• To access the “die” object in the “dice” object
– var die = dice.die;
USING MULTIPLE FILES
IMPORTANT CONCEPTS:
• Called program
• exports object
• Calling program
• require keyword
• Accessing objects w/in
called program
Structured Walkthru:
Using Multiple Files in Javascript
A MORE COMPLEX FILE STRUCTURE
AND INTRODUCTION TO TESTING
A Gradebook Program
• Given a set of scores for a student (87, 92, 72,
100, etc) calculate the average grade and assign a
letter grade.
• Folder Structure:
Gradebook
Tests
In c:\ntpcug_node
mkdir gradebook
In c:\ntpcug_node\gradebook (cd gradebook)
mkdir tests
mkdir lib
Lib
( application libraries)
Test-Driven Development
• Nodeunit – a unit testing package for Node.js
• Install nodeunit using the NPM (Node Package
Manager)
– in gradebook: > npm install –g nodeunit <enter>
• Nodeunit looks for tests in the “tests” folder
No tests available …
• Tests are assertions about the data in a
program
• Tests are written in the gradebook/test
folder
• They require programs in the /gradebook
folder
• Create a file containing the gradeBook object
in the \gradebook\lib folder (grades.js).
• Create a gradeTests.js file in the
\gradebook\tests folder.
gradebook folder
(tests folder)
gradeTests.js
lib folder
grades.js (gradebook object)
• Write a test first (in testGrades.js)
• It will fail (no addGrade method, no count)
• But that’s OK!
Structured Walkthru(s)
• grades.js – contains gradeBook object
• gradeTests.js – contains tests (assertions)
about methods and properties of gradeBook
object
• program.js – enter test scores from the
command prompt line
WEBSITE
Node as a web server
•
•
•
•
•
Node.js can function as a web server
You can build websites and web applications
Expressjs is a scaffolding tool
It can be used to build a basic website
See expressjs.com
Build a website
• Install expressjs
– npm install express <enter>
• Modify website/program.js
• Start the server
– ...\website node program.js
– Should produce Starting message …
• Using any web browser, access localhost:3000
– (server is listening on port 3000)
• Response indicates root was accessed but site
was unable to handle request
• Use CTRL-C to exit the server …
Modify program.js to handle an empty request
on port 3000
• Restart the server
• Access the site at localhost:3000
• See response:
• Pass a number of grades to a different URL
• Have the server respond with a letter grade
– localhost:3000/grade?grades=100,90,80,95
– Query string
Server code to handle request of
localhost:3000/grade?grades= …
Final result!
FINIS