INFO/CSE 100, Spring 2006 Fluency in Information Technology

Slides:



Advertisements
Similar presentations
JavaScript I. JavaScript is an object oriented programming language used to add interactivity to web pages. Different from Java, even though bears some.
Advertisements

INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Thursday, September 19, 2013 Session 3: JavaScript.
Introduction to PHP MIS 3501, Fall 2014 Jeremy Shafer
The Web Warrior Guide to Web Design Technologies
Computer Science 103 Chapter 3 Introduction to JavaScript.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
JavaScript, Fourth Edition
Guide To UNIX Using Linux Third Edition
JavaScript, Third Edition
The Information School of the University of Washington Oct 20fit programming1 Programming Basics INFO/CSE 100, Fall 2006 Fluency in Information Technology.
2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr
Introduction to scripting
JavaScript, Fifth Edition Chapter 1 Introduction to JavaScript.
Created by, Author Name, School Name—State FLUENCY WITH INFORMATION TECNOLOGY Skills, Concepts, and Capabilities.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
Client Scripting1 Internet Systems Design. Client Scripting2 n “A scripting language is a programming language that is used to manipulate, customize,
2440: 211 Interactive Web Programming Expressions & Operators.
TUTORIAL 10: PROGRAMMING WITH JAVASCRIPT Session 2: What is JavaScript?
 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.
DHTML AND JAVASCRIPT Genetic Computer School LESSON 5 INTRODUCTION JAVASCRIPT G H E F.
20-753: Fundamentals of Web Programming 1 Lecture 12: Javascript I Fundamentals of Web Programming Lecture 12: Introduction to Javascript.
Overview of Form and Javascript fundamentals. Brief matching exercise 1. This is the software that allows a user to access and view HTML documents 2.
ECA 225 Applied Interactive Programming1 ECA 225 Applied Online Programming basics.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
REEM ALMOTIRI Information Technology Department Majmaah University.
JavaScript Tutorial. What is JavaScript JavaScript is the programming language of HTML and the Web Programming makes computers do what you want them to.
1 Agenda  Unit 7: Introduction to Programming Using JavaScript T. Jumana Abu Shmais – AOU - Riyadh.
© 2010 Robert K. Moniot1 Chapter 6 Introduction to JavaScript.
CGS 3066: Web Programming and Design Spring 2017
Module 1 Introduction to JavaScript
Build in Objects In JavaScript, almost "everything" is an object.
More about comments Review Single Line Comments The # sign is for comments. A comment is a line of text that Python won’t try to run as code. Its just.
Chapter 2 Variables.
Chapter 6 JavaScript: Introduction to Scripting
CHAPTER 4 CLIENT SIDE SCRIPTING PART 1 OF 3
CHAPTER 5 SERVER SIDE SCRIPTING
JavaScript is a programming language designed for Web pages.
Overview: Programming Concepts
Chapter 13 - JavaScript/JScript: Introduction to Scripting
* Lecture # 7 Instructor: Rida Noor Department of Computer Science
Scope, Objects, Strings, Numbers
Introduction to Scripting
JavaScript Syntax and Semantics
4. Javascript Pemrograman Web I Program Studi Teknik Informatika
PHP Introduction.
JavaScript.
Intro to PHP & Variables
JavaScript an introduction.
Introduction to JavaScript
INFO/CSE 100, Spring 2005 Fluency in Information Technology
PHP.
T. Jumana Abu Shmais – AOU - Riyadh
JavaScript What is JavaScript? What can JavaScript do?
JavaScript What is JavaScript? What can JavaScript do?
JavaScript CS 4640 Programming Languages for Web Applications
INFO/CSE 100, Spring 2005 Fluency in Information Technology
Tutorial 10: Programming with javascript
JavaScript Basics What is JavaScript?
JavaScript is a scripting language designed for Web pages by Netscape.
JavaScript: Introduction to Scripting
The <script> Tag
Javascript Chapter 19 and 20 5/3/2019.
Chapter 2 Variables.
Programming Basics Review
PYTHON - VARIABLES AND OPERATORS
Presentation transcript:

INFO/CSE 100, Spring 2006 Fluency in Information Technology Programming Basics INFO/CSE 100, Spring 2006 Fluency in Information Technology http://www.cs.washington.edu/100 1/1/2019 fit100-11-programming

Readings and References Fluency with Information Technology Chapter 18, Fundamental Concepts Expressed in JavaScript Appendix B, Javascript Rules Other References WebDeveloper.com http://www.webdeveloper.com/forum/index.php Thomas Jefferson National Accelerator Facility, Office of Science Education http://education.jlab.org/indexpages/elementgames.html W3Schools Javascript Home http://www.w3schools.com/js/default.asp 1/1/2019 fit100-11-programming

An algorithm to alphabetize CDs define variable named Artist use Artist to refer to the name of the group that made a CD for all slots in the rack starting at one end call the current slot alpha for all the remaining slots in the rack call the next slot beta Exchange? If Artist of the CD in the beta slot is earlier in the alphabet than the Artist of the CD in the alpha slot, interchange the CDs next beta next alpha done 1/1/2019 fit100-11-programming

The Plan We will learn JavaScript over the next few lectures JavaScript is used with HTML in Web pages JavaScript is a contemporary programming language -- we will learn only its basics You will program in a text editor and run your program with your browser JavaScript is a way to make HTML “dynamic” 1/1/2019 fit100-11-programming

Begin with HTML Basic HTML is static the contents of the file are displayed as given <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Simple A</title> </head> <body> What is 2.0 + 2.0? </body> </html> 1/1/2019 fit100-11-programming

Browser interprets your page You are telling the browser what to do using HTML for the static parts of the page This page is written in the HTML language. <html> <head> <title>Simple A</title> </head> <body> What is 2.0 + 2.0? </body> </html> Here is some header information about the page. Here is the main body of the page. 1/1/2019 fit100-11-programming

Add some “dynamic” content Scripting languages let us create active pages implement actions to be taken at run-time when the page is loaded or in response to user event <head> <title>Simple B</title> <script type="text/javascript"> var greeting = "Hello World!"; </script> </head> <body> document.write(greeting); What is 2.0 + 2.0? </body> 1/1/2019 fit100-11-programming

JavaScript in an HTML page <script> block in <head> <head> <title>Simple B</title> <script type="text/javascript"> var greeting = "Hello World!"; </script> </head> <body> document.write(greeting); What is 2.0 + 2.0? </body> Language we are using is javascript <script> block in <body> Generate HTML “on the fly” with document.write(...) You can have more than one script tag in HTML. They can go in either the head or the body. Specify the scripting language type as text/javascript. In this javascript there is one variable (greeting) and one javascript function (document.write) 1/1/2019 fit100-11-programming

Browser interprets your page You are telling the browser what to do using HTML for the static parts of the page using JavaScript for the more dynamic parts <head> <title>Simple B</title> <script type="text/javascript"> var greeting = "Hello World!"; </script> </head> <body> document.write(greeting); What is 2.0 + 2.0? </body> Here is some script initialization information. Here is some script for the body of the page. 1/1/2019 fit100-11-programming

Variables In Real Life A variable is a "container" for information you want to store The name of the variable stays the same, but the value associated with that name can change That’s why it’s called a “variable”! 1/1/2019 fit100-11-programming

Variables In Programming Program variables have names and values Names (also called identifiers) generally start with a letter and can contain letters, numbers, and underscore characters “_” Names are case sensitive No spaces! Values can be numbers, strings, boolean, etc change as the program executes No Spaces! No punctuation characters other than underscore Variable names should usually start with a lowercase letter. 1/1/2019 fit100-11-programming

Assign a value to a variable The universal form of the assignment statement variable gets value balance gets the value 52 greeting gets the value “Hello World!” Each language expresses “gets” in a particular way JavaScript uses the single equals sign = var balance = 52; var greeting = "Hello World!"; variable identifier (name) var keyword value NOTE: The equals sign = is used differently in math and programming. 1/1/2019 fit100-11-programming

Variable Declarations <script type="text/javascript"> var eyeColor; <<< undefined! var eyeColor = "green"; <<< initialized var eyeColor = ""; <<< initilized, empty var eyeColor = "green", hairColor="blonde"; hairColor = "carmel"; </script> Every variable must be declared in a statement -- (ends with a semi-colon). Initializing is setting the initial value! Can be set to empty. Can declare more than one variable at a time, separated by a comma. Assignment is changing the variables value AFTER it has been initialized! <<< variable assignment 1/1/2019 fit100-11-programming

Basic Data Types in Javascript Numbers: var gasPrice = 2.55; Strings var eyeColor = "hazel green"; Boolean var isFriday = true; var isWeekend = 0; Javascript will figure out the data type: number, string, boolean. Numbers will not be in units. (ex: no dollar sign). Numbers must not be quoted! Strings can be any length!, including empty; Strings must be quoted (either single or double. << must match! Boolean values can be 1/0 or true/false 1/1/2019 fit100-11-programming

Special String Characters All English letters and numbers are valid. Most English punctuation is valid. There are some special string characters which we use with an escape sequence \t tab \n newline \" double quote \' single quote \\ backslash var nikeQuote = "\"Just Do It!\""; Use an escape sequence to add the quote character to your String. In this example, you want the quotes to be part of the string and show up on the web page. 1/1/2019 fit100-11-programming

JavaScript Variables <html> <head> <title>Simple C</title> <script type="text/javascript"> var greeting = "Hello World!"; var balance = 52; var transaction = 12; </script> </head> <body> document.writeln("<p>"+greeting+"<\/p>"); document.writeln("<p>My HuskyCard balance is $"+balance+".<\/p>"); document.writeln("<p>The next transaction will be for $"+transaction+".<\/p>"); document.writeln("<p>What will the new balance be?<\/p>"); </body> Programmers begin by deciding on which variables they will use in their program. They like to put the variable declaration in the top! a. Won't forget about it. b. Its not going to appear in the body of the HTML When we want to print the value of a variable in the HTML text = we use the "+balance+" Note that we include HTML code in the document.writeln function. 1/1/2019 fit100-11-programming

Expressions The right-hand side of an assignment statement can be any valid expression Expressions are “formulas” saying how to manipulate existing values to compute new values balance = balance - transaction; seconds = 60*minutes; message = "Status code is " + codeValue; isFreezing = (temp < 32); 1/1/2019 fit100-11-programming

Operators Use operators to build expressions Numeric operators + - * / mean add, subtract, multiply, divide 3 + 3 = 6 String operator + means concatenate strings "3" + "3" = "33" Relational operators < <= == != >= > mean less than, less than or equal to, equal to, not equal to, greater than or equal to, greater than Boolean operators && || ! mean and, or, not + sign is an example of operator overload. It means different things when used with numbers and strings. Numbers are added together like math. Strings are concatenated. 1/1/2019 fit100-11-programming

JavaScript Expressions <html> <head> <title>Simple D</title> <script type="text/javascript"> var balance = 52; var transaction = 12; </script> </head> <body> document.writeln("<p>My Husky Card balance is $"+balance+".<\/p>"); document.writeln("<p>The next transaction will be for $"+transaction+".<\/p>"); balance = balance - transaction; document.writeln("<p>The new balance will be $"+balance+".<\/p>"); </body> </html> Balance is being assigned a new value! The value is the original value minus the transaction. 1/1/2019 fit100-11-programming

Practice, practice, practice Write a simple web page with a simple script like the ones here Save it to disk Open the web page with your browser Does it look like what you expected? Edit, save, reload ... 1/1/2019 fit100-11-programming

http://www.w3schools.com/js/js_examples.asp 1/1/2019 fit100-11-programming