Elementary Computing CSC 100. M. Cheng, Computer Science

Size: px
Start display at page:

Download "Elementary Computing CSC 100. M. Cheng, Computer Science"

Transcription

1 Elementary Computing CSC 100 1

2 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

3 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

4 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

5 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

6 Without apps, a smartphone is not so smart. 6

7 Without Apps, an iphone is 7

8 Apps are just application programs. 8

9 With Apps 9

10 A program (or app) can be small but still be useful. 10

11 What is a program? 11

12 A program is a sequence of computer instructions. 12

13 What are computer instructions? 13

14 Computer instructions come in different varieties; some understood only by machines, some by humans. 14

15 We will learn some computer instructions using JavaScript. 15

16 Writing a program is similar to writing a cooking recipe. 16

17 How to make Jell- O? 17

18 How about these Instructions? 18

19 (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

20 A computer is like a dumb kid. You need to show it every step in details. 20

21 (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

22 Start with a basic idea (e.g. A). Refine each step until the kid (computer) understands (e.g. B). 22

23 Each step may be too big or complicated. 23

24 You need to refine it into smaller steps until they can be understood by the kid (computer). 24

25 How to make Jell- O enough for 20 kids? Each package is enough for 4 kids. 25

26 (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

27 (C) Instructions for 5 Packages 1. Repeat instructions (B) 5 times. 27

28 (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

29 How about Rainbow Jell- O? 29

30 Sometimes, we need to adapt a basic set of instructions for a slightly different problem. 30

31 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

32 (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

33 (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

34 JavaScript Programming 34

35 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

36 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

37 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

38 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

39 JavaScript Concepts 39

40 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

41 JavaScript Console Demo 41

42 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

43 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

44 JavaScript Statements (3) A statement is stand- alone instruction, e.g. alert( Hello ) prompt( What is your name? ) a = 2 * A JavaScript program is a sequence of statements, separated by ;. 44

45 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

46 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

47 My First Page 47

48 My First Page DOM in Firefox 48

49 A DOM Tree from W3CSchool 49

50 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

51 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

52 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

53 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

54 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

55 The End. 55

Elementary Computing CSC 100. M. Cheng, Computer Science

Elementary Computing CSC 100. M. Cheng, Computer Science 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

More information

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Plan for the next 5 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style

More information

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Plan for the next 5 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style

More information

A network is a group of two or more computers that are connected to share resources and information.

A network is a group of two or more computers that are connected to share resources and information. Chapter 1 Introduction to HTML, XHTML, and CSS HTML Hypertext Markup Language XHTML Extensible Hypertext Markup Language CSS Cascading Style Sheets The Internet is a worldwide collection of computers and

More information

Revision for Grade 7 ASP in Unit :1&2 Design & Technology Subject

Revision for Grade 7 ASP in Unit :1&2 Design & Technology Subject Your Name:.... Grade 7 - SECTION 1 Matching :Match the terms with its explanations. Write the matching letter in the correct box. The first one has been done for you. (1 mark each) Term Explanation 1.

More information

HTML 5 and CSS 3, Illustrated Complete. Unit L: Programming Web Pages with JavaScript

HTML 5 and CSS 3, Illustrated Complete. Unit L: Programming Web Pages with JavaScript HTML 5 and CSS 3, Illustrated Complete Unit L: Programming Web Pages with JavaScript Objectives Explore the Document Object Model Add content using a script Trigger a script using an event handler Create

More information

BEFORE CLASS. If you haven t already installed the Firebug extension for Firefox, download it now from

BEFORE CLASS. If you haven t already installed the Firebug extension for Firefox, download it now from BEFORE CLASS If you haven t already installed the Firebug extension for Firefox, download it now from http://getfirebug.com. If you don t already have the Firebug extension for Firefox, Safari, or Google

More information

The Structure of the Web. Jim and Matthew

The Structure of the Web. Jim and Matthew The Structure of the Web Jim and Matthew Workshop Structure 1. 2. 3. 4. 5. 6. 7. What is a browser? HTML CSS Javascript LUNCH Clients and Servers (creating a live website) Build your Own Website Workshop

More information

COMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2017)

COMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2017) COMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2017) RAMANA ISUKAPALLI RAMANA@CS.COLUMBIA.EDU 1 LECTURE-1 Course overview See http://www.cs.columbia.edu/~ramana Overview of HTML Formatting, headings,

More information

Training Sister Hicks

Training Sister Hicks VMT CONSULTING Hand-out Vernell Turner 5/18/2016 2 Training Agenda 1. Images 2. Web Pages General 3. FBH Website 3 Images Tips for Using Images in a MS Word Document: 1. Type your text first before inserting

More information

Client vs Server Scripting

Client vs Server Scripting Client vs Server Scripting PHP is a server side scripting method. Why might server side scripting not be a good idea? What is a solution? We could try having the user download scripts that run on their

More information

COMS 469: Interactive Media II

COMS 469: Interactive Media II COMS 469: Interactive Media II Agenda Review Data Types & Variables Decisions, Loops, and Functions Review gunkelweb.com/coms469 Review Basic Terminology Computer Languages Interpreted vs. Compiled Client

More information

Web Site Development with HTML/JavaScrip

Web Site Development with HTML/JavaScrip Hands-On Web Site Development with HTML/JavaScrip Course Description This Hands-On Web programming course provides a thorough introduction to implementing a full-featured Web site on the Internet or corporate

More information

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Plan for the next 5 weeks: Introduction to HTML tags Recap on HTML and creating our template file Introduction

More information

COMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2018)

COMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2018) COMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2018) RAMANA ISUKAPALLI RAMANA@CS.COLUMBIA.EDU 1 LECTURE-1 Course overview See http://www.cs.columbia.edu/~ramana Overview of HTML Formatting, headings,

More information

Introduction to Web Development

Introduction to Web Development Introduction to Web Development Lecture 1 CGS 3066 Fall 2016 September 8, 2016 Why learn Web Development? Why learn Web Development? Reach Today, we have around 12.5 billion web enabled devices. Visual

More information

Time: 3 hours. Full Marks: 70. The figures in the margin indicate full marks. Answer from all the Groups as directed. Group A.

Time: 3 hours. Full Marks: 70. The figures in the margin indicate full marks. Answer from all the Groups as directed. Group A. COPYRIGHT RESERVED End SEM (V) MCA (XXX) 2017 Time: 3 hours Full Marks: 70 Candidates are required to give their answers in their own words as far as practicable. The figures in the margin indicate full

More information

HTML5 MOCK TEST HTML5 MOCK TEST I

HTML5 MOCK TEST HTML5 MOCK TEST I http://www.tutorialspoint.com HTML5 MOCK TEST Copyright tutorialspoint.com This section presents you various set of Mock Tests related to HTML5 Framework. You can download these sample mock tests at your

More information

HTML, XHTML, and CSS. Sixth Edition. Chapter 1. Introduction to HTML, XHTML, and

HTML, XHTML, and CSS. Sixth Edition. Chapter 1. Introduction to HTML, XHTML, and HTML, XHTML, and CSS Sixth Edition Chapter 1 Introduction to HTML, XHTML, and CSS Chapter Objectives Describe the Internet and its associated key terms Describe the World Wide Web and its associated key

More information

c122mar413.notebook March 06, 2013

c122mar413.notebook March 06, 2013 These are the programs I am going to cover today. 1 2 Javascript is embedded in HTML. The document.write() will write the literal Hello World! to the web page document. Then the alert() puts out a pop

More information

Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen

Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen https://www.halvorsen.blog Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen History of the Web Internet (1960s) World Wide Web - WWW (1991) First Web Browser - Netscape,

More information

Brief Intro to Firebug Sukwon Oh CSC309, Summer 2015

Brief Intro to Firebug Sukwon Oh CSC309, Summer 2015 Brief Intro to Firebug Sukwon Oh soh@cs.toronto.edu CSC309, Summer 2015 Firebug at a glance One of the most popular web debugging tool with a colleccon of powerful tools to edit, debug and monitor HTML,

More information

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web

More information

EXERCISE: Introduction to client side JavaScript

EXERCISE: Introduction to client side JavaScript EXERCISE: Introduction to client side JavaScript Barend Köbben Version 1.3 March 23, 2015 Contents 1 Dynamic HTML and scripting 3 2 The scripting language JavaScript 3 3 Using Javascript in a web page

More information

JavaScript: Events, DOM and Attaching Handlers

JavaScript: Events, DOM and Attaching Handlers JavaScript: Events, DOM and Attaching Handlers CISC 282 October 11, 2017 Keyboard and Text Events Name The User Must Applicable Elements blur remove focus , ,... focus apply focus , ,...

More information

INTRODUCTION TO JAVASCRIPT

INTRODUCTION TO JAVASCRIPT INTRODUCTION TO JAVASCRIPT Overview This course is designed to accommodate website designers who have some experience in building web pages. Lessons familiarize students with the ins and outs of basic

More information

1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites

1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites A. Pre-Production of Webpage 1. Determine the specific software needed WYSIWYG- design software that manipulates components of the web page without the user writing or editing code Uses graphical layout

More information

1. Cascading Style Sheet and JavaScript

1. Cascading Style Sheet and JavaScript 1. Cascading Style Sheet and JavaScript Cascading Style Sheet or CSS allows you to specify styles for visual element of the website. Styles specify the appearance of particular page element on the screen.

More information

JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK

JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK Programming for Digital Media EE1707 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK 1 References and Sources 1. Javascript & JQuery: interactive front-end

More information

Student, Perfect Final Exam May 25, 2006 ID: Exam No CS-081/Vickery Page 1 of 6

Student, Perfect Final Exam May 25, 2006 ID: Exam No CS-081/Vickery Page 1 of 6 Student, Perfect Final Exam May 25, 2006 ID: 9999. Exam No. 3193 CS-081/Vickery Page 1 of 6 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives aid on

More information

Mobile Site Development

Mobile Site Development Mobile Site Development HTML Basics What is HTML? Editors Elements Block Elements Attributes Make a new line using HTML Headers & Paragraphs Creating hyperlinks Using images Text Formatting Inline styling

More information

Introduction to HTML and CSS. Arts and Humanities in the Digital Age 2018 CHASE DTP Dr. Paul Gooding

Introduction to HTML and CSS. Arts and Humanities in the Digital Age 2018 CHASE DTP Dr. Paul Gooding Introduction to HTML and CSS Arts and Humanities in the Digital Age 2018 CHASE DTP Dr. Paul Gooding p.gooding@uea.ac.uk @pmgooding Session Outline Introduction How do the web, and web browsers work? Getting

More information

Student, Perfect Midterm Exam March 24, 2006 Exam ID: 3193 CS-081/Vickery Page 1 of 5

Student, Perfect Midterm Exam March 24, 2006 Exam ID: 3193 CS-081/Vickery Page 1 of 5 Student, Perfect Midterm Exam March 24, 2006 Exam ID: 3193 CS-081/Vickery Page 1 of 5 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives aid on any

More information

CGS 3066: Spring 2015 JavaScript Reference

CGS 3066: Spring 2015 JavaScript Reference CGS 3066: Spring 2015 JavaScript Reference Can also be used as a study guide. Only covers topics discussed in class. 1 Introduction JavaScript is a scripting language produced by Netscape for use within

More information

Basics of Web. First published on 3 July 2012 This is the 7 h Revised edition

Basics of Web. First published on 3 July 2012 This is the 7 h Revised edition First published on 3 July 2012 This is the 7 h Revised edition Updated on: 03 August 2015 DISCLAIMER The data in the tutorials is supposed to be one for reference. We have made sure that maximum errors

More information

CISC 1600 Lecture 2.4 Introduction to JavaScript

CISC 1600 Lecture 2.4 Introduction to JavaScript CISC 1600 Lecture 2.4 Introduction to JavaScript Topics: Javascript overview The DOM Variables and objects Selection and Repetition Functions A simple animation What is JavaScript? JavaScript is not Java

More information

Programing for Digital Media EE1707. Lecture 4 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK

Programing for Digital Media EE1707. Lecture 4 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK Programing for Digital Media EE1707 Lecture 4 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK 1 today Event Handling in JavaScript Client-Side JavaScript

More information

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) What is JavaScript?

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) What is JavaScript? Web Development & Design Foundations with HTML5 Ninth Edition Chapter 14 A Brief Look at JavaScript and jquery Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of

More information

Design Document V2 ThingLink Startup

Design Document V2 ThingLink Startup Design Document V2 ThingLink Startup Yon Corp Andy Chen Ashton Yon Eric Ouyang Giovanni Tenorio Table of Contents 1. Technology Background.. 2 2. Design Goal...3 3. Architectural Choices and Corresponding

More information

FBCA-03 April Introduction to Internet and HTML Scripting (New Course)

FBCA-03 April Introduction to Internet and HTML Scripting (New Course) Seat No. : FBCA-03 April-2007 105-Introduction to Internet and HTML Scripting (New Course) Time : 3 Hours] [Max. Marks : 70 Instructions : (1) Figures to the right indicate marks allotted to that questions.

More information

The cuisine package. Ben Cohen. 2000/08/01, v0.5

The cuisine package. Ben Cohen. 2000/08/01, v0.5 The cuisine package Ben Cohen 2000/08/01, v0.5 Abstract This package provides an environment for typesetting recipes in steps in which each ingredient is on the left of the page next to the method step

More information

Web Development & Design Foundations with HTML5

Web Development & Design Foundations with HTML5 1 Web Development & Design Foundations with HTML5 CHAPTER 14 A BRIEF LOOK AT JAVASCRIPT Copyright Terry Felke-Morris 2 Learning Outcomes In this chapter, you will learn how to: Describe common uses of

More information

welcome to BOILERCAMP HOW TO WEB DEV

welcome to BOILERCAMP HOW TO WEB DEV welcome to BOILERCAMP HOW TO WEB DEV Introduction / Project Overview The Plan Personal Website/Blog Schedule Introduction / Project Overview HTML / CSS Client-side JavaScript Lunch Node.js / Express.js

More information

Programming in HTML5 with JavaScript and CSS3

Programming in HTML5 with JavaScript and CSS3 www.dumpspdf.com Microsoft 70-480 Programming in HTML5 with JavaScript and CSS3 Version: Demo 20.0 QUESTION NO: 1 You are in the process of creating a client web form for ABC.com. The form contains an

More information

JavaScript II CSCI 311 SPRING 2017

JavaScript II CSCI 311 SPRING 2017 JavaScript II CSCI 311 SPRING 2017 Overview Look at more JavaScript functionality DOM slide show preloading images pull down menus and more! Document Object Model DOM gives us ways to access elements of

More information

Introduction to Dreamweaver CS4:

Introduction to Dreamweaver CS4: Introduction to Dreamweaver CS4: 1.0.0 published by Antall Training http://www.scottantall.com info@scottantall.com 440/623-3738 Copyright 2003-2009 Antall Training All Rights Reserved. No portion of this

More information

What is Java Script? Writing to The HTML Document. What Can JavaScript do? CMPT 165: Java Script

What is Java Script? Writing to The HTML Document. What Can JavaScript do? CMPT 165: Java Script What is Java Script? CMPT 165: Java Script Tamara Smyth, tamaras@cs.sfu.ca School of Computing Science, Simon Fraser University November 7, 2011 JavaScript was designed to add interactivity to HTML pages

More information

Session 3: JavaScript - Structured Programming

Session 3: JavaScript - Structured Programming INFM 603: Information Technology and Organizational Context Session 3: JavaScript - Structured Programming Jimmy Lin The ischool University of Maryland Thursday, September 25, 2014 Source: Wikipedia Types

More information

ThingLink User Guide. Andy Chen Eric Ouyang Giovanni Tenorio Ashton Yon

ThingLink User Guide. Andy Chen Eric Ouyang Giovanni Tenorio Ashton Yon ThingLink User Guide Yon Corp Andy Chen Eric Ouyang Giovanni Tenorio Ashton Yon Index Preface.. 2 Overview... 3 Installation. 4 Functionality. 5 Troubleshooting... 6 FAQ... 7 Contact Information. 8 Appendix...

More information

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10 CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties

More information

Dreamweaver Basics Workshop

Dreamweaver Basics Workshop Dreamweaver Basics Workshop Robert Rector idesign Lab - Fall 2013 What is Dreamweaver? o Dreamweaver is a web development tool o Dreamweaver is an HTML and CSS editor o Dreamweaver features a WYSIWIG (What

More information

CIS 228 (Spring, 2012) Final, 5/17/12

CIS 228 (Spring, 2012) Final, 5/17/12 CIS 228 (Spring, 2012) Final, 5/17/12 Name (sign) Name (print) email I would prefer to fail than to receive a grade of or lower for this class. Question 1 2 3 4 5 6 7 8 9 A B C D E TOTAL Score CIS 228,

More information

Web Technology for Test and Automation Applications

Web Technology for Test and Automation Applications Web Technology for Test and Automation Applications Fanie Coetzer - FSE Demo Operator Technician Engineers Your boss Test Sequencer 3 Goal I know nothing I know what it takes to get started on web applications

More information

Responsive Design. Responsive design is it important? But typical is not enough. Some typical screen sizes

Responsive Design. Responsive design is it important? But typical is not enough. Some typical screen sizes Responsive Design Responsive design is it important? For many years, screen sizes were growing Eventually, settled on fixed-width (e.g. 960px) But now with smart phones, tablets, television and many new

More information

JavaScript Introduction

JavaScript Introduction JavaScript Introduction Web Technologies I. Zsolt Tóth University of Miskolc 2016 Zsolt Tóth (UM) JavaScript Introduction 2016 1 / 31 Introduction Table of Contents 1 Introduction 2 Syntax Variables Control

More information

AIM. 10 September

AIM. 10 September AIM These two courses are aimed at introducing you to the World of Web Programming. These courses does NOT make you Master all the skills of a Web Programmer. You must learn and work MORE in this area

More information

LAST WEEK ON IO LAB. Install Firebug and Greasemonkey. Complete the online skills assessment. Join the mailing list.

LAST WEEK ON IO LAB. Install Firebug and Greasemonkey. Complete the online skills assessment. Join the mailing list. LAST WEEK ON IO LAB If you haven t done these things already, please do them before we begin today s lecture Install Firebug and Greasemonkey. Complete the online skills assessment. Join the iolab@ischool

More information

The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments.

The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments. Web Development WEB101: Web Development Fundamentals using HTML, CSS and JavaScript $2,495.00 5 Days Replay Class Recordings included with this course Upcoming Dates Course Description This 5-day instructor-led

More information

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks

More information

DATABASE SYSTEMS. Introduction to web programming. Database Systems Course, 2016

DATABASE SYSTEMS. Introduction to web programming. Database Systems Course, 2016 DATABASE SYSTEMS Introduction to web programming Database Systems Course, 2016 AGENDA FOR TODAY Client side programming HTML CSS Javascript Server side programming: PHP Installing a local web-server Basic

More information

COMS 359: Interactive Media

COMS 359: Interactive Media COMS 359: Interactive Media Agenda Review CSS Layout Preview Review Introducting CSS What is CSS? CSS Syntax Location of CSS The Cascade Box Model Box Structure Box Properties Review Style is cascading

More information

CS1046 Lab 4. Timing: This lab should take you 85 to 130 minutes. Objectives: By the end of this lab you should be able to:

CS1046 Lab 4. Timing: This lab should take you 85 to 130 minutes. Objectives: By the end of this lab you should be able to: CS1046 Lab 4 Timing: This lab should take you 85 to 130 minutes. Objectives: By the end of this lab you should be able to: Define the terms: function, calling and user-defined function and predefined function

More information

Lesson 5 Introduction to Cascading Style Sheets

Lesson 5 Introduction to Cascading Style Sheets Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition 1 Objectives Create a Cascading Style Sheet. Control hyperlink behavior with CSS. Create style classes. Share style classes

More information

Lesson 5: Multimedia on the Web

Lesson 5: Multimedia on the Web Lesson 5: Multimedia on the Web Learning Targets I can: Define objects and their relationships to multimedia Explain the fundamentals of C, C++, Java, JavaScript, JScript, C#, ActiveX and VBScript Discuss

More information

Building Responsive Websites

Building Responsive Websites Building Responsive Websites (CSCI-GA.3033-011) Robert Grimm New York University In the Beginning: Introductions 2 This Course Is Experimental! 3 I Am Teaching This Course for the First Time Built two

More information

WHAT IS WEBKIT? COPYRIGHTED MATERIAL SMASHING WEBKIT CHAPTER 1

WHAT IS WEBKIT? COPYRIGHTED MATERIAL SMASHING WEBKIT CHAPTER 1 1 WHAT IS WEBKIT? WEBKIT IS AN open-source rendering engine designed to display web pages. It powers Google Chrome and Safari as well as a variety of mobile devices such as iphone, ipad, and Android phones

More information

Syllabus - July to Sept

Syllabus - July to Sept Class IX Sub: Computer Syllabus - July to Sept What is www: The World Wide Web (www, W3) is an information space where documents and other web resources are identified by URIs, interlinked by hypertext

More information

7.2.4 on Media content; on XSS) sws2 1

7.2.4 on Media content; on XSS) sws2 1 Software and Web Security 2 Attacks on Clients (Section 7.1.3 on JavaScript; 7.2.4 on Media content; 7.2.6 on XSS) sws2 1 Last week: web server can be attacked by malicious input web browser web server

More information

1. Introduction to Programming

1. Introduction to Programming Computer Science I CS 135 1. Introduction to Programming René Doursat Department of Computer Science & Engineering University of Nevada, Reno Fall 2005 Computer Science I CS 135 0. Course Presentation

More information

JavaScript: the Big Picture

JavaScript: the Big Picture JavaScript had to look like Java only less so be Java's dumb kid brother or boy-hostage sidekick. Plus, I had to be done in ten days or something worse than JavaScript would have happened.! JavaScript:

More information

HTML + CSS. ScottyLabs WDW. Overview HTML Tags CSS Properties Resources

HTML + CSS. ScottyLabs WDW. Overview HTML Tags CSS Properties Resources HTML + CSS ScottyLabs WDW OVERVIEW What are HTML and CSS? How can I use them? WHAT ARE HTML AND CSS? HTML - HyperText Markup Language Specifies webpage content hierarchy Describes rough layout of content

More information

JavaScript CS 4640 Programming Languages for Web Applications

JavaScript CS 4640 Programming Languages for Web Applications JavaScript CS 4640 Programming Languages for Web Applications 1 How HTML, CSS, and JS Fit Together {css} javascript() Content layer The HTML gives the page structure and adds semantics Presentation

More information

PIC 40A. Midterm 1 Review

PIC 40A. Midterm 1 Review PIC 40A Midterm 1 Review XHTML and HTML5 Know the structure of an XHTML/HTML5 document (head, body) and what goes in each section. Understand meta tags and be able to give an example of a meta tags. Know

More information

B. V. Patel Institute of Business Management, Computer & Information Technology, UTU

B. V. Patel Institute of Business Management, Computer & Information Technology, UTU B. C. A (Semester I) 030010108: Introduction to Web Design Lesson Plan Objective: To provide basic understanding of web and HTML for designing web pages in conjunction with HTML tags, text, videos and

More information

Client-side Techniques. Client-side Techniques HTML/XHTML. Static web pages, Interactive web page: without depending on interaction with a server

Client-side Techniques. Client-side Techniques HTML/XHTML. Static web pages, Interactive web page: without depending on interaction with a server Client-side Techniques Client-side Techniques Static web pages, Interactive web page: without depending on interaction with a server HTML/XHTML: content Cascading Style Sheet (CSS): style and layout Script

More information

Best Practices Chapter 5

Best Practices Chapter 5 Best Practices Chapter 5 Chapter 5 CHRIS HOY 12/11/2015 COMW-283 Chapter 5 The DOM and BOM The BOM stand for the Browser Object Model, it s also the client-side of the web hierarchy. It is made up of a

More information

Princess Nourah bint Abdulrahman University. Computer Sciences Department

Princess Nourah bint Abdulrahman University. Computer Sciences Department Princess Nourah bint Abdulrahman University 1 And use http://www.w3schools.com/ JavaScript Objectives Introduction to JavaScript Objects Data Variables Operators Types Functions Events 4 Why Study JavaScript?

More information

Client-side Debugging. Gary Bettencourt

Client-side Debugging. Gary Bettencourt Client-side Debugging Gary Bettencourt Overview What is client-side debugging Tool overview Simple & Advanced techniques Debugging on Mobile devices Overview Client debugging involves more then just debugging

More information

Scientific Communication CITS4008. Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens

Scientific Communication CITS4008. Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens Scientific Communication CITS4008 Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens Proposed in 1989 by Tim Lee at CERN Mosaic released in 1993 Working group to define

More information

5. Finally, create a new Javascript file called speak.js. Leave it blank for now.

5. Finally, create a new Javascript file called speak.js. Leave it blank for now. Mobile Application and Web Design: HTML and JavaScript Project: TextToSpeech App Marist School Description: JavaScript has several libraries available that will take strings of text and render them as

More information

JavaScript is described in detail in many books on the subject, and there is excellent tutorial material at

JavaScript is described in detail in many books on the subject, and there is excellent tutorial material at JavaScript (last updated April 15, 2013: LSS) JavaScript is a scripting language, specifically for use on web pages. It runs within the browser (that is to say, it is a client- side scripting language),

More information

Header. Article. Footer

Header. Article. Footer Styling your Interface There have been various versions of HTML since its first inception. HTML 5 being the latest has benefited from being able to look back on these previous versions and make some very

More information

Programmazione Web a.a. 2017/2018 HTML5

Programmazione Web a.a. 2017/2018 HTML5 Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text

More information

Fish Eye Menu DMXzone.com Fish Eye Menu Manual

Fish Eye Menu DMXzone.com Fish Eye Menu Manual Fish Eye Menu Manual Page 1 of 33 Index Fish Eye Menu Manual... 1 Index... 2 About Fish Eye Menu... 3 Features in Detail... 4 Integrated in Dreamweaver... 6 Before you begin... 7 Installing the extension...

More information

Introduction to JavaScript p. 1 JavaScript Myths p. 2 Versions of JavaScript p. 2 Client-Side JavaScript p. 3 JavaScript in Other Contexts p.

Introduction to JavaScript p. 1 JavaScript Myths p. 2 Versions of JavaScript p. 2 Client-Side JavaScript p. 3 JavaScript in Other Contexts p. Preface p. xiii Introduction to JavaScript p. 1 JavaScript Myths p. 2 Versions of JavaScript p. 2 Client-Side JavaScript p. 3 JavaScript in Other Contexts p. 5 Client-Side JavaScript: Executable Content

More information

In the early days of the Web, designers just had the original 91 HTML tags to work with.

In the early days of the Web, designers just had the original 91 HTML tags to work with. Web Design Lesson 4 Cascading Style Sheets In the early days of the Web, designers just had the original 91 HTML tags to work with. Using HTML, they could make headings, paragraphs, and basic text formatting,

More information

Programming Lab 1 (JS Hwk 3) Due Thursday, April 28

Programming Lab 1 (JS Hwk 3) Due Thursday, April 28 Programming Lab 1 (JS Hwk 3) Due Thursday, April 28 Lab You may work with partners for these problems. Make sure you put BOTH names on the problems. Create a folder named JSLab3, and place all of the web

More information

Assessment - Unit 3 lessons 16-21

Assessment - Unit 3 lessons 16-21 Name(s) Period Date Assessment - Unit 3 lessons 16-21 1. Which of the following statements about strings in JavaScript is FALSE? a. Strings consist of a sequence of concatenated ASCII characters. b. Strings

More information

ORB Education Quality Teaching Resources

ORB Education Quality Teaching Resources JavaScript is one of the programming languages that make things happen in a web page. It is a fantastic way for students to get to grips with some of the basics of programming, whilst opening the door

More information

Manju Muralidharan Priya. CS4PM Web Aesthetics and Development WEEK 11

Manju Muralidharan Priya. CS4PM Web Aesthetics and Development WEEK 11 CS4PM Web Aesthetics and Development WEEK 11 Objective: Understand basics of JScript Outline: a. Basics of JScript Reading: Refer to w3schools websites and use the TRY IT YOURSELF editor and play with

More information

Chapter 3 - Simple JavaScript - Programming Basics. Lesson 1 - JavaScript: What is it and what does it look like?

Chapter 3 - Simple JavaScript - Programming Basics. Lesson 1 - JavaScript: What is it and what does it look like? Chapter 3 - Simple JavaScript - Programming Basics Lesson 1 - JavaScript: What is it and what does it look like? PP presentation JavaScript.ppt. Lab 3.1. Lesson 2 - JavaScript Comments, document.write(),

More information

Lecture : 3. Practical : 2. Course Credit. Tutorial : 0. Total : 5. Course Learning Outcomes

Lecture : 3. Practical : 2. Course Credit. Tutorial : 0. Total : 5. Course Learning Outcomes Course Title Course Code WEB DESIGNING TECHNOLOGIES DCE311 Lecture : 3 Course Credit Practical : Tutorial : 0 Total : 5 Course Learning Outcomes At end of the course, students will be able to: Understand

More information

HTML5 HTML & Fut ure o Web M edi dia Streami a est Work h op, ov 2010 Michael Dale Zohar Babin eve oper o Dev R l e t a i tions & C

HTML5 HTML & Fut ure o Web M edi dia Streami a est Work h op, ov 2010 Michael Dale Zohar Babin eve oper o Dev R l e t a i tions & C HTML5 &F Future of fweb bmedia Streaming Media West Workshop, Nov. 2010 Michael Dale Zohar Babin Senior Developer Head of Dev Relations & Community michael.dale@kaltura.com zohar.babin@kaltura.com @michael_dale

More information

Introduction to HTML & CSS. Instructor: Beck Johnson Week 2

Introduction to HTML & CSS. Instructor: Beck Johnson Week 2 Introduction to HTML & CSS Instructor: Beck Johnson Week 2 today Week One review and questions File organization CSS Box Model: margin and padding Background images and gradients with CSS Make a hero banner!

More information

Web Development & Design Foundations with HTML5, 8 th Edition Instructor Materials Chapter 14 Test Bank

Web Development & Design Foundations with HTML5, 8 th Edition Instructor Materials Chapter 14 Test Bank Multiple Choice. Choose the best answer. 1. JavaScript can be described as: a. an object-oriented scripting language b. an easy form of Java c. a language created by Microsoft 2. Select the true statement

More information

ACA Dreamweaver Exam Notes

ACA Dreamweaver Exam Notes ACA Dreamweaver Exam Notes Remember when you need to copy and paste the text you have to open up that actual text file itself and the need to go to edit> select all>, edit> copy>, then go back to the html

More information

Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5

Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5 Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5 Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Set and modify document

More information

Web Application Security

Web Application Security Web Application Security Rajendra Kachhwaha rajendra1983@gmail.com September 23, 2015 Lecture 13: 1/ 18 Outline Introduction to AJAX: 1 What is AJAX 2 Why & When use AJAX 3 What is an AJAX Web Application

More information

Controlled Assessment Task. Question 1 - Describe how this HTML code produces the form displayed in the browser.

Controlled Assessment Task. Question 1 - Describe how this HTML code produces the form displayed in the browser. Controlled Assessment Task Question 1 - Describe how this HTML code produces the form displayed in the browser. The form s code is displayed in the tags; this creates the object which is the visible

More information

Introduction to JavaScript and the Web

Introduction to JavaScript and the Web 1 Introduction to JavaScript and the Web In this introductory chapter, you look at what JavaScript is, what it can do for you, and what you need in order to use it. With these foundations in place, you

More information