Introduction

Variables and Values

Flow Control

Functions and Modularity

Arrays

Introduction to Programming Andrew Butterfield Department of Computer Science School of Computer Science and Statistics Trinity College, Dublin

January 7th, 2008

Object-Oriented Programming

Introduction

Variables and Values

Flow Control

Functions and Modularity

Arrays

Object-Oriented Programming

Submitting the First Project

Email your program (HTML file containing your javascript) to [email protected], Subject: MM101 Project 1 The file should be called username-proj1.html where username is your TCD username. The file should have a tag with your name and the words “Project 1”. The email will only be replied to if there is a problem with it.

Lodge a signed hardcopy printout of your source-code in the Comp Science Secretaries office by the deadline. print from your text editor, not the browser The hardcopy version should match the emailed file exactly. The hardcopy submission is the “official” coursework submission.

Introduction

Variables and Values

Flow Control

Functions and Modularity

Arrays

Object-Oriented Programming

Function Libraries (I) Javascript allows you to place function definitions and other code in separate files. Instead of including the code directly in the HTML document you can refer to the file in the tag: someFunction(); anotherFunction("important information") Note that the first tag, mentioning the external file, must occur separately as shown. This allows you to: 1 Keep the JavaScript source code separate from the HTML source, which is easier to work with 2 Re-use collections of function definitions in different programs without having to cut & paste them

Introduction

Variables and Values

Flow Control

Functions and Modularity

Arrays

Object-Oriented Programming

Function Libraries (II) In the file “myFuncs.js”, there should be no enclosing and tags function someFunction () { ... whatever ... } function anothereFunction (info) { if(info == "?") { ... help ... } else { ... do summat .. } }

Introduction

Variables and Values

Flow Control

Functions and Modularity

Arrays

Object-Oriented Programming

Object Oriented Programming

Object-Oriented programming is a software development method where programs are modelled as collections of communicating objects. Some popular Object-Oriented (“OO”) languages include Java, C++, Python. JavaScript also supports this style of programming. This definition raises more questions than it answers: What is an object? In programming, it refers to a single entity in the program which contains a bundle of values and functions, and is used to represent something. How do they communicate? By “message passing”. Each object has a collection of messages it understands. Receiving one of these messages will invoke some behaviour.

Introduction

Variables and Values

Flow Control

Functions and Modularity

Arrays

Object-Oriented Programming

We have already seen some objects: Strings. In JavaScript strings are represented as objects. The values in the objects include the letters stored in the strings. The messages understood by each string object include “calculate a new string based on part of yourself” (substring), and “tell me how many characters you store” (length). HTML Documents. The document variable in JavaScript is actually a complex object which stores the data in the web page; among the messages documents understand are “add some more HTML” (write). Message passing in JavaScript is as simple as function calls. If you have an object, such as an HTML document, you can sent it a message by writing the name of the object and a dot: document.write("more text"); If the message takes parameters you supply them, just like function arguments.

Introduction

Variables and Values

Flow Control

Functions and Modularity

Arrays

Object-Oriented Programming

Creating objects We can create new objects using the new keyword, along with a special “Constructor function”. For example: function Dog(){ this.breed = ""; this.name = ""; this.legs = 4; } var d1 = new Dog(); d1.breed = "labrador"; d1.name = "patches"; var d2 = new Dog(); d2.breed = "corgi"; d2.name = "lucky"; d2.legs = 3; Note the use of the special variable this to create values in the new object that the constructor is creating.

Introduction

Variables and Values

Flow Control

Functions and Modularity

Arrays

Object-Oriented Programming

Messages We can add the ability to understand messages by incorporating methods: function Dog_bark(){ document.write("Woof!"); } function Dog(){ // as before this.bark = Dog_bark; } var d1 = new Dog(); d1.bark(); Notice that we only use the function brackets – () – when we are invoking the method (“sending a message”); otherwise we use only the name of the function.