Creative Developer & Visual Storyteller. I capture moments and craft digital experiences that speak louder
than words.
We capture moments that tell your story through the lens of creativity.
I Am ZLOUADA expérience at C language , with a knowledge in some hacking tools , Hi, I am coconut, expert
at programming , i love this shit and i will programming forever
<!-- Comments are enclosed like this line! -->
<!--
Comments
can
span
multiple
lines!
-->
<!-- #################### The Tags #################### -->
<!-- Here is an example HTML file that we are going to analyse. -->
<!doctype html>
<html>
<head>
<title>My Site</title>
</head>
<body>
<h1>Hello, world!</h1>
<a href="http://codepen.io/anon/pen/xwjLbZ">
Come look at what this shows
</a>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ul>
<li>This is an item in a non-enumerated list (bullet list)</li>
<li>This is another item</li>
<li>And this is the last item on the list</li>
</ul>
</body>
</html>
<!--
An HTML file always starts by indicating to the browser that the page is HTML.
-->
<!doctype html>
<!-- After this, it starts by opening an <html> tag. -->
<html>
<!-- that will be closed at the end of the file with </html>. -->
</html>
<!-- Nothing should appear after this final tag. -->
<!-- Inside (between the opening and closing tags <html></html>), we find: -->
<!-- A header defined by <head> (it must be closed with </head>). -->
<!--
The header contains some description and additional information which are not
displayed; this is metadata.
-->
<head>
<!--
The tag <title> indicates to the browser the title to show in browser
window's title bar and tab name.
-->
<title>My Site</title>
</head>
<!-- After the <head> section, we find the tag - <body> -->
<!-- Until this point, nothing described will show up in the browser window. -->
<!-- We must fill the body with the content to be displayed. -->
<body>
<!-- The h1 tag creates a title. -->
<h1>Hello, world!</h1>
<!--
There are also subtitles to <h1> from the most important (h2) to the most
precise (h6).
-->
<!-- a hyperlink to the url given by the attribute href="" -->
<a href="http://codepen.io/anon/pen/xwjLbZ">
Come look at what this shows
</a>
<!-- The tag <p> lets us include text in the html page. -->
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<!-- The tag <ul> creates a bullet list. -->
<!--
To have a numbered list instead we would use <ol> giving 1. for the first
element, 2. for the second, etc.
-->
<ul>
<li>This is an item in a non-enumerated list (bullet list)</li>
<li>This is another item</li>
<li>And this is the last item on the list</li>
</ul>
</body>
<!-- And that's it, creating an HTML file can be simple. -->
<!-- But it is possible to add many additional types of HTML tags. -->
<!-- The <img /> tag is used to insert an image. -->
<!--
The source of the image is indicated using the attribute src=""
The source can be an URL or even path to a file on your computer.
-->
<img src="http://i.imgur.com/XWG0O.gif"/>
<!-- It is also possible to create a table. -->
<!-- We open a <table> element. -->
<table>
<!-- <tr> allows us to create a row. -->
<tr>
<!-- <th> allows us to give a title to a table column. -->
<th>First Header</th>
<th>Second Header</th>
</tr>
<tr>
<!-- <td> allows us to create a table cell. -->
<td>first row, first column</td>
<td>first row, second column</td>
</tr>
<tr>
<td>second row, first column</td>
<td>second row, second column</td>
</tr>
</table>
Css :
/* comments appear inside slash-asterisk, just like this line!
there are no "one-line comments"; this is the only comment style */
/* ####################
## SELECTORS
#################### */
/* the selector is used to target an element on a page. */
selector { property: value; /* more properties...*/ }
/*
Here is an example element:
<div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' />
*/
/* You can target it using one of its CSS classes */
.class1 { }
/* or both classes! */
.class1.class2 { }
/* or its name */
div { }
/* or its id */
#anID { }
/* or using the fact that it has an attribute! */
[attr] { font-size:smaller; }
/* or that the attribute has a specific value */
[attr='value'] { font-size:smaller; }
/* starts with a value (CSS 3) */
[attr^='val'] { font-size:smaller; }
/* or ends with a value (CSS 3) */
[attr$='ue'] { font-size:smaller; }
/* or contains a value (CSS 3) */
[attr*='foo'] { }
/* or contains a value in a space-separated list */
[otherAttr~='foo'] { }
[otherAttr~='bar'] { }
/* or contains a value in a dash-separated list, e.g., "-" (U+002D) */
[otherAttr|='en'] { font-size:smaller; }
/* You can combine different selectors to create a more focused selector. Don't
put spaces between them. */
div.some-class[attr$='ue'] { }
/* You can select an element which is a child of another element */
div.some-parent > .class-name { }
/* or a descendant of another element. Children are the direct descendants of
their parent element, only one level down the tree. Descendants can be any
level down the tree. */
div.some-parent .class-name { }
/* Warning: the same selector without a space has another meaning.
Can you guess what? */
div.some-parent.class-name { }
/* You may also select an element based on its adjacent sibling */
.i-am-just-before + .this-element { }
/* or any sibling preceding it */
.i-am-any-element-before ~ .this-element { }
/* There are some selectors called pseudo classes that can be used to select an
element only when it is in a particular state */
/* for example, when a link hasn't been visited */
selected:link { }
/* or a link has been visited */
selector:visited { }
/* or an element is in focus */
selected:focus { }
/* or when the cursor hovers over an element */
selector:hover { }
/* or when a link is clicked on */
selector:active { }
/* These pseudo classes regarding links should always be written in the above order or the code might not work as expected */
/* Any element that is the first child of its parent */
selector:first-child {}
/* any element that is the last child of its parent */
selector:last-child {}
/* Select the nth child of selector parent (CSS 3) */
selector:nth-child(n) { }
/* Just like pseudo classes, pseudo elements allow you to style certain parts of
a document */
/* matches a virtual first child of the selected element */
selector::before {}
/* matches a virtual last child of the selected element */
selector::after {}
/* At appropriate places, an asterisk may be used as a wildcard to select every
element */
* { } /* all elements */
.parent * { } /* all descendants */
.parent > * { } /* all children */
/* Group any number of selectors to define styles that affect all selectors
in the group */
selector1, selector2 { }
/* Select elements that do not have a certain state (CSS 3) */
/* Here, we select div with no id attribute. */
div:not([id]) {
background-color: red;
}
/* ####################
## PROPERTIES
#################### */
selector {
/* Units of length can be absolute or relative. */
/* Relative units */
width: 50%; /* percentage of parent element width */
font-size: 2em; /* multiples of element's original font-size */
font-size: 2rem; /* or the root element's font-size */
font-size: 2vw; /* multiples of 1% of the viewport's width (CSS 3) */
font-size: 2vh; /* or its height */
font-size: 2vmin; /* whichever of a vh or a vw is smaller */
font-size: 2vmax; /* or greater */
/* Absolute units */
width: 200px; /* pixels */
font-size: 20pt; /* points */
width: 5cm; /* centimeters */
min-width: 50mm; /* millimeters */
max-width: 5in; /* inches */
/* Colors */
color: #F6E; /* short hex format */
color: #FF66EE; /* long hex format */
color: tomato; /* a named color */
color: rgb(255, 255, 255); /* as rgb values */
color: rgb(10%, 20%, 50%); /* as rgb percentages */
color: rgba(255, 0, 0, 0.3); /* as rgba values (CSS 3) Note: 0 <= a <= 1 */
color: transparent; /* equivalent to setting the alpha to 0 */
color: hsl(0, 100%, 50%); /* as hsl percentages (CSS 3) */
color: hsla(0, 100%, 50%, 0.3); /* as hsl percentages with alpha */
/* Borders */
border-width:5px;
border-style:solid;
border-color:red; /* similar to how background-color is set */
border: 5px solid red; /* this is a short hand approach for the same */
border-radius:20px; /* this is a CSS3 property */
/* Images as backgrounds of elements */
background-image: url(/img-path/img.jpg); /* quotes inside url() optional */
/* Fonts */
font-family: Arial;
/* if the font family name has a space, it must be quoted */
font-family: "Courier New";
/* if the first one is not found, the browser uses the next, and so on */
font-family: "Courier New", Trebuchet, Arial, sans-serif;
}
/* Custom CSS properties using variables (CSS 3) */
:root {
--main-bg-color: whitesmoke;
}
body {
background-color: var(--main-bg-color)
}
/* Perfom a calculation (CSS 3) */
body {
width: calc(100vw - 100px)
}
/* Nest style rule inside another (CSS 3) */
.main {
.bgred { /* same as: .main .bgred { } */
background: red;
}
& .bggreen { /* same as: .main .bggreen { } */
background: green;
}
&.bgblue { /* (without space) same as: .main.bgblue { } */
background: blue;
}
}
/* Design responsive layout using flexbox (CSS 3) */
.container {
display: flex;
flex-direction: row; /* in which direction stack the flex items */
flex-wrap: wrap; /* whether or not flex items should wrap */
justify-content: center; /* how to align flex items horizontally */
align-items: center; /* how to align flex items vertically */
}
<!-- You need to include the css file in your page's <head>. This is the
recommended method. Refer to http://stackoverflow.com/questions/8284365 -->
<link rel='stylesheet' type='text/css' href='path/to/style.css'>
<!-- You can also include some CSS inline in your markup. -->
<style>
a { color: purple; }
</style>
<!-- Or directly set CSS properties on the element. -->
<div style="border: 1px solid red;">
</div>
/* A */
p.class1[attr='value']
/* B */
p.class1 { }
/* C */
p.class2 { }
/* D */
p { }
/* E */
p { property: value !important; }
<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
/* A rule that will be used on all devices */
h1 {
font-size: 2em;
color: white;
background-color: black;
}
/* change the h1 to use less ink on a printer */
@media print {
h1 {
color: black;
background-color: white;
}
}
/* make the font bigger when shown on a screen at least 480px wide */
@media screen and (min-width: 480px) {
h1 {
font-size: 3em;
font-weight: normal;
}
}
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
</head>
JavaScript :
// Single-line comments start with two slashes.
/* Multiline comments start with slash-star,
and end with star-slash */
// Statements can be terminated by ;
doStuff();
// ... but they don't have to be, as semicolons are automatically inserted
// wherever there's a newline, except in certain cases.
doStuff()
// Because those cases can cause unexpected results, we'll keep on using
// semicolons in this guide.
///////////////////////////////////
// 1. Numbers, Strings and Operators
// JavaScript has one number type (which is a 64-bit IEEE 754 double).
// Doubles have a 52-bit mantissa, which is enough to store integers
// up to about 9✕10¹⁵ precisely.
3; // = 3
1.5; // = 1.5
// Some basic arithmetic works as you'd expect.
1 + 1; // = 2
0.1 + 0.2; // = 0.30000000000000004
8 - 1; // = 7
10 * 2; // = 20
35 / 5; // = 7
// Including uneven division.
5 / 2; // = 2.5
// And modulo division.
10 % 2; // = 0
30 % 4; // = 2
18.5 % 7; // = 4.5
// Bitwise operations also work; when you perform a bitwise operation your float
// is converted to a signed int *up to* 32 bits.
1 << 2; // = 4
// Precedence is enforced with parentheses.
(1 + 3) * 2; // = 8
// There are three special not-a-real-number values:
Infinity; // result of e.g. 1/0
-Infinity; // result of e.g. -1/0
NaN; // result of e.g. 0/0, stands for 'Not a Number'
// There's also a boolean type.
true;
false;
// Strings are created with ' or ".
'abc';
"Hello, world";
// Negation uses the ! symbol
!true; // = false
!false; // = true
// Equality is ===
1 === 1; // = true
2 === 1; // = false
// Inequality is !==
1 !== 1; // = false
2 !== 1; // = true
// More comparisons
1 < 10; // = true
1 > 10; // = false
2 <= 2; // = true
2 >= 2; // = true
// Strings are concatenated with +
"Hello " + "world!"; // = "Hello world!"
// ... which works with more than just strings
"1, 2, " + 3; // = "1, 2, 3"
"Hello " + ["world", "!"]; // = "Hello world,!"
// ...which can result in some weird behaviour...
13 + !0; // 14
"13" + !0; // '13true'
// and are compared with < and >
"a" < "b"; // = true
// Type coercion is performed for comparisons with double equals...
"5" == 5; // = true
null == undefined; // = true
// ...unless you use ===
"5" === 5; // = false
null === undefined; // = false
// You can access characters in a string with `charAt`
"This is a string".charAt(0); // = 'T'
// ...or use `substring` to get larger pieces.
"Hello world".substring(0, 5); // = "Hello"
// `length` is a property, so don't use ().
"Hello".length; // = 5
// There's also `null` and `undefined`.
null; // used to indicate a deliberate non-value
undefined; // used to indicate a value is not currently present (although
// `undefined` is actually a value itself)
// false, null, undefined, NaN, 0 and "" are falsy; everything else is truthy.
// Note that 0 is falsy and "0" is truthy, even though 0 == "0".
///////////////////////////////////
// 2. Variables, Arrays and Objects
// Variables are declared with the `var` keyword. JavaScript is dynamically
// typed, so you don't need to specify type. Assignment uses a single `=`
// character.
var someVar = 5;
// If you leave the var keyword off, you won't get an error...
someOtherVar = 10;
// ...but your variable will be created in the global scope, not in the scope
// you defined it in.
// Variables declared without being assigned to are set to undefined.
var someThirdVar; // = undefined
// If you want to declare a couple of variables, then you could use a comma
// separator
var someFourthVar = 2, someFifthVar = 4;
// There's shorthand for performing math operations on variables:
someVar += 5; // equivalent to someVar = someVar + 5; someVar is 10 now
someVar *= 10; // now someVar is 100
// and an even-shorter-hand for adding or subtracting 1
someVar++; // now someVar is 101
someVar--; // back to 100
// Arrays are ordered lists of values, of any type.
var myArray = ["Hello", 45, true];
// Their members can be accessed using the square-brackets subscript syntax.
// Array indices start at zero.
myArray[1]; // = 45
// Arrays are mutable and of variable length.
myArray.push("World");
myArray.length; // = 4
// Add/Modify at specific index
myArray[3] = "Hello";
// Add and remove element from front or back end of an array
myArray.unshift(3); // Add as the first element
someVar = myArray.shift(); // Remove first element and return it
myArray.push(3); // Add as the last element
someVar = myArray.pop(); // Remove last element and return it
// Join all elements of an array with semicolon
var myArray0 = [32,false,"js",12,56,90];
myArray0.join(";"); // = "32;false;js;12;56;90"
// Get subarray of elements from index 1 (include) to 4 (exclude)
myArray0.slice(1,4); // = [false,"js",12]
// Remove 4 elements starting from index 2, and insert there strings
// "hi","wr" and "ld"; return removed subarray
myArray0.splice(2,4,"hi","wr","ld"); // = ["js",12,56,90]
// myArray0 === [32,false,"hi","wr","ld"]
// JavaScript's objects are equivalent to "dictionaries" or "maps" in other
// languages: an unordered collection of key-value pairs.
var myObj = {key1: "Hello", key2: "World"};
// Keys are strings, but quotes aren't required if they're a valid
// JavaScript identifier. Values can be any type.
var myObj = {myKey: "myValue", "my other key": 4};
// Object attributes can also be accessed using the subscript syntax,
myObj["my other key"]; // = 4
// ... or using the dot syntax, provided the key is a valid identifier.
myObj.myKey; // = "myValue"
// Objects are mutable; values can be changed and new keys added.
myObj.myThirdKey = true;
// If you try to access a value that's not yet set, you'll get undefined.
myObj.myFourthKey; // = undefined
///////////////////////////////////
// 3. Logic and Control Structures
// The `if` structure works as you'd expect.
var count = 1;
if (count == 3){
// evaluated if count is 3
} else if (count == 4){
// evaluated if count is 4
} else {
// evaluated if it's not either 3 or 4
}
// As does `while`.
while (true){
// An infinite loop!
}
// Do-while loops are like while loops, except they always run at least once.
var input;
do {
input = getInput();
} while (!isValid(input));
// The `for` loop is the same as C and Java:
// initialization; continue condition; iteration.
for (var i = 0; i < 5; i++){
// will run 5 times
}
// Breaking out of labeled loops is similar to Java
outer:
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if (i == 5 && j ==5) {
break outer;
// breaks out of outer loop instead of only the inner one
}
}
}
// The for/in statement allows iteration over properties of an object.
var description = "";
var person = {fname:"Paul", lname:"Ken", age:18};
for (var x in person){
description += person[x] + " ";
} // description = 'Paul Ken 18 '
// The for/of statement allows iteration over iterable objects (including the built-in String,
// Array, e.g. the Array-like arguments or NodeList objects, TypedArray, Map and Set,
// and user-defined iterables).
var myPets = "";
var pets = ["cat", "dog", "hamster", "hedgehog"];
for (var pet of pets){
myPets += pet + " ";
} // myPets = 'cat dog hamster hedgehog '
// && is logical and, || is logical or
if (house.size == "big" && house.colour == "blue"){
house.contains = "bear";
}
if (colour == "red" || colour == "blue"){
// colour is either red or blue
}
// && and || "short circuit", which is useful for setting default values.
var name = otherName || "default";
// The `switch` statement checks for equality with `===`.
// Use 'break' after each case
// or the cases after the correct one will be executed too.
grade = 'B';
switch (grade) {
case 'A':
console.log("Great job");
break;
case 'B':
console.log("OK job");
break;
case 'C':
console.log("You can do better");
break;
default:
console.log("Oy vey");
break;
}
///////////////////////////////////
// 4. Functions, Scope and Closures
// JavaScript functions are declared with the `function` keyword.
function myFunction(thing){
return thing.toUpperCase();
}
myFunction("foo"); // = "FOO"
// Note that the value to be returned must start on the same line as the
// `return` keyword, otherwise you'll always return `undefined` due to
// automatic semicolon insertion. Watch out for this when using Allman style.
function myFunction(){
return // <- semicolon automatically inserted here
{thisIsAn: 'object literal'};
}
myFunction(); // = undefined
// JavaScript functions are first class objects, so they can be reassigned to
// different variable names and passed to other functions as arguments - for
// example, when supplying an event handler:
function myFunction(){
// this code will be called in 5 seconds' time
}
setTimeout(myFunction, 5000);
// Note: setTimeout isn't part of the JS language, but is provided by browsers
// and Node.js.
// Another function provided by browsers is setInterval
function myFunction(){
// this code will be called every 5 seconds
}
setInterval(myFunction, 5000);
// Function objects don't even have to be declared with a name - you can write
// an anonymous function definition directly into the arguments of another.
setTimeout(function(){
// this code will be called in 5 seconds' time
}, 5000);
// JavaScript has function scope; functions get their own scope but other blocks
// do not.
if (true){
var i = 5;
}
i; // = 5 - not undefined as you'd expect in a block-scoped language
// This has led to a common pattern of "immediately-executing anonymous
// functions", which prevent temporary variables from leaking into the global
// scope.
(function(){
var temporary = 5;
// We can access the global scope by assigning to the "global object", which
// in a web browser is always `window`. The global object may have a
// different name in non-browser environments such as Node.js.
window.permanent = 10;
})();
temporary; // raises ReferenceError
permanent; // = 10
// One of JavaScript's most powerful features is closures. If a function is
// defined inside another function, the inner function has access to all the
// outer function's variables, even after the outer function exits.
function sayHelloInFiveSeconds(name){
var prompt = "Hello, " + name + "!";
// Inner functions are put in the local scope by default, as if they were
// declared with `var`.
function inner(){
alert(prompt);
}
setTimeout(inner, 5000);
// setTimeout is asynchronous, so the sayHelloInFiveSeconds function will
// exit immediately, and setTimeout will call inner afterwards. However,
// because inner is "closed over" sayHelloInFiveSeconds, inner still has
// access to the `prompt` variable when it is finally called.
}
sayHelloInFiveSeconds("Adam"); // will open a popup with "Hello, Adam!" in 5s
///////////////////////////////////
// 5. More about Objects; Constructors and Prototypes
// Objects can contain functions.
var myObj = {
myFunc: function(){
return "Hello world!";
}
};
myObj.myFunc(); // = "Hello world!"
// When functions attached to an object are called, they can access the object
// they're attached to using the `this` keyword.
myObj = {
myString: "Hello world!",
myFunc: function(){
return this.myString;
}
};
myObj.myFunc(); // = "Hello world!"
// What `this` is set to has to do with how the function is called, not where
// it's defined. So, our function doesn't work if it isn't called in the
// context of the object.
var myFunc = myObj.myFunc;
myFunc(); // = undefined
// Inversely, a function can be assigned to the object and gain access to it
// through `this`, even if it wasn't attached when it was defined.
var myOtherFunc = function(){
return this.myString.toUpperCase();
};
myObj.myOtherFunc = myOtherFunc;
myObj.myOtherFunc(); // = "HELLO WORLD!"
// We can also specify a context for a function to execute in when we invoke it
// using `call` or `apply`.
var anotherFunc = function(s){
return this.myString + s;
};
anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!"
// The `apply` function is nearly identical, but takes an array for an argument
// list.
anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!"
// This is useful when working with a function that accepts a sequence of
// arguments and you want to pass an array.
Math.min(42, 6, 27); // = 6
Math.min([42, 6, 27]); // = NaN (uh-oh!)
Math.min.apply(Math, [42, 6, 27]); // = 6
// But, `call` and `apply` are only temporary. When we want it to stick, we can
// use `bind`.
var boundFunc = anotherFunc.bind(myObj);
boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!"
// `bind` can also be used to partially apply (curry) a function.
var product = function(a, b){ return a * b; };
var doubler = product.bind(this, 2);
doubler(8); // = 16
// When you call a function with the `new` keyword, a new object is created, and
// made available to the function via the `this` keyword. Functions designed to be
// called like that are called constructors.
var MyConstructor = function(){
this.myNumber = 5;
};
myNewObj = new MyConstructor(); // = {myNumber: 5}
myNewObj.myNumber; // = 5
// Unlike most other popular object-oriented languages, JavaScript has no
// concept of 'instances' created from 'class' blueprints; instead, JavaScript
// combines instantiation and inheritance into a single concept: a 'prototype'.
// Every JavaScript object has a 'prototype'. When you go to access a property
// on an object that doesn't exist on the actual object, the interpreter will
// look at its prototype.
// Some JS implementations let you access an object's prototype on the magic
// property `__proto__`. While this is useful for explaining prototypes it's not
// part of the standard; we'll get to standard ways of using prototypes later.
var myObj = {
myString: "Hello world!"
};
var myPrototype = {
meaningOfLife: 42,
myFunc: function(){
return this.myString.toLowerCase();
}
};
myObj.__proto__ = myPrototype;
myObj.meaningOfLife; // = 42
// This works for functions, too.
myObj.myFunc(); // = "hello world!"
// Of course, if your property isn't on your prototype, the prototype's
// prototype is searched, and so on.
myPrototype.__proto__ = {
myBoolean: true
};
myObj.myBoolean; // = true
// There's no copying involved here; each object stores a reference to its
// prototype. This means we can alter the prototype and our changes will be
// reflected everywhere.
myPrototype.meaningOfLife = 43;
myObj.meaningOfLife; // = 43
// The for/in statement allows iteration over properties of an object,
// walking up the prototype chain until it sees a null prototype.
for (var x in myObj){
console.log(myObj[x]);
}
///prints:
// Hello world!
// 43
// [Function: myFunc]
// true
// To only consider properties attached to the object itself
// and not its prototypes, use the `hasOwnProperty()` check.
for (var x in myObj){
if (myObj.hasOwnProperty(x)){
console.log(myObj[x]);
}
}
///prints:
// Hello world!
// We mentioned that `__proto__` was non-standard, and there's no standard way to
// change the prototype of an existing object. However, there are two ways to
// create a new object with a given prototype.
// The first is Object.create, which is a recent addition to JS, and therefore
// not available in all implementations yet.
var myObj = Object.create(myPrototype);
myObj.meaningOfLife; // = 43
// The second way, which works anywhere, has to do with constructors.
// Constructors have a property called prototype. This is *not* the prototype of
// the constructor function itself; instead, it's the prototype that new objects
// are given when they're created with that constructor and the new keyword.
MyConstructor.prototype = {
myNumber: 5,
getMyNumber: function(){
return this.myNumber;
}
};
var myNewObj2 = new MyConstructor();
myNewObj2.getMyNumber(); // = 5
myNewObj2.myNumber = 6;
myNewObj2.getMyNumber(); // = 6
// Built-in types like strings and numbers also have constructors that create
// equivalent wrapper objects.
var myNumber = 12;
var myNumberObj = new Number(12);
myNumber == myNumberObj; // = true
// Except, they aren't exactly equivalent.
typeof myNumber; // = 'number'
typeof myNumberObj; // = 'object'
myNumber === myNumberObj; // = false
if (0){
// This code won't execute, because 0 is falsy.
}
if (new Number(0)){
// This code will execute, because wrapped numbers are objects, and objects
// are always truthy.
}
// However, the wrapper objects and the regular builtins share a prototype, so
// you can actually add functionality to a string, for instance.
String.prototype.firstCharacter = function(){
return this.charAt(0);
};
"abc".firstCharacter(); // = "a"
// This fact is often used in "polyfilling", which is implementing newer
// features of JavaScript in an older subset of JavaScript, so that they can be
// used in older environments such as outdated browsers.
// For instance, we mentioned that Object.create isn't yet available in all
// implementations, but we can still use it with this polyfill:
if (Object.create === undefined){ // don't overwrite it if it exists
Object.create = function(proto){
// make a temporary constructor with the right prototype
var Constructor = function(){};
Constructor.prototype = proto;
// then use it to create a new, appropriately-prototyped object
return new Constructor();
};
}
// ES6 Additions
// The "let" keyword allows you to define variables in a lexical scope,
// as opposed to a function scope like the var keyword does.
let name = "Billy";
// Variables defined with let can be reassigned new values.
name = "William";
// The "const" keyword allows you to define a variable in a lexical scope
// like with let, but you cannot reassign the value once one has been assigned.
const pi = 3.14;
pi = 4.13; // You cannot do this.
// There is a new syntax for functions in ES6 known as "lambda syntax".
// This allows functions to be defined in a lexical scope like with variables
// defined by const and let.
const isEven = (number) => {
return number % 2 === 0;
};
isEven(7); // false
// The "equivalent" of this function in the traditional syntax would look like this:
function isEven(number) {
return number % 2 === 0;
};
// I put the word "equivalent" in double quotes because a function defined
// using the lambda syntax cannot be called before the definition.
// The following is an example of invalid usage:
add(1, 8);
const add = (firstNumber, secondNumber) => {
return firstNumber + secondNumber;
};
