Scribd
Upload
52 views

Javascript Notes

The let keyword defines variables locally within the nearest scope, unlike var which is limited to the scope of a function. Objects in JavaScript are defined using functions with this pointing to the object. Functions can be immediately invoked by adding parentheses after the function definition and passing arguments. Events in JavaScript allow functions to be attached to run when certain browser events occur, commonly using addEventListener.

Uploaded by

ddd
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
52 views

Javascript Notes

The let keyword defines variables locally within the nearest scope, unlike var which is limited to the scope of a function. Objects in JavaScript are defined using functions with this pointing to the object. Functions can be immediately invoked by adding parentheses after the function definition and passing arguments. Events in JavaScript allow functions to be attached to run when certain browser events occur, commonly using addEventListener.

Uploaded by

ddd
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

The “let” keyword

This defines keyword defines a variable local to the most recent scope. Unlike var, which is limited to
the scope of a function.

I.e.,

function aFunc(){

var something = 5;

if(something){

let something = 2

console.log(something); //Would print 2, since its defined in this if statement only.

Console.log(something) //Would print 5. As the other something isn’t defined in this scope.

Objects

In JavaScript objects are sloppy to make. They take the form of functions, which define attributes
and some of those attributes can be assigned function pointers.

For instance

Function Cat(noise, size){

This.noise = noise;

This.size = size;

This.makeNoise = function noise(){

Console.log(“meow”);

};

Immediately Invoked Functions

In JavaScript some functions are immediately invoked. To do this, after defining a function put
parenthesis to pass arguments to the function, then pass the arguments and it will be called
immediately after it is defined. Useful for when certain elements on a webpage need to have the
function called immediately.

Function func(one,two){ //do something//}(varOne, varTwo); //Function called with varOne, varTwo
as arguments.
 In JavaScript you can pass around function pointers, treating them like you would in C or
python.
 JavaScript is a weakly typed language, so Arrays can hold any data type items.
 Arrays are an object in JavaScript and have associated functions.

Dot vs. Bracket Notation


Objects have dot and bracket notation, in order to address attributes. I.e., cat.noise, returns
the noise variable. Cat[“noise”], also returns the noise variable. We may want to do this
because certain object attributes names may have special characters, like cat[“WC:Image”],
which can’t be used with dot notation.

Closure
A closure in JavaScript is when a function is defined inside a function and that inside function
uses variables defined in the outer function. If the inside function is returned as output for
the outside function, then it will remember the variables that associated with the inside
function. I.e.,
Function func (){
Var a = 2;
Var b = 4;
Function multiply(){
Return a*b;
}
Return multiply;
}

Var something = func();


Something(); //Would output 8, remembering a and b.

Document Methods to Access DOM


These methods retrieve the first element and all elements respectively, that match the given
CSS selector. So “.post-content p”, would apply to all paragraph tags that have post content
as their class.

Accessing CSS Style Attributes


JavaScript is only requesting what’s in the document. Therefore when requesting lists of CSS
attributes, it only lists inline CSS styles in that document. External style-sheet rules aren’t
seen if they apply to a given element.

To access such properties, it is an attribute of the Element object.


I.e., document.querySelector(“.aClass”).style.color = “green”;
It is best practice to add and remove CSS classes to change styles within a webpage. This
separates the style and interactivity sections more and is thus easier to manage.

Events
In Javascript functions can be attached to run when a certain event is thrown by the
browser. An event can be any action the browser detects. Example may be, moving the
mouse, clicking a button, moving the mouse in a certain HTML element etc. The function can
be attached several ways, one way could be “[the element].onclick = func;”.
Usually the way these should be added is with the addEventListener() function. This allows
adding of multiple functions to listen on one event, as with the prior method, only one can
listen.
The call could go something like this “[the element].addEventListener(“click”,func,false);”.
The last parameter is usually always going to be false and describes how the object will be
caught and sent to the function (if it’s required).
If func has a parameter in it with the previous call, that parameter will be the event object
generated, when the event was thrown. It will contain event specific information.

Sometimes it may be desired to pass the object that threw the event, to the function. To do
this a clever work-around is required. The function to add must be wrapped around an
anonymous function and “this” must be passed as a parameter to the function. For instance:

[theElement].addEventListener(“click”,function(){ func(this); },false);

This makes it so that the object that threw the event will be passed. As in the context of the
anonymous function, the “this” object that is calling the function, is the object that threw
the event.

You can also pass in the event object throw too, with:

[theElement].addEventListener(“click”,function(e){ func(this,e); },false);

Just including e as a parameter to the anonymous function and throwing it inside the func.

You might also like