Comments (8)
Solution to add
each line in html use js
for (var i = 0; i < var_len; i++){
$('#var_name').append(var_name[i]).append("
");
}
from web_app.
Link to introduction on angular js
from web_app.
Computers create models of the world using data.
The models use objects to represent physical things.
Events can trigger methods, and methods can retrieve or update an object's properties.
Programmers can write code to say "When this event occurs, run that code."
Web Browsers are programs build using objects.
The browser represents each window or tab using a window object.
The current web page loaded into each window is modelled using a document object.
The title property of the document object tells ...
The document object represents an html page.
When the browser creates a model of a web page, it not only creates a document object, but it also creates a new object for each element on the page.
Together these objects are described in the Document Object Model,DOM.
Web browsers use html markup to create a model of the web page. Each element creates its own node which is a kind of object.
from web_app.
To understand how you can change the content of an HTML page using JS, you need to know how a browser interprets the HTML code and applies styling to it.
1. RECEIVE A PAGE AS HTML CODE
Each page on a website can be seen as a separate document.
2.CREATE A MODEL OF THE PAGE AND STORE IT IN MEMORY.
Beneath the document object each box is called a node. Each of these nodes is another object.
3. USE A RENDERING ENGINE TO SHOW THE PAGE ON SCREEN.
When the browser receives the css rules, the rendering engine processes them and applies each rule to its corresponding elements.
All major browsers use a javascript interpreter to translate instructions in js into instructions that computer can follow.
So JS is an interpreting programming language, each line of code is translated one y one as the script run.
from web_app.
How HTML,CSS & JAVASCRIPT FIT TOGETHER
HTML -- THE CONTENT LAYER:
The html gives the page structure and adds semantics.
CSS --PRESENTATION LAYER:
It provides rules that how html content is presented.
JS --BEHAVIOR LAYER:
This is where we can change how the page behaves, adding interactivity.
Keep as much of js as possible in separate files to make the page still works if the js cannot be loaded or run.
<script src = ""></script>
The HTML <script> element is used to load the JS file into the page and it has an attribute called src.
from web_app.
JS only:
Each individual instruction or step is known as a statement. Statement should end with a semicolon.
"var" is a variable keyword.
Anonymous Function & Function Expressions
If you put a function where the interpreter would expect to see and expression, then it is treated as an expression, and it is known as a function expression.
In function expressions, the name is usually omitted. A function without name is called anonymous function.
Below the function is stored in a variable called area.
var area = function (width, height) {
return width * height;
};
var size = area(3,4);
IMMEDIATELY INVOKED FUNCTION EXPRESSION iife
These functions are not given a name
var area = (function () {
var width = 3;
var height = 2;
return width * height =;
}());
The () after } tell the interpreter to call the function immediately;
The grouping parenthesis are to ensure the interpreter treat this as an expression.
When to use anonymous functions and IIFES
They are used for code that only needs to run once within a task.
- As an argument when a function is called (to calculate a value for that function);
- To assign the value of a property to an object
3. In event handlers and listeners to perform a task when an event occurs.
IIFEs are commonly used as a wrapper around a set of code. Any variables declared within that anonymous function are effectively protected from variables in other scripts that might have the same name. This is due to a concept called scope, which is a very popular technique with jquery.
from web_app.
WAYs to Create Objects
Variable Scope
A variable actually references a value that is stored in memory.
local/ function level variable: within a function
global variable : outside the function --Pay attention to name conflict when there are several js files
Global variable are stored in memory for as long as the web page is loaded into the web browser, so it uses more memory. The same value can be used with more than one variable;
var isWall = true;
var canPaint = true;
What is an Object?
In an object, variables become known as properties.
In an object, functions become known as methods.
The object is in curly braces:
In an object, the name is called a key.
The object is the curly braces and their contents. The object is stored in a variable called hotel, so you can refer to it as the hotel object.
Separate each key from its value using a colon.
Separate each property and method using a comma (but not after the last value).
Access an object and its methods and properties.
var name = hotel.name;
var roomsfree = hotel.checkAvailabity();
OR
var name = hotel['name'];
var roomsfree = hotel['checkAvailabity']();
CREATING the OBJECT, then ADD PROPERTIES AND METHODS
1. LITERAL NOTATION
var hotel = {}
hotel.name ='park';
hotel.rooms = 200;
hotel.booked = 120;
hotel.checkAcaddd = function() {
//
};
2 Object Constructor Notation
var hotel = new Object();
hotel.name ='park';
hotel.rooms = 200;
hotel.booked = 120;
hotel.checkAcaddd = function() {
///
};
CREATING AN OBJECT WITH PROPERTIES & METHODS
1.Literal Notation
var hotel = {
name : 'Cara',
rooms : 40,
booked : 25,
gym : true,
roomTypes : ['twin','double','suite'], //square brackets
checkAvailabity : function() {
return this.rooms - this.booked;
//this keyword is used to indicate that it is using rooms and booked properties of this object
}
};
2. Creating many objects : Constructor Notation
template
function Hotel(name,rooms,booked) {
this.name = name;
this.rooms = rooms;
this.booked = booked;
this.checkAvailabity = function() {
return this.rooms - this.booked;
};
}
var quayHotel = new Hotel('quey',40,25);
var parkHotel = new Hotel('park',120,77);
var details1 = quayHotel.name + 'rooms: ';
details1 += quayHotel.checkAvailabity();
var el1 = document.getElementbyId('hotel1');
el1.textContent = details1;
var details2 = parkHotel.name + 'rooms: ';
details2 += parkHotel.checkAvailabity();
var el2 = document.getElementbyId('hotel2');
el2.textContent = details2;
Add and Delete
After creating the object,
var hotel = {
name = 'Park',
rooms = 120,
booked = 77 };
hotel.gym = true;
hotel.pool = false;
delete hotel.booked;
from web_app.
THIS
When a function is created at top level of a script, it is in the global scope.
The default object is the window object.
This keyword is a reference to the object that the function is created inside.
function windowSize () {
var width = this.width;
var height = this.height;
return [width, height];
}
All global variables also become properties of the window object, so when a function is in the global context, you can access global variables using the window object.
var width = 600;
var shape = {width: 300};//curly braces are objects
var showWidth = function () {
document.write(this.width);
};
showWidth();
var width = 600;
var shape = {width: 300};//curly braces are objects
var showWidth = function () {
document.write(this.width);
};
shape.getWidth = showWidth;
shape.getWidth();
from web_app.
Related Issues (20)
- solution_0521
- 0602_web HOT 9
- open a folder on linux
- use ajax and jquery to load data from different php files HOT 1
- try python on apache2 HOT 2
- test cgi HOT 8
- 0616python lifelines HOT 1
- 0619_system program problem detected
- reinstall_steps HOT 4
- try survival analysis HOT 8
- new format
- some hint on data process HOT 8
- jquery HOT 1
- Data Organization in js HOT 2
- python_json
- php_json_python HOT 2
- php_debug_ HOT 3
- apache HOT 1
- ^M in csv file HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from web_app.