Javascript Students Guide
Student #2: You have taken other JavaScript courses but: 1) still don't really understand JavaScript, or 2) still don't feel confident to code real-world apps. Jive Software Version: 2018.7.0.1_jx, revision: 0645.7fbf90c.release_18.7.0-jx.
With the basics out of the way, we'll now focus on object-oriented JavaScript (OOJS) — this article presents a basic view of object-oriented programming (OOP) theory, then explores how JavaScript emulates object classes via constructor functions, and how to create object instances. Prerequisites: Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see and ) and OOJS basics (see ).
Objective: To understand the basic theory behind object-oriented programming, how this relates to JavaScript ('everything is an object'), and how to create constructors and object instances. Object-oriented programming — the basics To start with, let's give you a simplistic, high-level view of what Object-oriented programming (OOP) is. We say simplistic, because OOP can quickly get very complicated, and giving it a full treatment now would probably confuse more than help.
The basic idea of OOP is that we use objects to model real world things that we want to represent inside our programs, and/or provide a simple way to access functionality that would otherwise be hard or impossible to make use of. Objects can contain related data and code, which represent information about the thing you are trying to model, and functionality or behavior that you want it to have. Object data (and often, functions too) can be stored neatly (the official word is encapsulated) inside an object package (which can be given a specific name to refer to, which is sometimes called a namespace), making it easy to structure and access; objects are also commonly used as data stores that can be easily sent across the network. Defining an object template Let's consider a simple program that displays information about the students and teachers at a school. Here we'll look at OOP theory in general, not in the context of any specific programming language. To start this off, we could return to our Person object type from our, which defines the generic data and functionality of a person. There are lots of things you could know about a person (their address, height, shoe size, DNA profile, passport number, significant personality traits.), but in this case we are only interested in showing their name, age, gender, and interests, and we also want to be able to write a short introduction about them based on this data, and get them to say hello.
This is known as abstraction — creating a simple model of a more complex thing, which represents its most important aspects in a way that is easy to work with for our program's purposes. Creating actual objects From our class, we can create object instances — objects that contain the data and functionality defined in the class.
From our Person class, we can now create some actual people: When an object instance is created from a class, the class's constructor function is run to create it. This process of creating an object instance from a class is called instantiation — the object instance is instantiated from the class. Specialist classes In this case we don't want generic people — we want teachers and students, which are both more specific types of people. In OOP, we can create new classes based on other classes — these new child classes can be made to inherit the data and code features of their parent class, so you can reuse functionality common to all the object types rather than having to duplicate it. Where functionality differs between classes, you can define specialized features directly on them as needed. This is really useful — teachers and students share many common features such as name, gender, and age, so it is convenient to only have to define those features once.
You can also define the same feature separately in different classes, as each definition of that feature will be in a different namespace. For example, a student's greeting might be of the form 'Yo, I'm firstName' (e.g Yo, I'm Sam), whereas a teacher might use something more formal, such as 'Hello, my name is Prefix lastName, and I teach Subject.' (e.g Hello, My name is Mr Griffiths, and I teach Chemistry).
Note: If you are having trouble getting this to work, try comparing your code against our version — see (also ). Further exercises To start with, try adding a couple more object creation lines of your own, and try getting and setting the members of the resulting object instances.
In addition, there are a couple of problems with our bio method — the output always includes the pronoun 'He', even if your person is female, or some other preferred gender classification. And the bio will only include two interests, even if more are listed in the interests array. Can you work out how to fix this in the class definition (constructor)? You can put any code you like inside a constructor (you'll probably need a few conditionals and a loop).
Think about how the sentences should be structured differently depending on gender, and depending on whether the number of listed interests is 1, 2, or more than 2.
Overview This course gives an overview of JavaScript and programming generally. It does not cover libraries like jQuery or the DOM. Class Schedule The course is divided into 3 lessons in 2 days (12 hours of in-class instruction).
Prerequisites The students should have some familiarity with HTML/CSS (classes/ids). They do not need prior programming experience. Materials Each lesson includes:. Slides: An HTML5-based slideset ( not a PowerPoint) which actually embeds the actual HTML tags being described in order to better demonstrate them. In-class example: An example of what the teacher should build up during the course of the lesson, switching between talking over the slides and demonstrating the concepts in the example page. Exercise(s): These can be started in class and then continued outside of it, and the teacher can decide when to reveal the solution for the exercises.
For the most part, the solution to an exercise serves as the starting point for the next exercise. Take-home assignment and solution: A take-home assignment that incorporates many of the concepts from the class, along with a solution. We recommend an additional study group for the students to review their solutions.
Additional Reading: Links that teachers can recommend students read after a lesson. Related Resources: Slides or tutorials that were useful in the creation of the lesson content.
Teachers can visit these to get an idea of how other people present the content. Room for Improvement: A list of ways that the particular lesson might be improved. Make testing your code easier by loading javascript to an HTML page. For this course, I recommend having the students use for the first two lessons, for easy JS debugging. That's also useful for in-class examples. Related Resources The content for the slides was based on consultation with a number of fantastic online resources, including the and. Those are recommended reading for teachers of this course.
Javascript Style Guide
It was also inspired by these JS slidesets:, and. History This course was given by in May, 2012 as part of in San Francisco, California.
Javascript Guide Pdf
More recently, this has been taught and updated by Brenda Jin, Bianca Gandolfo, and Claire Bendersky. If you are using this material and have questions/comments, feel free to leave them here or on the individual lesson pages.