JS project start
This commit is contained in:
@@ -0,0 +1,79 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Classes</title>
|
||||
<script language="JavaScript" type="text/JavaScript">
|
||||
// create the "base" class
|
||||
class Book {
|
||||
// define the constructor function for Book
|
||||
// notice the use of ._propertyName
|
||||
constructor(title, author, pubdate) {
|
||||
this._title = title;
|
||||
this._author = author;
|
||||
this._pubdate = pubdate;
|
||||
}
|
||||
// create a method
|
||||
// this is much easier to do with ES6
|
||||
getBook() {
|
||||
return this._author + " published " + this._title + " in " + this._pubdate;
|
||||
}
|
||||
}
|
||||
|
||||
// create a new class that extends the base class book
|
||||
class TypedBook extends Book {
|
||||
// define the constructor function for TypeBook
|
||||
// include a reference to the "base" class Book
|
||||
// to call that constructor function as well...
|
||||
// this done using "super([parameter set for the base class])
|
||||
constructor(title, author, pubdate, type) {
|
||||
super(title, author, pubdate);
|
||||
this._type = type;
|
||||
}
|
||||
|
||||
// this method overrides the getBook() found in the base class
|
||||
// but allows us to call the Book version with super.getBook()
|
||||
getBook() {
|
||||
return super.getBook() + " - category: " + this._type;
|
||||
}
|
||||
|
||||
// we can use an ES6 getter to retrieve the type
|
||||
get type() {
|
||||
return this._type;
|
||||
}
|
||||
|
||||
// ... and an ES6 setter to set a new value for type
|
||||
set type(newType) {
|
||||
if (newType) {
|
||||
this._type = newType;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// create a Book object
|
||||
var bookB = new Book("The Greatest Show on Earth", "Richard Dawkins", 2009);
|
||||
|
||||
// call the Book getBook method
|
||||
console.log(bookB.getBook());
|
||||
|
||||
// create a TypedBook object
|
||||
var bookT = new TypedBook("Thank You for Being Late", "Thomas Friedman", 2016, "politics");
|
||||
|
||||
// call the TypedBook getBook method
|
||||
console.log(bookT.getBook());
|
||||
|
||||
// when we retrieve a property using an ES6 getter,
|
||||
// we just write objectName.propertyName and the getter
|
||||
// will be invoked under the hood
|
||||
console.log(bookT.type);
|
||||
|
||||
// similarly, when we update a property using an ES6 setter,
|
||||
// we also assign the new value to objectName.propertyName and
|
||||
// the setter will be invoked "under the hood"
|
||||
bookT.type = "political science";
|
||||
console.log(bookT.type);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Classes</title>
|
||||
<script language="JavaScript" type="text/JavaScript">
|
||||
// create the "base" class
|
||||
class Book {
|
||||
// define the constructor function for Book
|
||||
// notice the use of ._propertyName
|
||||
constructor(title, author, pubdate) {
|
||||
this._title = title;
|
||||
this._author = author;
|
||||
this._pubdate = pubdate;
|
||||
}
|
||||
// create a method
|
||||
// this is much easier to do with ES6
|
||||
getBook() {
|
||||
return this._author + " published " + this._title + " in " + this._pubdate;
|
||||
}
|
||||
}
|
||||
|
||||
// create a new class that extends the base class book
|
||||
class TypedBook extends Book {
|
||||
// define the constructor function for TypeBook
|
||||
// include a reference to the "base" class Book
|
||||
// to call that constructor function as well...
|
||||
// this done using "super([parameter set for the base class])
|
||||
constructor(title, author, pubdate, type) {
|
||||
super(title, author, pubdate);
|
||||
this._type = type;
|
||||
}
|
||||
|
||||
// this method overrides the getBook() found in the base class
|
||||
// but allows us to call the Book version with super.getBook()
|
||||
getBook() {
|
||||
return super.getBook() + " - category: " + this._type;
|
||||
}
|
||||
|
||||
// we can use an ES6 getter to retrieve the type
|
||||
get type() {
|
||||
return this._type;
|
||||
}
|
||||
|
||||
// ... and an ES6 setter to set a new value for type
|
||||
set type(newType) {
|
||||
if (newType) {
|
||||
this._type = newType;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// create a new class that extends the base class book
|
||||
// very similar to the TypedBook class but with version instead
|
||||
class VersionBook extends Book {
|
||||
constructor(title, author, pubdate, version) {
|
||||
super(title, author, pubdate);
|
||||
this._version = version;
|
||||
}
|
||||
|
||||
getBook() {
|
||||
return super.getBook() + " - version: " + this._version;
|
||||
}
|
||||
|
||||
get version() {
|
||||
return this._version;
|
||||
}
|
||||
}
|
||||
|
||||
// create a new class that extends VersionBook
|
||||
// this creates a 3 level hierarchy because VersionBook
|
||||
// extends book
|
||||
class VersionTypedBook extends TypedBook {
|
||||
constructor(title, author, pubdate, typed, version) {
|
||||
// super in this case will be the VersionBook constructor
|
||||
super(title, author, pubdate, typed);
|
||||
this._version = version;
|
||||
}
|
||||
|
||||
getBook() {
|
||||
return super.getBook() + " - version: " + this._version;
|
||||
}
|
||||
|
||||
get version() {
|
||||
return this._version;
|
||||
}
|
||||
}
|
||||
|
||||
// create a TypedBook object
|
||||
var bookT = new TypedBook("Thank You for Being Late", "Thomas Friedman", 2016, "politics");
|
||||
|
||||
// create a version book
|
||||
var bookV = new VersionBook("Thank You for Being Late", "Thomas Friedman", 2016, "hardcover");
|
||||
|
||||
// create a version typed book
|
||||
var bookVT = new VersionTypedBook("Thank You for Being Late", "Thomas Friedman", 2016, "politics", "hardcover");
|
||||
console.log(bookVT.getBook());
|
||||
|
||||
// call the TypedBook getBook method
|
||||
//console.log(bookB.getBook());
|
||||
|
||||
// when we retrieve a property using an ES6 getter,
|
||||
// we just write objectName.propertyName and the getter
|
||||
// will be invoked under the hood
|
||||
console.log(bookT.type);
|
||||
|
||||
// similarly, when we update a property using an ES6 setter,
|
||||
// we also assign the new value to objectName.propertyName and
|
||||
// the setter will be invoked under the hood
|
||||
bookT.type = "political science";
|
||||
console.log(bookT.type);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Collections</title>
|
||||
<script language="JavaScript" type="text/JavaScript">
|
||||
// create a Set (collection) type
|
||||
var collect1 = new Set();
|
||||
|
||||
// add 2 values to the collection
|
||||
collect1.add("apple");
|
||||
collect1.add("oranges");
|
||||
|
||||
// return the number of members in the collection
|
||||
console.log(collect1.size); // 2
|
||||
|
||||
// add a new member and then try to add it again
|
||||
collect1.add("banana");
|
||||
collect1.add("banana"); // ignored
|
||||
|
||||
// get the collection size again
|
||||
console.log(collect1.size); // 3
|
||||
|
||||
// remove (delete) a member
|
||||
collect1.delete("banana");
|
||||
|
||||
// get the size again
|
||||
console.log(collect1.size); // 2
|
||||
|
||||
// determine if particular values are members or not
|
||||
console.log(collect1.has("banana")); // false
|
||||
console.log(collect1.has("apple")); // true
|
||||
|
||||
// the forEach() method calls a provided function once for each element in a collection, in order.
|
||||
// using anonymous function
|
||||
collect1.forEach(function(value) {
|
||||
console.log(value);
|
||||
});
|
||||
|
||||
// using a declared function
|
||||
collect1.forEach(loopFor);
|
||||
|
||||
function loopFor(value) {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
// convert the collection to an array
|
||||
var arr = [...collect1]; // spread syntax
|
||||
console.log(arr[1]); // oranges
|
||||
|
||||
// create a new set (collection) from an array literal
|
||||
var collect2 = new Set(['one','two','three']);
|
||||
|
||||
// get the size of the new collection
|
||||
console.log(collect2.size); // 3
|
||||
|
||||
// same as above but with an array variable
|
||||
var arr2 = ['test','again'];
|
||||
var collect3 = new Set(arr2);
|
||||
console.log(collect3.size); // 2
|
||||
|
||||
// remove all members from the set collection
|
||||
collect1.clear();
|
||||
console.log(collect1.size); // 0
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Maps</title>
|
||||
<script language="JavaScript" type="text/JavaScript">
|
||||
// create a new map
|
||||
var map1 = new Map();
|
||||
|
||||
// add a string key and a value
|
||||
map1.set("value1", "this is value");
|
||||
|
||||
// add a numeric key and a value
|
||||
map1.set(3, "another value");
|
||||
|
||||
// hard to believe but NaN can be a key name
|
||||
map1.set(NaN, "this is allowed");
|
||||
|
||||
// an object such as window can also be a key name
|
||||
map1.set(window, "also allowed");
|
||||
|
||||
// retrieve the number of entries
|
||||
console.log(map1.size);
|
||||
|
||||
// retrieve values by key
|
||||
console.log(map1.get("value1"));
|
||||
console.log(map1.get(NaN));
|
||||
console.log(map1.get(3));
|
||||
console.log(map1.get(window));
|
||||
|
||||
// iterate the map by key value pairs
|
||||
// uses the for..var (or let).. of.. syntax
|
||||
for (var [key, value] of map1) {
|
||||
console.log(key + " = " + value);
|
||||
}
|
||||
|
||||
// iterating through keys
|
||||
for (var key of map1.keys()) {
|
||||
console.log(key);
|
||||
}
|
||||
|
||||
// iterating through values
|
||||
for (var value of map1.values()) {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
//call the anonymous function once for each value in the map
|
||||
map1.forEach(function(value) {
|
||||
console.log(value);
|
||||
});
|
||||
|
||||
// define an iterator for the keys
|
||||
var mapIter = map1.keys();
|
||||
|
||||
// use the next() method to retrieve the next value
|
||||
console.log(mapIter.next().value);
|
||||
console.log(mapIter.next().value);
|
||||
console.log(mapIter.next().value);
|
||||
|
||||
// create a couple of object literals
|
||||
var b = {first: 'apple', second: 'pear'};
|
||||
var c = {first: '5', second: '1'};
|
||||
|
||||
// create a numeric array literal
|
||||
var d = [1,2,3,4];
|
||||
|
||||
// create an object alias
|
||||
var e = b;
|
||||
|
||||
e.third = "grape";
|
||||
|
||||
// redefine map1 as a new map
|
||||
var map1 = new Map();
|
||||
|
||||
// add keys and values using the b, c, d declarations as values
|
||||
map1.set('first', b);
|
||||
map1.set('second', c);
|
||||
map1.set('array', d);
|
||||
|
||||
// retrieve the entries
|
||||
console.log(map1.get("array"));
|
||||
console.log(map1.get("first"));
|
||||
console.log(map1.get("second"));
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,118 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Shapes</title>
|
||||
<script language="JavaScript" type="text/JavaScript">
|
||||
// set the size of the canvas
|
||||
// we'll use block scope variable declarations throughout
|
||||
const maxWidth = 500;
|
||||
const maxHeight = 500;
|
||||
|
||||
// declare the base class (most generic class)
|
||||
// Shape has a string "id", a fill style string
|
||||
// and x, y coordinates
|
||||
class Shape {
|
||||
//constructor declares property set
|
||||
constructor(id, fillStyle, x, y) {
|
||||
this._id = id;
|
||||
this._fillStyle = fillStyle;
|
||||
this._x = x;
|
||||
this._y = y;
|
||||
}
|
||||
// create native getters for the x, y coordinates
|
||||
// and the fill style
|
||||
get id(){
|
||||
return this._id;
|
||||
}
|
||||
get fillStyle(){
|
||||
return this._fillStyle;
|
||||
}
|
||||
get x(){
|
||||
return this._x;
|
||||
}
|
||||
get y() {
|
||||
return this._y;
|
||||
}
|
||||
get style() {
|
||||
return this._fillStyle;
|
||||
}
|
||||
}
|
||||
|
||||
// declare the first extended class
|
||||
// Rectangle is a specific kind of Shape with width and height
|
||||
class Rectangle extends Shape {
|
||||
// constructor declares all properties, including the
|
||||
// super class (Shape) properties
|
||||
constructor (id, fillStyle, x, y, width, height) {
|
||||
super(id, fillStyle, x, y);
|
||||
this._width = width;
|
||||
this._height = height;
|
||||
|
||||
}
|
||||
// create native getters and setters for the
|
||||
// width and height
|
||||
set width(width){
|
||||
this._width = width;
|
||||
}
|
||||
|
||||
get width(){
|
||||
return this._width;
|
||||
}
|
||||
|
||||
set height(height){
|
||||
this._height = height;
|
||||
}
|
||||
|
||||
get height(){
|
||||
return this._height;
|
||||
}
|
||||
// log the properties for this shape (rectangle)
|
||||
render(){
|
||||
console.log(super.id);
|
||||
console.log(super.fillStyle, super.x, super.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
// declare the second extended class
|
||||
// Circle is a specific kind of Shape with x, y centre point and radius
|
||||
class Circle extends Shape {
|
||||
constructor (id, fillStyle, x, y, radius) {
|
||||
super(id, fillStyle, x, y)
|
||||
this._radius = radius;
|
||||
}
|
||||
// native setter and getter for the radius property
|
||||
set radius(radius){
|
||||
this._radius = radius;
|
||||
}
|
||||
|
||||
get radius(){
|
||||
return this._radius;
|
||||
}
|
||||
// define the render method specifically for this shape (circle)
|
||||
render(){
|
||||
console.log(super.id);
|
||||
console.log(super.fillStyle, super.x, super.y, this.radius);
|
||||
}
|
||||
}
|
||||
|
||||
function startMeUp() {
|
||||
// create a rectangle object
|
||||
let r1 = new Rectangle("r1", "#ff0000", 10, 10, 50, 50);
|
||||
r1.render();
|
||||
|
||||
// change the width and height and re-render
|
||||
r1.width = 100;
|
||||
r1.height = 100;
|
||||
r1.render();
|
||||
|
||||
// create a circle
|
||||
let c1 = new Circle("c1", "rgba(0,0,255,0.5)", 200, 200, 50);
|
||||
c1.render();
|
||||
|
||||
// change the radius and re-render
|
||||
c1.radius = 100;
|
||||
c1.render();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="startMeUp();">
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,128 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 2d Shapes and Drawing</title>
|
||||
<script language="JavaScript" type="text/JavaScript">
|
||||
// set the size of the canvas
|
||||
// we'll use block scope variable declarations throughout
|
||||
const maxWidth = 500;
|
||||
const maxHeight = 500;
|
||||
|
||||
// declare the base class (most generic class)
|
||||
// Shape has a string "id", a fill style string
|
||||
// and x, y coordinates
|
||||
class Shape {
|
||||
//constructor declares property set
|
||||
constructor(id, fillStyle, x, y) {
|
||||
this._id = id;
|
||||
this._fillStyle = fillStyle;
|
||||
this._x = x;
|
||||
this._y = y;
|
||||
}
|
||||
// create native getters for the x, y coordinates
|
||||
// and the fill style
|
||||
get id(){
|
||||
return this._id;
|
||||
}
|
||||
get fillStyle(){
|
||||
return this._fillStyle;
|
||||
}
|
||||
get x(){
|
||||
return this._x;
|
||||
}
|
||||
get y() {
|
||||
return this._y;
|
||||
}
|
||||
get style() {
|
||||
return this._fillStyle;
|
||||
}
|
||||
}
|
||||
|
||||
// declare the first extended class
|
||||
// Rectangle is a specific kind of Shape with width and height
|
||||
class Rectangle extends Shape {
|
||||
// constructor declares all properties, including the
|
||||
// super class (Shape) properties
|
||||
constructor (id, fillStyle, x, y, width, height) {
|
||||
super(id, fillStyle, x, y);
|
||||
this._width = width;
|
||||
this._height = height;
|
||||
|
||||
}
|
||||
// create native getters and setters for the
|
||||
// width and height
|
||||
set width(width){
|
||||
this._width = width;
|
||||
}
|
||||
|
||||
get width(){
|
||||
return this._width;
|
||||
}
|
||||
|
||||
set height(height){
|
||||
this._height = height;
|
||||
}
|
||||
|
||||
get height(){
|
||||
return this._height;
|
||||
}
|
||||
// define the render method specifically for this shape (rectangle)
|
||||
render(context){
|
||||
context.fillStyle = super.style;
|
||||
context.fillRect(super.x, super.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
// declare the second extended class
|
||||
// Circle is a specific kind of Shape with x, y centre point and radius
|
||||
class Circle extends Shape {
|
||||
constructor (id, fillStyle, x, y, radius) {
|
||||
super(id, fillStyle, x, y)
|
||||
this._radius = radius;
|
||||
}
|
||||
// native setter and getter for the radius property
|
||||
set radius(radius){
|
||||
this._radius = radius;
|
||||
}
|
||||
|
||||
get radius(){
|
||||
return this._radius;
|
||||
}
|
||||
// define the render method specifically for this shape (circle)
|
||||
render(context){
|
||||
context.fillStyle = super.style;
|
||||
context.arc(super.x, super.y, this.radius, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function startMeUp() {
|
||||
let drawing = document.getElementById("drawing");
|
||||
|
||||
// make sure <canvas> is completely supported
|
||||
// if drawing.getContext returns true, it's supported
|
||||
if (drawing.getContext){
|
||||
let context = drawing.getContext("2d");
|
||||
|
||||
// create a new rectangle
|
||||
let r1 = new Rectangle("r1", "#ff0000", 10, 10, 50, 50);
|
||||
r1.render(context);
|
||||
|
||||
// change the width and height and re-render
|
||||
r1.width = 100;
|
||||
r1.height = 100;
|
||||
r1.render(context);
|
||||
|
||||
// create a new circle
|
||||
let c1 = new Circle("c1", "rgba(0,0,255,0.5)", 200, 200, 50);
|
||||
c1.render(context);
|
||||
|
||||
// change the radius and re-render
|
||||
c1.radius = 100;
|
||||
c1.render(context);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="startMeUp();">
|
||||
<canvas id="drawing" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,57 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Rectangle Class</title>
|
||||
<script language="JavaScript" type="text/JavaScript">
|
||||
// declare a Rectangle class
|
||||
class Rectangle {
|
||||
constructor (width, height) {
|
||||
this._width = width;
|
||||
this._height = height;
|
||||
}
|
||||
// create native getters and setters
|
||||
set width(width){
|
||||
this._width = width;
|
||||
}
|
||||
|
||||
get width(){
|
||||
return this._width;
|
||||
}
|
||||
|
||||
set height(height){
|
||||
this._height = height;
|
||||
}
|
||||
|
||||
get height(){
|
||||
return this._height;
|
||||
}
|
||||
|
||||
get area(){
|
||||
return this._width * this._height;
|
||||
}
|
||||
|
||||
// create a static method that we can call without
|
||||
// first creating an object
|
||||
static defaultRectangle () {
|
||||
return new Rectangle(100, 100);
|
||||
}
|
||||
}
|
||||
var r = new Rectangle(50, 20)
|
||||
|
||||
r.width = 60;
|
||||
|
||||
if (r.area === 1000) {
|
||||
console.log(true);
|
||||
}
|
||||
else {
|
||||
console.log(false);
|
||||
}
|
||||
|
||||
// call the static method directly
|
||||
var defaultRect = Rectangle.defaultRectangle();
|
||||
console.log(defaultRect.area);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Sets (Collections)</title>
|
||||
<script language="JavaScript" type="text/JavaScript">
|
||||
// create a Set type
|
||||
var set1 = new Set();
|
||||
|
||||
// add 2 values to the set
|
||||
set1.add("apple");
|
||||
set1.add("oranges");
|
||||
|
||||
// return the number of members in the set
|
||||
console.log(set1.size); // 2
|
||||
|
||||
// add a new member and then try to add it again
|
||||
set1.add("banana");
|
||||
set1.add("banana"); // ignored
|
||||
|
||||
// get the set size again
|
||||
console.log(set1.size); // 3
|
||||
|
||||
// remove (delete) a member
|
||||
set1.delete("banana");
|
||||
|
||||
// get the size again
|
||||
console.log(set1.size); // 2
|
||||
|
||||
// determine if particular values are members or not
|
||||
console.log(set1.has("banana")); // false
|
||||
console.log(set1.has("apple")); // true
|
||||
|
||||
// the forEach() method calls a provided function once for each element in a set, in order.
|
||||
// using anonymous function
|
||||
set1.forEach(function(value) {
|
||||
console.log(value);
|
||||
});
|
||||
|
||||
// using a declared function
|
||||
set1.forEach(loopFor);
|
||||
|
||||
function loopFor(value) {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
// convert the set to an array
|
||||
var arr = [...set1]; // spread syntax
|
||||
console.log(arr[1]); // oranges
|
||||
|
||||
// create a new set from an array literal
|
||||
var set2 = new Set(['one','two','three']);
|
||||
|
||||
// get the size of the new set
|
||||
console.log(set2.size); // 3
|
||||
|
||||
// same as above but with an array variable
|
||||
var arr2 = ['test','again'];
|
||||
var set3 = new Set(arr2);
|
||||
console.log(set3.size); // 2
|
||||
|
||||
// remove all members from the set
|
||||
set1.clear();
|
||||
console.log(set1.size); // 0
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<h1>JavaScript Class Method</h1>
|
||||
<p>Pass a parameter into the "age()" method.</p>
|
||||
|
||||
<p id="demo"></p>
|
||||
|
||||
<script>
|
||||
class Car {
|
||||
constructor(name, year) {
|
||||
this.name = name;
|
||||
this.year = year;
|
||||
}
|
||||
age(x) {
|
||||
return x - this.year;
|
||||
}
|
||||
}
|
||||
|
||||
const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
|
||||
const myCar = new Car("Ford", 2014);
|
||||
document.getElementById("demo").innerHTML=
|
||||
"My car is " + myCar.age(year) + " years old.";
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user