【JS】Advanced1：Object-Oriented Code

Object-Oriented Code

1.

var Person = function (name) {

    this.name = name;

};


Person.prototype.say = function (words) {

    alert(this.name + ' says "' + words + '"');

};

var tom = new Person("tom");

tom.say("Hello");

 

2.Inheritance and object-oriented programming

constructor pattern

 

---

Creating Elements 

1.<div class="note">Hello</div>.

var div = document.createElement('div');

if (div.textContent) { div.textContent = "Hello!"; } 
else if (div.innerText) { div.innerText = "Hello!"; }

div.setAttribute('class', 'note');

document.body.appendChild(div); 

2.

div.parentNode.removeChild(div);

3.

var div = $('<div/>').text("Hello").appendTo(document.body);

$('<span/>').text('Hello!').appendTo(div);

---

 

Canvas?

1.<script>
    var canvas = document.querySelector('canvas'),
        ctx = canvas.getContext('2d');
    ctx.fillRect(top-left-corner-x, top-left-corner-y, width, height);
</script>

2.Animation??

---

 

Local Storage

1.

// Object example 

localStorage.setItem('user', JSON.stringify({

    username: 'htmldog',

    api_key: 'abc123xyz789'

}));



var user = JSON.parse(localStorage.getItem('user'));

2.Local storage can only save strings,the object must be run through JSON.parse on the way out of local storage.

 

---

Errors & Exceptions

 1.

try {

    JSON.parse("a"); // Produces a SyntaxError } catch (error) {

    // Handle the error     alert(error.message);

}

 

2.Creating error

throw new Error("I hungry. Fridge empty.");

 

---

Regular Expressions……

1.Used to Serarch & Match Strings to identify or replace

2.var regex=/ ^[a-z\s]+$/;

//--expression

[]--repeated one or more times

a-z--letter a to z ,lowercase

\s--white-space

$--up to end the string

3.

var lowerCaseString = 'some characters';



if (lowerCaseString.match(regex)) {

    alert('Yes, all lowercase');

}

4.

var text = "Everything and nothing.";



text = text.replace(/(every|no)thing/gi, "something");

g--global flag ,match all occurrences rather then just the first

i--case-insensitive flag,did not care about uppercase &lowercase letters

---

 

Closures……

1.

var add = function (a) {

    return function (b) {

        return a + b;

    };

};



var addFive = add(5);



alert(addFive(10));//15

var hello = add('Hello ');



alert(hello('tom'));// Hello tom

2.A function that returns a function

---

Node.js

1.Node is a platform for building servers in JavaScript,built on Google’s V8 JavaScript engine

Using DOM APIs  are available on the other side of the client/sever divide in the form of just Node

2.Install

nodejs.org

npm(Node package Manager)

Node comes with a core set of modules, one of which is “http”, used to set up a web server

 

---

JS Apps

1.Moduarity

2.MVC

 

---

Backbone

1.Add structure to client-side applications,to avoid a spaghetti-code mess.

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

2.

 connect model up to a view via a template which is used to indicate where the model’s data should go.

 jQuery and Underscore.

 

---

 Angular

1.open-source client-side JS framework that uses HTML as its templating language

Declarative programming is better than imperative programming

2.create

connects the value of the input to a model called “name”

bind to the value of the “name” model. When you update the input, the h1 will update too.

3.build something useful

4.scope

5.dependency injection

6.smaller