Videomore on algorithms

1
Videomore on algorithms

• Search Algorithms

2
This week's quiz

• RGB
• Algorithm essential properties
• Input
• Output
• Definiteness
• Effectiveness
• Finiteness
• IC
• Photolithography

• Fetch/execute cycle
• JPEG, PNG, GIF
• Lossy lossless compression
• Image resolution
• The seven components of a computer

3
Announcements

• Project 1B is due Wednesday by 10pm
• Some shuffling of labs and projects on calendar
• Project 2A begins in your first lab this week
• Due Wed. May 6
• Lab 5 moved to second lab this week
• Pictures from PhotoBooth on the Mac or 4
  identical-sized photos
• Due Fri. May 8

4
Project 2A

• JavaScript Storyteller
• HTML form
• Story2 paragraphs

5
Programming Languages
Concepts of Algorithmic Thinking

• Human-Computer Communication
• D.A. Clements

6
Objectives

• Understand the differences between high-level vs.
  low-level and compiled vs. interpreted
  programming languages
• Describe where JavaScript fits within the realm
  of programming languages
• Describe the history of JavaScript
• Describe the problem with compliance issues when
  JavaScript is run in different browsers

7
Programs Defined

• A program is an algorithm written for a specific
  programming language and specific circumstances

8
Types of programming languages
9
High- vs. Low-Level Languages
10
Human-Understandable Code

• Todays programs are written in high-level
  language (HLL) that we can understand (and debug)
• HLL use real wordsif, while, when, until,
  push, pop, print, set, etc.
• Words look like English
• Have a precisely defined meaning for the computer
• Make it easier for us to understand (and
  troubleshoot)
• For example if (todayWednesday) print
  I have lecture today! else print Tonight is
  time to study!

11
High-Level Languages (HLL)

• Video High-Level Programming Languages

12
Assembly language

• The lowest level language humans can understand
• Example
• LOOP MOV.B r0, 80 initialize counter

13
What computers understand

• Machine code
• Assembly code is translated to binary
• 0011 0000 1000 0000
• Binary is how computer stores information
• all zeroes and ones
• Magnetized or not
• Off or on
• Bumpy surface on the CD or not

14
Machine code
01101110001011100111011001111011000110011001111011
01010111001110110011001000101110011101100111101100
01100110011110110101011100001011100111011001111011
00011001100111101101010111000010111001110110011110
11000110011001111011010101110000101110011101100111
10110001100110011110110101011100001011100111011001
11101100011001100111101101010111000010111001110110
01111011000110011001111011010101110000101110011101
10011110110001100110011110110101011100011001100111
1
15
Translating human to machine
16
Compiled Languages

• Compiled languages are translated to machine code
  (assembly language) before they are run.
• Whenever you make changes to your program, you
  have to recompile the program again.
• Because they already speak the computers
  language, they run faster.
• Sometimes, they run by themselves.exe files
  (NotePad2.exe)or run with an engine (the Java
  virtual engine).

17
Compiled Languages

• Examples
• Java
• C family
• Visual Basic
• COBOL
• ForTRAN
• many others

18
Interpreted languages

• Also called scripting languages

19
Interpreted Languages

• An interpreter translates from JavaScript to
  machine language while the Web browser renders
  the page
• The interpreter is part of the Web browser.
• The JavaScript interpreter is available in all
  major Web browsers

20
How the Interpreter Works

• The interpreter translates the script to machine
  language while the program runs!
• Two tasks at oncetranslating and running the
  program!
• Scripts run slower than compiled programs

21
The Advantages

• Scripted languages are interpreted on the
  flywhile they are running
• Make changes while the program is running!
• Provides a dynamic, responsive, and interactive
  experience for the user
• Scripts respond to user input

22
JavaScript

• All about

23
JavaScript

• Java was developed by Sun Microsystems and is
  seen on the Web mostly in Java Applets.

JavaScript is not Java!
24
Brief History of JavaScript

• Released with Netscape Navigator in 1995.
• Ratified by the European Equipment Manufacturers
  Association (ECMA)
• Result
• ECMAScript is the core spec for the JavaScript
  language
• Netscape, MS, and the others try to conform to
  the spec

25
Divergence from standards.

• Programmers call both JavaScript.
• Both comply differently with the standards

26
Javascript the Web

• Adding interaction to a static HTML page
• D.A. Clements

27
Objectives

• Understand how JavaScript and HTML interact
• Understand where to place JavaScripts on the HTML
  page

28
Programming Concepts

• Programming Act of formulating an algorithm or
  program
• Basic concepts have been developed over last 50
  years to simplify common programming tasks
• Concepts will be expressed in JavaScript

29
The Web page

• Without JavaScript the Web page is like a brick
  it just sits there!

30
Scripts

• Client-side scripts

• Server-side scripts

• Your Web browser on your computer is the client

• Web server
• Database server
• File server

Client
Server
31
Web browser and JavaScript

• The major Web browsers have a built-in
  interpreter that parses JavaScript
• Parses breaks into smaller pieces that can be
  translated into machine code

32
Placing JavaScripts on a Web page

• Types of scripts
• Body scripts
• Header scripts
• External scripts

33
Body Script
lthtmlgt ltheadgt lttitlegtName of Pagelt/titlegt
lt/headgt ltbodygt ltscript typetext/javascript
gt //JavaScript goes here lt/scriptgt
lt/bodygt lt/htmlgt
34
Header Script
lthtmlgt ltheadgt lttitlegtName of Pagelt/titlegt
ltscript typetext/javascript
//JavaScript goes here lt/scriptgt lt/headgt
ltbodygt Body content goes here
lt/bodygt lt/htmlgt
35
Linking to External JavaScripts

• Linked in the ltheadgt
• src gives path to file and its name

lthtmlgt ltheadgt lttitlegtName of Pagelt/titlegt
ltscript typetext/javascript
srcbasic.jsgtlt/scriptgt lt/headgt ltbodygt
Body content goes here lt/bodygt lt/htmlgt
36
External JavaScripts

• Make changes to scripts in one place
• Reusable
• Link to
• any page,
• every page, or
• many sites

37
Best Practice

• Best practice to separate Content from Action
  from Appearance
• Put styles in external CSS
• Put scripts in external JavaScript files
• Leave only the HTML markup and content on the
  page
• Accomplishing that goal takes more experience.

38
Summary

• Understand how JavaScript and HTML interact
• Understand where to place JavaScripts on the HTML
  page