CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) CSCE 102 - General Applications...

CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript )

CSCE 102 - General Applications Programming

CSCE 102 - General Applications Programming

Benito Mendoza 123/4/21 Benito Mendoza 1

By

Benito Mendoza

Department of Computer Science & Engineering

Introduction to ProgrammingAlgorithms and Control Structures

JavaScript

CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 2

Low-level vs High-level

Low-level languages such as assembly language take many months to master and are dependent on the processor hardware usedHigh-level languages have more high end features which are easier to learn


JavaScript

A Hierarchy of Languages


Interpreters vs CompilersLanguages must be translated into machine code for the computer to executeInterpreters do this on the fly as the program is being executedCompilers convert the program into machine code prior to the program being executed and store the machine code in a file to be run laterCompiled programs run faster than interpreted onesInterpreted programs are easier to debug because you do not have to compile each time a change is made


JavaScript



Structured vs. Object-Oriented Structured programming languages were developed to solve sloppy programming practices that led to errors. However, these languages did not work well for large programming tasks that involved multiple developersObject-oriented programming languages provide the compartmentalization that the structured languages were missing enabling many developers to work together on the same project


JavaScript



Computers make decisions by using control structures in their programsAlgorithms are the combination of small steps that allow a particular problem to be solved


JavaScript


Brute ForceTraveling Salesman Problem

Programming TechniquesIntroduction to ProgrammingAlgorithms and Control Structures

JavaScript


New York

Boston

Washington

Philadelphia

Chicago

Atlanta

St. Louis

Denver

Houston

Seattle

Los Angeles


JavaScript


Brute ForceTraveling Salesman Problem

Algorithm“A detailed sequence of actions to perform to accomplish some task”1

Al-KhawarizmiDied about 840 A.D.HUGE influence on algebra (name comes from his book)

1. Free On-Line Dictionary of Computing


JavaScript


Sequence1. Do this.2. Do something else.3. Do another thing.

Programming TechniquesControl Structures


JavaScript


SequenceConditional (if-then, branching)1. Do this.2. Do something else.3. If some condition is true then

3a. Do this bitOtherwise

3b. Do these things.4. Do another thing.

The steps you do if the

condition is true

The steps you do if the

condition is false



JavaScript


SequenceConditionalLooping (iteration)1. Do this.2. Do something else.3. Do the following steps x number of times

3a. Do this sub-step3b. Do another sub-step.

4. Do another thing.



JavaScript


SequenceConditionalLoopingTransfer (go to)1. Do this.2. Go to step 4.3. Do something else.4. Do another thing.5. Go to step 1.

Never gets executed



JavaScript


Unstructured“Go To Statement Considered Harmful”Edsger W. Dijkstra, 1968

StructuredTop-down construction

Object-Oriented“Objects” composed of data and instructionsSelf-contained



JavaScript


Flowcharts (graphical symbols)

Stoplightgreen?

Stop(light is red)

Continueon

Stoplightgreen?

YES

NO

YES

NO



JavaScript


Pseudocode (half code, half natural)

While the stoplight is red, stop.If the stoplight is green then continue on.

Advantages:Avoids programming language technicalitiesEasy to understand and change



JavaScript


Programming languagesC, C++, Java, COBOL, FORTRANStand-alone software

Scripting languagesJavaScript, VBScript“Mini” program that runs inside another programCannot be used outside that application

What is JavaScript?Introduction to ProgrammingAlgorithms and Control Structures

JavaScript


CompilersTranslates entire source file at onceProduces a single executable file

InterpretersTranslates source statements one at a timeImmediately executes each statement


JavaScript


Browsers have two functions:HTML

Translate the tagsDisplay the content appropriately

JavaScriptInterpret a lineExecute the line

Both are executed in order


JavaScript


JavaScript was introduced by Netscape to validate information entered into text boxes (and other form elements) before it was submitted to a serverJavaScript is not Java, and is not a stripped down version of Java


JavaScript


JavaScript code composed of:Instructions/Commands/StatementsCase sensitive!Inserted directly into HTML<script> element

<script>(scripting commands)

</script>

What is JavaScript?The <script> element


JavaScript


More than one scripting languageMust specify JavaScript in XHTML code

<script type=“text/javascript”>…

</script>


JavaScript



Don’t confuse HTML with JavaScript

<script type=“text/javascript”>

…

</script>

HTMLJavaScript


JavaScript



Can have multiple <script> elements in one HTML documentCh07-Ex-01.htm


JavaScript



Can access JavaScript code stored in an external file<script src=“my_code.js”

type=“text/javascript”>…</script>

Only JavaScript code in the .js file, not the <script> tags


JavaScript



External filesGood for repeated codeHides code from casual users


JavaScript



Entomology: “a branch of zoology that deals with insects ”, i.e., debugging


JavaScript

What is JavaScript?The <script> elementEntomology of Programming


SyntaxConstructed improperly

LogicConstructed properly but does not

achieve thedesired result


JavaScript


Error types


Message box:Line number – not always accurateError – not always informative

Skips:Invalid line andAll subsequent lines in same <script> element


JavaScript


Browser errors


Fixing errorsCorrect line by lineUse trial and errorRewrite code entirelyUse comments to eliminate items


JavaScript



CommentsHelp other readersHelp yourself at a later timeEliminate sections of code during debugging


JavaScript



Comments

Single-line<script …>

alert(“Hi!”) // A friendly greeting

// End of this script element</script>


JavaScript



CommentsMultiple-line

<script …>/* This is a multiple line comment. *//* So is this */

</script>


JavaScript


CommentsDon’t confuse with HTML comment:




JavaScript


Interactivity

HTML has form elements like text boxes, check boxes, radio buttons, etc.JavaScript permits processing of these elements


JavaScript

Interactivity


EventsAn action associated with some object

Types:ClickSelectMouseover

Ch07-Ex-03.htm


JavaScript

Interactivity


Browser automatically tracks eventsProgrammers job is to write code that responds to eventsEvent Handler


JavaScript

Interactivity


User clicks the buttonBrowser automatically detects the clickBrowser generates a click eventEvent handler associated with the button is triggeredJavaScript commands associated with that event are processed


JavaScript

Interactivity

Sequence of events


onclick attribute describes the action(s) to take when a click event is detected

<input type=“button” … ¬ onclick=“alert(‘You clicked me’)” />

alert is JavaScript exception to <script> rule


JavaScript

Interactivity


InteractivityMultiple JavaScript commands are valid

<input type=“button” … ¬ onclick=“alert(‘You clicked me’)”; onclick=“alert(‘Well done’)” />


JavaScript

Interactivity


InteractivityMouse events

onmouseover – when cursor is moved over an objectonmouseout – when cursor over an object moves away from the object


JavaScript

Interactivity

CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) CSCE 102 - General Applications...

Documents

Transcript of CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) CSCE 102 - General Applications...