1 / 10

77103 Programming for Interactive Media

Understand and apply JavaScript for web interactivity. Learn basic concepts, coding examples, and DOM manipulation techniques. Enhance your websites with JS functionalities and avoid cut-and-paste mentality. Recommended reading and online resources provided.

cmoore
Download Presentation

77103 Programming for Interactive Media

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 77103 Programming for Interactive Media Lectorial 2.02abc – First Contact after this session, you should be able to avoid the cut-and-paste mentality  add simple Javascript to a website confidently explore what Javascript can offer you references - please do some further reading later book : "DOM Scripting" : Jeremy Keith (2005) online tutorials and documentation at http://domscripting.com http://www.w3schools.com/js http://www.w3schools.com/jsref Paul Warren - pim 2.02abc

  2. What is Javascript ? • Javascript (aka JS, or ActiveScript, or ECMAScript) is a powerful modern programming language • designed to enhance the capabilities of a web page • the script writer (you) can specify how the page reacts to various events • mouse actions • timers • faults and errors • inputs and other data • your reaction usually takes the form of changing part of the HTML on the current web page • today we will cover just a few basic examples • read up further as you become confident • not related to the Java programming language Paul Warren - pim 2.02abc

  3. How does JS run ? user browses toweb document HTML docloads up stylesheets& rendering wait for event JS main programis executed onclickonmouseoverondblclickonkeypress executerelevantfunction Paul Warren - pim 2.02abc

  4. 1st example : "Hello World" • we often introduce programming by showing you the simplest possible program • the program uses JavaScript to print "Hello World!" on a webpage that would otherwise otherwise be totally blank • we need : • a blank html file helloworld.htm • a javascript file helloworld.js • a <script> tag linking to the javascript file • see separate handouts • the javascript program adds some extra text to the document by modifying the Document Object Model (DOM) of the webpage document.body.innerHTML = "Hello, World!"; • this changes the contents of the <body> tag of the document • it's called an assignmentstatement (basically, a copy command) • the browser window contents change accordingly Paul Warren - pim 2.02abc

  5. about variables • a variable is an area of the computer's RAM that is used to hold a piece of data, and which can be varied (changed) (obviously !) • variables can hold things like names, numbers, dates, etc. • think of it like a box with something in it (possibly empty) • example: price = 3.75; vat = price * 0.15; total = price + vat; • if you change a variable, its previous contents are discarded • all the parts of your web document are also held in variables • examples: document document.body document.body.innerHTML • if you give an id to a tag, it can be used as a variable • tag: <img id="pic1" src="coffee.jpg" /> • variable name: document.getElementById("pic1") Paul Warren - pim 2.02abc

  6. the Document Object Model html body head ul title h1 img meta p li li li Paul Warren - pim 2.02abc

  7. using JS to change the DOM • once we have a tag with an id, we can change any part of the tag • original HTML:<img id="pic1" src="coffee.jpg" /> • variable name:document.getElementById("pic1").src = "tea.jpg"; • HTML changes to:<img id="pic1" src="tea.jpg" /> • Your turn: • write a paragraph tag with an id and some text • write a JS statement to replace the text with an img tag Paul Warren - pim 2.02abc

  8. 2nd example : form information • information entered into a form by the user can be accessed in JS • the HTML: <form onsubmit="greet();"> Please enter your name: <input type="text" id="box"></input> </form> • the javascript: function greet() { name = document.getElementById("box").value; document.body.innerHTML += "Hi, " + name + ", Welcome!"; } • the JS greet function is called when the onsubmit event triggers Paul Warren - pim 2.02abc

  9. Exercises • For all today's activities, please work with your "pair partner" • coding exercise: • write an HTML/JS combination that asks for the user's weight • input the weight in two boxes: stones and pounds • work out what you have to do to convert the weight into a total number of pounds, and from there into kilograms • display the user's weight in kilograms, with a cheery message • there are 14 pounds in 1 stone • there are 2.2 pounds in 1 kilogram • algorithm exercise: • develop an algorithm for turning to a page number in a book as efficiently as possible. The number of steps is more important than the time taken to find the page. Paul Warren - pim 2.02abc

  10. final notes • Javascript (JS) is a powerful programming language • JS is the "behaviour" part of the Web trinity • alongside HTML and CSS • Web standards are recommended • try to keep your JS in a separate file • always consider users who have no JS capabilities • JS is best written in an event-action form • many useful consequences • e.g. makes it easier to provide separate webpages for different languages, using the same JS program • your marks in this course will depend on you writing program code which is : • well-designed (as simple as possible) • working correctly • tidy and readable Paul Warren - pim 2.02abc

More Related