JavaScript provides core functionality for web pages and applications. It has a C-like syntax and is dynamically typed. JavaScript code runs on both the client-side in web browsers and the server-side in environments like Node.js. It uses prototype-based inheritance where objects can inherit properties from object prototypes. New features are being added regularly through the ECMAScript specification. JavaScript allows DOM manipulation to modify web pages and event handling for user interactions.
Functions being first-class citizens in JavaScript offers developers a tremendous amount power and
flexibilty. However, what good is all this power if you don't know how to harness it?
This talk will provide a thorough examination of JavaScript functions. Topics
that will be covered in this talk are:
* Functions are objects
* Execution Context and the Scope Chain
* Closures
* Modifying Context
* The Various Forms of Functions.
Attendees will leave this talk understanding the power of JavaScript functions and the knowledge to apply new
techiques that will make their JavaScript cleaner, leaner and more maintainable.
In JS: CLASS <=> Constructor FN
new FN() => FN() { this }
FN = CLASS (FN = FN, FN = DATA)
Objects
Prototype / __proto__
Inheritence
Rewriting / Augmenting
built in objects
this talk is about some of the features of Javascript that are not always good understood by developers like me (that are mainly back-end and work mainly in c# or Java)
Powerful JavaScript Tips and Best PracticesDragos Ionita
Javascript Best Practices, IIFE, Immediately invoked function expressions, typeof, instanceof, constructor, random items from an array, generate an array of numbers, append an array to another array, is a number, is an array, remove an item from an array
There are several JavaScript libraries available in the world of web programming. And, as the usage and complexity is increasing day by day, sometimes it becomes very difficult and confusing to understand and create modules using those libraries, especially for those having strong background of Object Oriented Languages.
So this one hour session will make an effort to go into the very basics of JavaScript and put a base for writing modular JavaScript code.
This is the slide for what I shared in JS Group meetup, 2014, Taiwan. It covers what JavaScript could do for making the program more "functional", the benefits, price and the limitation.
Swift is not only a new programming language to develop software for all Apple products, but it brought a new approach to the iOS development as well. This report is about it. Less theory, maximum of examples.
Agenda:
1. Protocols in Swift vs Objective-C
2. Protocol-oriented programming approach.
3. Abstract example of POP approach
4. UIKit example of POP approach
5. Foundation example of POP approach.
JavaScript language plays a very important role in Web 2.0 application development. JavaScript has its own characteristics different than object-oriented languages and it's not easy for developers to understand.
This presentation covers major advanced topics in JavaScript languages, including prototype chain, identifier resolving, "this" keyword, "new" operator, execution context and scope chain and closure. Besides that, it also covers best practices when using JavaScript.
An introductory presentation I'm doing at my workplace for other developers. This is geared toward programmers that are very new to javascript and covers some basics, but focuses on Functions, Objects and prototypal inheritance ideas.
AngularJS with TypeScript and Windows Azure Mobile ServicesRainer Stropek
In the coming two weeks I will do a series of talks at various conferences in Austria and Germany. I will speak about AngularJS, TypeScript, and Windows Azure Mobile Services. In this blog post I publish the slides and the sample code.
Functions being first-class citizens in JavaScript offers developers a tremendous amount power and
flexibilty. However, what good is all this power if you don't know how to harness it?
This talk will provide a thorough examination of JavaScript functions. Topics
that will be covered in this talk are:
* Functions are objects
* Execution Context and the Scope Chain
* Closures
* Modifying Context
* The Various Forms of Functions.
Attendees will leave this talk understanding the power of JavaScript functions and the knowledge to apply new
techiques that will make their JavaScript cleaner, leaner and more maintainable.
In JS: CLASS <=> Constructor FN
new FN() => FN() { this }
FN = CLASS (FN = FN, FN = DATA)
Objects
Prototype / __proto__
Inheritence
Rewriting / Augmenting
built in objects
this talk is about some of the features of Javascript that are not always good understood by developers like me (that are mainly back-end and work mainly in c# or Java)
Powerful JavaScript Tips and Best PracticesDragos Ionita
Javascript Best Practices, IIFE, Immediately invoked function expressions, typeof, instanceof, constructor, random items from an array, generate an array of numbers, append an array to another array, is a number, is an array, remove an item from an array
There are several JavaScript libraries available in the world of web programming. And, as the usage and complexity is increasing day by day, sometimes it becomes very difficult and confusing to understand and create modules using those libraries, especially for those having strong background of Object Oriented Languages.
So this one hour session will make an effort to go into the very basics of JavaScript and put a base for writing modular JavaScript code.
This is the slide for what I shared in JS Group meetup, 2014, Taiwan. It covers what JavaScript could do for making the program more "functional", the benefits, price and the limitation.
Swift is not only a new programming language to develop software for all Apple products, but it brought a new approach to the iOS development as well. This report is about it. Less theory, maximum of examples.
Agenda:
1. Protocols in Swift vs Objective-C
2. Protocol-oriented programming approach.
3. Abstract example of POP approach
4. UIKit example of POP approach
5. Foundation example of POP approach.
JavaScript language plays a very important role in Web 2.0 application development. JavaScript has its own characteristics different than object-oriented languages and it's not easy for developers to understand.
This presentation covers major advanced topics in JavaScript languages, including prototype chain, identifier resolving, "this" keyword, "new" operator, execution context and scope chain and closure. Besides that, it also covers best practices when using JavaScript.
An introductory presentation I'm doing at my workplace for other developers. This is geared toward programmers that are very new to javascript and covers some basics, but focuses on Functions, Objects and prototypal inheritance ideas.
AngularJS with TypeScript and Windows Azure Mobile ServicesRainer Stropek
In the coming two weeks I will do a series of talks at various conferences in Austria and Germany. I will speak about AngularJS, TypeScript, and Windows Azure Mobile Services. In this blog post I publish the slides and the sample code.
Forget about Web standards and go way beyond the usual capabilities of Web scripting languages. Learn how to create stunning effects using canvas/svg/vml, how to control animated graphics in JavaScript, and how to merge all kinds of standards and technologies to create a whole new world of possibilities. Using Paul\'s latest project as an example, he shows you how to adapt the things he talks about into new projects, featuring his new JavaScript game engine.
Paul demonstrates how to control animated graphics in the browser, how to scale and rotate elements smoothly, and how to combine canvas, svg and filters with CSS to adapt new standards in browsers that don\'t support them. See how to move physics from the real world to the Web browser.
This was my presentation on JavaScript Animation for Silicon Valley Code Camp 09. You get the material from http://my/personal/rbiggs/Blog/default.aspx
From DOM (Document Object Model) to HTML and CSS, with a MDC (Mozilla Developer Center) Re-introduction to JavaScript, to jQuery selectors, events and effects, plugins and comparison.
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...GITS Indonesia
Salah satu front-end developer GITS Indonesia, Warsono, mengisi workshop di universitas, mengenai Vue.js.
Ikuti kami di kanal berikut, agar tidak ketinggalan acara seru:
Instagram: @gitsindonesia
LinkedIn: GITS Indonesia
Website: gits.id
The next version of JavaScript, ES6, is starting to arrive. Many of its features are simple enhancements to the language we already have: things like arrow functions, class syntax, and destructuring. But other features will change the way we program JavaScript, fundamentally expanding the capabilities of the language and reshaping our future codebases. In this talk we'll focus on two of these, discovering the the myriad possibilities of generators and the many tricks you can pull of with template strings.
Design Summit - UI Roadmap - Dan Clarizio, Martin PovolnyManageIQ
The UI, while fullty-features, is intimidating to new users. The roadmap for the UI is to make it more intuitive and navigable for new users.
For more on ManageIQ, see http://manageiq.org/
The important parts of the front end development sphere including CSS3, advanced JavaScript, libraries such as jQuery, RequireJS and Promises. And finally, chrome developer tools for successful debugging and editing.
Dans cette présentation, je vous propose de découvrir ensemble d’autre façon de développer en Java et Java 8 en particulier, mais que peu ont testé. Est-il possible de limiter le nombre de sous-classes pour une classe ? Si on peut désormais mettre un comportement dans une interface, peut-on y mettre un état ? Et peut-on sécuriser la grammaire de ses DSL internes ? Live coding à l’appui, voici certaines des questions auxquelles nous allons essayer de répondre ou qu’on ne devrait jamais aborder.
Dans cette présentation, je vous propose de découvrir ensemble ce qu’il est vraiment possible d’exprimer avec Java 8 et que peu ont testé. Est-il possible de limiter le nombre de sous-classes pour une classe ? Si on peut désormais mettre un comportement dans une interface, peut-on y mettre un état ? Live coding à l’appui, voici certaines des questions auxquelles nous allons essayer de répondre ou qu’on ne devrait jamais aborder.
Code : https://gist.github.com/fsarradin/bea95af73651a57c1112
FLATMAP ZAT SHIT : les monades expliquées aux geeks (Devoxx France 2013)François Sarradin
Vous commencez à peine dans la programmation fonctionnelle avec Scala, Java 8, CoffeeScript, etc. et on vous sort déjà des noms à dormir debout. Parmi ceux-ci, il en a un qui fait la joie des Scalaïstes les plus velus : je veux parler des monades.
Dans cette session, je vous propose de découvrir ce qu'est une monade, à quoi ça sert et est-ce qu'il y a un intérêt de les étudier... ou pas ! La présentation qui contient plus de code que de slides se fera autour de deux langages : Java 8 et Scala.
6. JavaScript Syntax
Looks like Java / C++
/* Factorial of n. */
function fact(n) {
// result of fact
var result = 1;
for (var i = 1; i <= n; i++) {
result *= i;
}
return result;
}
7. JavaScript
Is dynamically typed
var x = 1; // it should be an int
var s = "a"; // string or char?
// it's a function, (type of p?
// does it return something?)
function f(p) { /* ... */ }
var g; // anything (even a function)
8. JavaScript
Has bad parts
42 == '42' !== 42
if (false) <-> if (null) <-> if (undefined)
false != null == undefined
false !== null !== undefined
return
{
prop: "val"
};
Use an editor providing validation with JSLint
9. JavaScript
Has few built-in types
● Boolean true / false
● Number 42 21.6 NaN +∞ -∞
● String "hi" 'hello'
● Date java-like
● Regexp /^.*([0-9]+)w{2,3}$/
● Object {prop: val}
● Array [a, b] (it's just an Object)
● Function function() {}
● List, Map, Set: where are you? => ES 6
10. JavaScript
Can define functions
// function declaration (statement)
function f(x) { /* ... */ }
// function expression (operator)
var f = function(x) { /* ... */ };
// Function constructor
var f = new Function('x', '...');
11. JavaScript
CAN HAZ FUNCTIONZ EVERYWHERE
function compose(f, g) {
// BTW, this is a closure!
// more on that later
return function(x) {
return f(g(x));
};
}
compose(square, add_one)(10);
12. JavaScript
Function: scope & binding
var o = {
name: "an object",
logName: function() { log(this.name); }
};
// o.logName can be assigned to a variable:
var logN = o.logName;
logN();
// another way to give o the logName method
function ln() { log(this.name); }
var o = { name: "an object" };
o.logName = ln;
13. JavaScript
Function: scope & binding
// what is the value of 'this'?
var o = { /* ... */
logName: function() { log(this.name); }
};
// here it obviously refers to o
o.logName();
// what about the following?
function ln() { log(this.name); }
ln(); // er...
14. JavaScript
Function: scope & binding
● this = object to wich the function is bound
○ By default: the global object (window in browsers)
● Change the way a function is bound to an
object: apply or call
24. Prototype-oriented programming
Create an instance
// Object.create(): JS 1.8.5 and +
if (!Object.create) {
Object.create = function(o) {
// creates new temp. constructor
function F() {}
// gives it o as prototype
F.prototype = o;
// instantiates
return new F();
};
}
25. Prototype-oriented programming
Classes in JS
// previous example could have been written:
var Vehicle = { /* desc, startEngine */ };
function Car(desc) { this.description = desc; }
Car.prototype = Vehicle;
Car.prototype.description = "some car";
Car.prototype.wheelCount = 4;
var myPigeot = new Car("My Pigeot");
myPigeot.model = "403";
26. Prototype-oriented programming
New in JS
Er... Car is a functions, but I can new it?!
● new is a keyword that
1. Allocates an object
2. Inits this object with constructor
● new Car("some car") is equivalent to
var car = {};
car.__proto__ = Car.prototype;
Car.call(car, "some car");
27. Prototype-oriented programming
Last word about constructor functions
What happens when calling the Car
constructor without new?
this is bound to global object
Want to play this game?
○ Change window.location and you'll risk a crash
28. Prototype-oriented programming
Last but not least
● Be carefull with this and new
● Factory method instead of new
function createCar(d) { return new Car(d); }
● Prevent bad usage of your constructor
function Car(desc) {
if (!(this instanceof Car)) {
return new Car(desc);
}
/* ... */
}
29. Prototype-oriented programming
Private members
var Entity = (function() { // class lvl
var counter = 0; // private
return function() { // instance lvl
var id = counter++; // private
this.getId = function() {
return id;
}
};
})();
31. Access to Your Web Page
DOM manipulation
DOM != JS, it's another API
No need for jQuery
○ getElementById()
○ getElementByTagName()
○ getElementByName()
○ getElementByClassName() // !IE
○ querySelector() // IE 8
○ querySelectorAll() // IE 8
32. Access to Your Web Page
DOM manipulation: tips
● know your CSS selectors
○ #element
○ .element
○ [attribute=value]
● limit changes to the DOM
○ use fragments
35. References
Online
Doug Crockford, JavaScript: The Good Parts
http://googlecode.blogspot.com/2009/03/doug-crockford-
javascript-good-parts.html
Alex Russel, Learning to Love JavaScript
http://www.google.com/events/io/2011/sessions/learning-to-
love-javascript.html
John Resig, Learning Advanced JavaScript
http://ejohn.org/apps/learn/
Mozilla, JavaScript Reference
https://developer.mozilla.org/en/JavaScript/Reference/