Elementary Computing CSC 100 1
Basic Programming Concepts A computer is a kind of universal machine. By using different software, a computer can do different things. A program is a sequence of instructions that a computer must follow to accomplish a task. Computer programming is the process of constructing a program. A computer typically can understand a finite number of instructions. 2
Outcomes A computer program is essentially a sequence of instructions. Computer instructions may include actions, controls and calculations. Program design is similar to writing a cooking recipe. Different programs may use different sets of instructions, depending on the language used. 3
Study Guide What is a computer program? What are computer instructions? How a program (or a recipe) is designed? What are actions, sequence, repetition and conditions? What is Javascript? 4
Study Guide What is DOM? What is a function? What is a variable? What are control structures? What are statements? How does Javascript refer to DOM in HTML? 5
Without apps, a smartphone is not so smart. 6
Without Apps, an iphone is 7
Apps are just application programs. 8
With Apps 9
A program (or app) can be small but still be useful. 10
What is a program? 11
A program is a sequence of computer instructions. 12
What are computer instructions? 13
Computer instructions come in different varieties; some understood only by machines, some by humans. 14
We will learn some computer instructions using JavaScript. 15
Writing a program is similar to writing a cooking recipe. 16
How to make Jell- O? 17
How about these Instructions? 18
(A) Basic Instructions 1. Add 1 cup of boiling water to gelatin mix 2. Stir 2 min until completely dissolved 3. Stir in 1 cup of cold water 4. Refrigerate 4 hours or until firm 19
A computer is like a dumb kid. You need to show it every step in details. 20
(B) Detailed Instructions 1. Measure 1 cup of cold water, pour into kettle and let it boil 2. Mix 1 cup of hot water, 1 cup of cold water and 1 package of Jell- O into a large bowl 3. Stir with a spoon until the mixture is smooth 4. Put a thermometer into the bowl 5. Wait until the mixture is below 30C 6. Put bowl inside fridge and wait until settle 21
Start with a basic idea (e.g. A). Refine each step until the kid (computer) understands (e.g. B). 22
Each step may be too big or complicated. 23
You need to refine it into smaller steps until they can be understood by the kid (computer). 24
How to make Jell- O enough for 20 kids? Each package is enough for 4 kids. 25
(C) Instructions for 5 Packages 1. Follow instructions (B). 2. Follow instructions (B). 3. Follow instructions (B). 4. Follow instructions (B). 5. Follow instructions (B). 26
(C) Instructions for 5 Packages 1. Repeat instructions (B) 5 times. 27
(D) Instructions for 5 Packages 1. Measure 5 cups of cold water, pour into kettle and let it boil 2. Repeat 5 times with 5 bowls a. Mix 1 cup of hot water, 1 cup of cold water and 1 package of Jell- O into a large bowl b. Stir with a spoon until the mixture is smooth 3. Wait until each bowl is below 30C 4. Put bowls inside fridge and wait until settle 28
How about Rainbow Jell- O? 29
Sometimes, we need to adapt a basic set of instructions for a slightly different problem. 30
Observations A recipe (program) is a set of instructions. An instruction is a basic action, e.g., pour, stir, wait, mix, measure, remove, put, etc. Instructions may be done in a sequence, one after another. Instructions may be repeated. Instructions may have conditions, e.g., until settle, until below 30C. 31
(I) Fundamental Concepts Actions : basic instructions. Sequencing : one instruction follows another. Repetition : a set of instructions being carried out multiple times. Condition : when a situation happens. 32
(II) Fundamental Concepts Sub steps : a big step may be broken down into smaller steps. Functions : some sequence of instructions may be performed as a group. Start and End: there is always a first and the last step. 33
JavaScript Programming 34
What is JavaScript? JavaScript was created when the first widely used browser Netscape was made available. It was designed to make the WWW more dynamic and interactive. Today, JavaScript is a main part of the standard HTML5. 35
HTML and JavaScript (1) JavaScript has always been a part of HTML since the beginning. HTML is a webpage description language, i.e., heading, paragraphs, images, etc. JavaScript is a programming language, i.e., variables, functions, control, statements. 36
HTML and JavaScript (2) One can create an HTML webpage without JavaScript. CSS (Cascade- Style- Sheet) is used for styling and layout of HTML documents. JavaScript is used to add dynamic contents, i.e., scrolling images, special effects, interactions. 37
HTML and JavaScript (3) Inside an HTML document, JavaScript can be added by using: <script> </script> anywhere inside <head> </head> or <body> </body>, a separate file jquery.js and is loaded by <script src= jquery.js > </script> 38
JavaScript Concepts 39
JavaScript Console Every browser supports JavaScript. Use Inspect Element to open the Developer console, then choose Console, which is the JavaScript console. One can interact with the current HTML page using a JavaScript console. 40
JavaScript Console Demo 41
JavaScript Features (1) There are numbers (e.g., 1,2,3), and character strings (e.g., mantis, map ). There are predefined operations (e.g., 1+2, 2+3*4, mantis + cheng ). There are comparisons (e.g., 1 > 2, abc == mantis ) which produce true or false. 42
JavaScript Features (2) There are variables which can store temporary values (e.g., var a = 1; var name = mantis ). There are assignments (e.g., a = b + 1, name = mantis ). There are conditionals if- then- else, e.g., if ( age > 21 ) { } else { } 43
JavaScript Statements (3) A statement is stand- alone instruction, e.g. alert( Hello ) prompt( What is your name? ) a = 2 * 3 + 4 A JavaScript program is a sequence of statements, separated by ;. 44
JavaScript Functions (4) When a sequence of statements is to be used again and again, it is useful to group them into a function. For example, function greeting() { var name = prompt( What is your name? ); var age = prompt( How old are you? ); } 45
HTML and DOM To use JavaScript, one need to understand the Document Object Model (or DOM) of HTML. When a webpage is loaded inside a browser, it is stored inside as a DOM. A DOM is a tree representation of a webpage, where the HTML tags are nodes in the tree. 46
My First Page 47
My First Page DOM in Firefox 48
A DOM Tree from W3CSchool 49
DOM and JavaScript Every HTML tag is an element (or a node) in a DOM. If there are 5 <h1> headings in a document, then there are 5 <h1> elements in its DOM. Javascript can read or modify any element in a DOM. 50
DOM and ID Attribute In general, there are far too many elements with the same tag, e.g., <img>, <h1>, <p>. Typically, we attach an id attribute to those that are of interest. For example, <img id= myimg src= celine.jpg >. 51
getelementbyid To find the a particular element in the DOM, we first attach an id attribute to it in the HTML. We use document.getelementbyid() to locate the element with the correct id. Then, we can read or modify that element associated with this particular id. 52
An getelementbyid Example Assume that <img id= myimg src= celine.jpg > is defined in the HTML document. Then, document.getelementbyid( myimg ) refers to the <img> tag that contains celine.jpg. By making document.getelementbyid( myimg ).src = adele.jpg we change the image to adele.jpg from celine.jpg. 53
Summary of HTML and JavaScript With HTML and CSS, one can design fantastic looking webpages. With the addition of JavaScript, one can make changes to the HTML/CSS dynamically with user inputs or periodically. For example, almost all Google supported apps are written in JavaScript! 54
The End. 55