CS 142 Lecture Notes: FormsSlide 1 Draggable Rectangle #div1 { position: absolute; }... <div id="div1" onmousedown="mouseDown(event);" onmousemove="mouseMove(event);"

Slides:

Advertisements

Similar presentations

The Important Thing About By. The Important Thing About ******** The important thing about ***** is *****. It is true s/he can *****, *****, and *****.

Advertisements

CS 142 Lecture Notes: EventsSlide 1 Access to Event Object ● event variable (HTML): ● Passed as argument to function (DOM/Firefox): element.onclick = mouseClick;

CS 142 Lecture Notes: FormsSlide 1 Simple Form Product: Price:

CS 142 Lecture Notes: FormsSlide 1 Simple Form Product: Price:

FUNDAMENTALS OF PROGRAMMING SM1204 Semester A 2011.

Analytical Methods in CS (CIS 505)

 x (x 2  0) 1. True2. False.  x (3x + 2 = 12) 1. True2. False.

CS 142 Lecture Notes: JavascriptSlide 1 Simple Javascript Example sum = 0; for (i = 1; i < 10; i++) { sum += i*i; }

CS 142 Lecture Notes: FormsSlide 1 AJAX Basics xhr = new XMLHttpRequest(); xhr.onreadystatechange = xhrHandler(); xhr.open("POST", url); xhr.send(postData);...

Generalized De Morgan’s Theorem Lecture L5.4 Section 5.1.

JQuery CS 268. What is jQuery? From their web site:

FUNDAMENTALS OF PROGRAMMING SM1204 SEMESTER A 2012.

JavaScript Lecture 6 Rachel A Ober

Processing Lecture.2 Mouse and Keyboard

PAGES:51-59 SECTION: CONTROL1 : DECISIONS Decisions.

Objectives: 1.Graph (and write) inequalities on a number line. 2.Solve and graph one-variable inequalities. (Linear) 3.Solve and graph compound inequalities.

CS 174: Web Programming October 7 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak

Right-click to Rename each sprite Name them: Player Monster Bullet Explosion.

CS 142 Lecture Notes: EventsSlide 1 Access to Event Object ● event variable (HTML): ● Passed as argument to function (DOM/Firefox): element.onclick = mouseClick;

1 Georgia Tech, IIC, GVU, 2006 MAGIC Lab Rossignac Lecture 02b: Tutorial for Programming in Processing Jarek Rossignac.

CIS 3.5 Lecture 2.2 More programming with "Processing"

Dialog boxes in JavaScript Events in JavaScript – What are they – “Which events are there?” – “How do I register event handlers to an HTML element?” –

Mouse Inputs in Processing. Interacting with the Mouse mouseX and mouseY: pg mouseXmouseY –The position of the mouse in the canvas pmouseX and.

Test 2 Review. General Info. All tests are comprehensive. You are still responsible for the material covered prior to the first exam. You will be tested.

Basic Definitions of Set Theory Lecture 24 Section 5.1 Fri, Mar 2, 2007.

A: A: double “4” A: “34” 4.

1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.

Events Event Handling in JavaScript SoftUni Team Technical Trainers Software University

Events CS The keyword this  all JavaScript code actually runs inside of an object  by default, code runs inside the global window object  all.

Processing Variables. Variables Processing gives us several variables to play with These variables are always being updated and you can assume they have.

Lab 5: More on Events and Introduction to the Canvas Tag User Interface Lab: GUI Lab Sep. 23 rd, 2013.

CS 142 Lecture Notes: JavascriptSlide 1 Simple Javascript Example sum = 0; for (i = 1; i < 10; i++) { sum += i*i; }

CS 142 Lecture Notes: JavascriptSlide 1 Simple Javascript Example sum = 0; for (i = 1; i < 10; i++) { sum += i*i; }

CS 270 Lecture 1 In Class Problems. Q1: Logic Puzzle You arrive at the end of a long hallway. There are two knights guarding two doors. One knight always.

CSE 154 LECTURE 10: MORE EVENTS. Problems with reading/changing styles Click Me HTML window.onload = function() { document.getElementById("clickme").onclick.

Here are a 4cm by 6cm rectangle, a 12cm by 2 cm rectangle, and a 3cm by 8cm rectangle. What’s the same? What’s different? What’s the same, what’s different?

Special Triangles Review

Simple Javascript Example

Tips Need to Consider When Organizing a College Event

CS 142 Lecture Notes: Events

[0] [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13]

Review Operation Bingo

CS 142 Lecture Notes: Events

Event Driven Programming & User Defined Functions

ماجستير إدارة المعارض من بريطانيا

Click on the number that makes me equal a hundred

CS 142 Lecture Notes: Cookies

Name Not Precise Enough

Simple Javascript Example

Extend Text Editor to Draw shapes

Introduction to Predicates and Quantified Statements II

Standard Normal Probabilities

Progress <progress value="22" max="100"></progress>

Simple Javascript Example

Simple Canvas Example Your browser doesn’t support canvases var canvas = document.getElementById("canvas1"); var context.

CSc 337 Lecture 21: Canvas.

CS 140 Lecture Notes: Introduction

BIT116: Scripting Functions.

CS 140 Lecture Notes: Introduction

CLICK TO START.

Compiler Construction

CLICK TO START.

Chapter 2 Sets Active Learning Lecture Slides

JavaScript Event Handling For Interaction and Casual Games

CSc 337 Lecture 19: Canvas.

Starter What’s the same and what’s different?

Call Now : Click : -

Call Now : Click : -

Call Now : Click : -

Presentation transcript:

CS 142 Lecture Notes: FormsSlide 1 Draggable Rectangle #div1 { position: absolute; }... <div id="div1" onmousedown="mouseDown(event);" onmousemove="mouseMove(event);" onmouseup="mouseUp(event);">Drag Me!

CS 142 Lecture Notes: FormsSlide 2 Event Handlers isMouseDown = false; function mouseDown(event) { mouseX = event.clientX; mouseY = event.clientY; isMouseDown = true; } function mouseMove(event) { if (!isMouseDown) { return; } element = document.getElementById("div1"); element.style.left = (element.offsetLeft + (event.clientX - mouseX)) + "px"; element.style.top = (element.offsetTop + (event.clientY - mouseY)) + "px"; mouseX = event.clientX; mouseY = event.clientY; } function mouseUp(event) { isMouseDown = false; }

CS 142 Lecture Notes: FormsSlide 3 Which Element Gets Event? xyz Click on this

CS 142 Lecture Notes: FormsSlide 4