Webinar Javascript

Yazar: borsoft · 26 Aralık 2015

Selamlar;

Öncelikle webinar’a katılan tüm arkadaşlara teşekkür ederim. 25 Aralık 2015 Saat: 20.00 itibari ile bu yılın son webinarını yaptım. Javascript’i derinlemesine birçok küçük örnek kodlayarak inceledik. Umarım sizin için faydalı olmuştur. Kaçıran arkadaşlar için webinar kaydı ve kodları aşağıdadır.

Konular:

Kendimi tanıtım ve boş bir web form oluşturma.
RunTime, Execution.
Contexts, Types&Operators.
Objects ve Functions.
Object Oriented ve Prototype.
Object oluşturma.
Bind, Call ve Apply.
Sorular, cevaplar ve kapanış.

Kaynaklar:

JavaScript: The Good Parts(Douglas Crockford).
JavaScript Patterns( Stoyan Stefanov) .
JavaScript:Understanding the Weird Parts(Anthony Alicea).
http://underscorejs.org/
http://www.w3schools.com/js/

Function ve Değişkenlerim RunTime’da Memoride Tutulma Şekline Bağlı Örnek:

var Person = {
    name: 'Bora',
    SurName: 'Kasmer',
    Sex: 'Male',
    Parent: {
        Mother: 'Ozlem',
        Father: 'Erdinc',
        TCNO:12344
    }
}

WriteName();
console.log(say);
function WriteName()
{
    console.log(Person.name + ' ' + Person.SurName);
}
var say = 'Wellcome To Webinar';


function b()
{
    var myVar;
    console.log(myVar);
}
function a()
{    
    console.log(myVar);
    //var myVar;
    b();
}

var myVar = 1;
a();
console.log(myVar);


function a()
{
    function b()
    {
        console.log(myVar);
    }
    myVar = 2;
    b();
}
var myVar = 1;
a();
b();

var Person = {

SurName: 'Kasmer',

Sex: 'Male',

Parent: {

Mother: 'Ozlem',

Father: 'Erdinc',

TCNO:12344

}

WriteName();

console.log(say);

function WriteName()

{

console.log(Person.name + ' ' + Person.SurName);

}

var say = 'Wellcome To Webinar';

function b()

{

var myVar;

console.log(myVar);

}

function a()

{

console.log(myVar);

//var myVar;

b();

}

var myVar = 1;

a();

console.log(myVar);

function a()

{

function b()

{

console.log(myVar);

}

myVar = 2;

b();

}

var myVar = 1;

a();

b();

Çalışma Zamanları:

function waitThreeSeconds()
{
    var ms = 3000 + new Date().getTime();
    while (new Date() < ms) { }
    console.log("Action Finished");
}
function clickHandler()
{
    console.log('click event!');
}

document.addEventListener('click', clickHandler);
waitThreeSeconds();
console.log('Finish Execution');

function waitThreeSeconds()

{

var ms = 3000 + new Date().getTime();

while (new Date() < ms) { }

console.log("Action Finished");

}

function clickHandler()

{

console.log('click event!');

}

document.addEventListener('click', clickHandler);

waitThreeSeconds();

console.log('Finish Execution');

Değişkenleri “true”, “false” Karşılığ ve Default Parametre Atama:

var a;
a = "";
a = 0;
a = "OK";
a = 1;
if (a) { console.log("It is working");}


console.log(null || 1);
console.log(false || true);
console.log(null || "Hello");
console.log("abc" || "def");


function Hello(name)
{
    var name = name || 'Bora';
    console.log("Hello " + name);
}
Hello();
Hello('Duru');
Hello(0);

var a;

a = "";

a = 0;

a = "OK";

a = 1;

if (a) { console.log("It is working");}

console.log(null || 1);

console.log(false || true);

console.log(null || "Hello");

console.log("abc" || "def");

function Hello(name)

{

var name = name || 'Bora';

console.log("Hello " + name);

}

Hello();

Hello('Duru');

Hello(0);

Functionların Çağrılma Şekilleri ve “This” Anahtar Kelimesi:

var callFunction = function (a)
{
    console.log(a);
}
callFunction.Name = 'Bora Kasmer';
callFunction(5);
console.log(callFunction.Name);


var callFunction = function (a)
{
    a();
}

callFunction(function () {
    var webinar = {
        Unit: 'Javascript',
        Speaker: 'Bora KAŞMER'
    }
    console.log(webinar.Speaker);
    console.log(webinar.Unit);
});


var b = function () {
    console.log(this);
}
var c = {
    name: 'First Name',
    log: function () {
        var self = this;
        this.name = 'C object name Updated';
        console.log(this);

        var updateIsim = function (_name)
        {
            console.log(this);
            //this.name = _name;
            self.name = _name;
        }
        updateIsim('Bora');
        console.log(this);
    }
}
//b();
c.log();
console.log(this);

var callFunction = function (a)

{

console.log(a);

}

callFunction.Name = 'Bora Kasmer';

callFunction(5);

console.log(callFunction.Name);

var callFunction = function (a)

{

a();

}

callFunction(function () {

var webinar = {

Unit: 'Javascript',

Speaker: 'Bora KAŞMER'

}

console.log(webinar.Speaker);

console.log(webinar.Unit);

});

var b = function () {

console.log(this);

}

var c = {

log: function () {

var self = this;

this.name = 'C object name Updated';

console.log(this);

var updateIsim = function (_name)

{

console.log(this);

//this.name = _name;

self.name = _name;

}

updateIsim('Bora');

console.log(this);

}

//b();

c.log();

console.log(this);

Arguments ve Parametreler:

function record(name, surname, lang)
{
    lang = lang || 'en';
    if (arguments.length === 0)
    {
        console.log(lang);
        console.log("There is no Parameters");
    }
    else if (arguments.length == 2)
    {
        console.log(arguments[1]);
    }
}

record();
record('Bora', 'Kasmer');

function record(name, surname, lang)

{

lang = lang || 'en';

if (arguments.length === 0)

{

console.log(lang);

console.log("There is no Parameters");

}

else if (arguments.length == 2)

{

console.log(arguments[1]);

}

record();

record('Bora', 'Kasmer');

Function Tetiklenme(Trigger) Şekilleri:

var prm = 'Bora';
var hello = function (name) {
    return ("Hello " + name);
}(prm);
console.log(hello);

var name = 'Bora';
(function (name) {
    var say = 'Hello';
    console.log(say + ' ' + name);
})(name);

var say = 'Hello People';
(function (global, name) {
    //window.say = 'Hey ';
    var say = 'Hello';
    console.log(say + ' ' + name);
})(window, 'Bora');
console.log(say + ' Bora');


function hello(name)
{
    return function (say) {
        console.log(name + ' ' + say);
    }
}
hello('Bora ')('hello');

var say = hello('Bora');
say('Webinar soo good');

var prm = 'Bora';

var hello = function (name) {

return ("Hello " + name);

}(prm);

console.log(hello);

var name = 'Bora';

(function (name) {

var say = 'Hello';

console.log(say + ' ' + name);

})(name);

var say = 'Hello People';

(function (global, name) {

//window.say = 'Hey ';

var say = 'Hello';

console.log(say + ' ' + name);

})(window, 'Bora');

console.log(say + ' Bora');

function hello(name)

{

return function (say) {

console.log(name + ' ' + say);

}

hello('Bora ')('hello');

var say = hello('Bora');

say('Webinar soo good');

Bir Function’ın Dizi(Array) İçinde Çağrılma Zamanı ve Optimizasyonu:

function buildFunction() {
    var arr = [];
    for (var i = 0; i < 3; i++) {
        arr.push(
                function () {
                    console.log(i);
                });
    }
    return arr;
}
var fs = buildFunction();
fs[0]();
fs[1]();
fs[2]();


function buildFunction()
{
    var arr = [];
    for (var i = 0; i < 3; i++)
    {        
        arr.push(
                function (j) {
                    return function () {
                        console.log(j);
                    }
                }(i));
    }
    return arr;
}
var fs = buildFunction();
fs[0]();
fs[1]();
fs[2]();

function buildFunction() {

var arr = [];

for (var i = 0; i < 3; i++) {

arr.push(

function () {

console.log(i);

});

}

return arr;

}

var fs = buildFunction();

fs[0]();

fs[1]();

fs[2]();

function buildFunction()

{

var arr = [];

for (var i = 0; i < 3; i++)

{

arr.push(

function (j) {

return function () {

console.log(j);

}

}(i));

}

return arr;

}

var fs = buildFunction();

fs[0]();

fs[1]();

fs[2]();

Functional Programlamaya Giriş:

var say = 'Bora';
function DoIt(callBack) {
    callBack();
}
DoIt(function () {
    console.log('This is done');
});
DoIt(function () {
    setTimeout(function () {
        console.log('Timer finish ' + say);
    }, 3000)
});


var Person = {
    name: 'Bora',
    surName: 'Kasmer',
    getFullName: function () {
        var name = this.name + ' ' + this.surName;
        return name;
    }
}

var logName = function (lang1, lang2)
{
    console.log("Log:" + this.getFullName());
    console.log("Arguments:" + arguments[0] + ' ' + (arguments[1] ||'en'));
}

var say = 'Bora';

function DoIt(callBack) {

callBack();

}

DoIt(function () {

console.log('This is done');

});

DoIt(function () {

setTimeout(function () {

console.log('Timer finish ' + say);

}, 3000)

});

var Person = {

surName: 'Kasmer',

getFullName: function () {

var name = this.name + ' ' + this.surName;

return name;

}

var logName = function (lang1, lang2)

{

console.log("Log:" + this.getFullName());

console.log("Arguments:" + arguments[0] + ' ' + (arguments[1] ||'en'));

}

Bind, Call, Apply:

//a Bind
var logPerson = logName.bind(Person);
logPerson('tr');

//b call
logName.call(Person, 'tr', 'en');
logName.apply(Person, ['tr', 'en']);


var person2 = {
    name:'Duru',
    surName: 'Kasmer'
}
console.log(Person.getFullName.apply(person2));


function multiple(a, b)
{
    console.log('a:' + a);
    console.log('b:' + b);
    console.log(a*b);
}

var multipleClass = multiple.bind(this, 2);
multipleClass(4);

//a Bind

var logPerson = logName.bind(Person);

logPerson('tr');

//b call

logName.call(Person, 'tr', 'en');

logName.apply(Person, ['tr', 'en']);

var person2 = {

name:'Duru',

surName: 'Kasmer'

}

console.log(Person.getFullName.apply(person2));

function multiple(a, b)

{

console.log('a:' + a);

console.log('b:' + b);

console.log(a*b);

}

var multipleClass = multiple.bind(this, 2);

multipleClass(4);

Functional Programming:

var arr1 = [1, 2, 3];
console.log(arr1);
var arr2 = [];
for (var i = 0; i < arr1.length; i++)
{
    arr2.push(arr1[i]);
}
console.log(arr2);


var arr1 = [1, 2, 3];
function mapForEveryItem(arr, fn)
{
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        newArr.push(fn(arr[i]));
    }
    return newArr;
}
arr2 = mapForEveryItem(arr1, function (item) {
    return item * 2;
});
console.log(arr2);

arr3 = mapForEveryItem(arr1, function (item) {
    return item > 2;
});
console.log(arr3);

var checkPastLimit = function (limit, item)
{
    return item > limit;
}
var arr4 = mapForEveryItem(arr1, checkPastLimit.bind(this, 2));
console.log(arr4);

function checkPastLimitSimple(limit)
{
    return function (limit, item) {
        return item > limit;
    }.bind(this, limit);
}

var arr5 = mapForEveryItem(arr1, checkPastLimitSimple(3));
console.log(arr5);

var arr1 = [1, 2, 3];

console.log(arr1);

var arr2 = [];

for (var i = 0; i < arr1.length; i++)

{

arr2.push(arr1[i]);

}

console.log(arr2);

var arr1 = [1, 2, 3];

function mapForEveryItem(arr, fn)

{

var newArr = [];

for (var i = 0; i < arr.length; i++) {

newArr.push(fn(arr[i]));

}

return newArr;

}

arr2 = mapForEveryItem(arr1, function (item) {

return item * 2;

});

console.log(arr2);

arr3 = mapForEveryItem(arr1, function (item) {

return item > 2;

});

console.log(arr3);

var checkPastLimit = function (limit, item)

{

return item > limit;

}

var arr4 = mapForEveryItem(arr1, checkPastLimit.bind(this, 2));

console.log(arr4);

function checkPastLimitSimple(limit)

{

return function (limit, item) {

return item > limit;

}.bind(this, limit);

}

var arr5 = mapForEveryItem(arr1, checkPastLimitSimple(3));

console.log(arr5);

__proto__(Türetme):

var Person = {
    firstName: 'Bora',
    lastName: 'KAŞMER',
    getFullName: function () {
        return this.firstName + ' ' + this.lastName;
    }
}
var secil = {
    firstName: 'Secil',
    //lastName:'xxxxx'
}
secil.__proto__ = Person;
console.log(secil.getFullName());
for (prop in secil)
{
    if (secil.hasOwnProperty(prop))
    {
        console.log(prop + ":" + secil[prop]);
    }
}

var Person = {

firstName: 'Bora',

lastName: 'KAŞMER',

getFullName: function () {

return this.firstName + ' ' + this.lastName;

}

var secil = {

firstName: 'Secil',

//lastName:'xxxxx'

}

secil.__proto__ = Person;

console.log(secil.getFullName());

for (prop in secil)

{

if (secil.hasOwnProperty(prop))

{

console.log(prop + ":" + secil[prop]);

}

UnderscoreJS’e Giriş:

var duru = {
    TcNo:1212121
}
_.extend(duru, Person, secil);
console.log(duru);
_.extend(duru, secil, Person);
console.log(duru);


var arr = [1, 2, 3];
var newArr = _.map(arr, function (item) { return item * 3 });
console.log(newArr);

var arrDouble = _.filter([1, 2, 3, 4, 5, 6, 7, 8], function (item) { return item % 2 == 0 });
console.log(arrDouble);

var duru = {

TcNo:1212121

}

_.extend(duru, Person, secil);

console.log(duru);

_.extend(duru, secil, Person);

console.log(duru);

var arr = [1, 2, 3];

var newArr = _.map(arr, function (item) { return item * 3 });

console.log(newArr);

var arrDouble = _.filter([1, 2, 3, 4, 5, 6, 7, 8], function (item) { return item % 2 == 0 });

console.log(arrDouble);

Javascript’e Prototype:

function Person(firstName,lastName) {
    console.log(this);
    this.firstName = firstName;
    this.lastName = lastName;
    console.log("Function trigerd");
}
var Bora = new Person('Bora','Kasmer');
console.log(Bora);
var Duru = new Person('Duru', 'Baby');
console.log(Duru);

Person.prototype.getFullName = function () {
    return this.firstName + ' ' + this.lastName;
}
console.log(Bora.getFullName());


String.prototype.isLengthGreaterThan = function (limit)
{
    return this.length > limit;
}
console.log("Bora".isLengthGreaterThan(3));

Number.prototype.isPositive = function () { return this > 0; }
var a = 5;
var b = -2;
console.log(a.isPositive());
console.log(b.isPositive());

function Person(firstName,lastName) {

console.log(this);

this.firstName = firstName;

this.lastName = lastName;

console.log("Function trigerd");

}

var Bora = new Person('Bora','Kasmer');

console.log(Bora);

var Duru = new Person('Duru', 'Baby');

console.log(Duru);

Person.prototype.getFullName = function () {

return this.firstName + ' ' + this.lastName;

}

console.log(Bora.getFullName());

String.prototype.isLengthGreaterThan = function (limit)

{

return this.length > limit;

}

console.log("Bora".isLengthGreaterThan(3));

Number.prototype.isPositive = function () { return this > 0; }

var a = 5;

var b = -2;

console.log(a.isPositive());

console.log(b.isPositive());

Object.create:

var person = {
    firtName: 'Default',
    lastName: 'Default',
    great:function(){return "Thank your for came to my webinar"}
}

var bora = Object.create(person);
bora.firtName = 'Bora';
bora.lastName = 'Kasmer';
console.log(bora.great());

var person = {

firtName: 'Default',

lastName: 'Default',

great:function(){return "Thank your for came to my webinar"}

}

var bora = Object.create(person);

bora.firtName = 'Bora';

bora.lastName = 'Kasmer';

console.log(bora.great());

Böylece geldik bir webinarın daha sonuna. Bu webinarda Javascript’i detaylı inceledik.

Yeni bir webinarda görüşmek üzere hepinize hoşçakalın.

Source Code: https://github.com/borakasmer/JavascriptWebinar

Ramazan dedi ki:

28 Aralık 2015, 23:57

Yine harika bir paylaşım webinere katılamadığım için üzülmüştüm. Teşekkür ederim :)

Cevapla
- borsoft dedi ki:
  
  5 Ocak 2016, 00:38
  
  Ben Teşekkür ederim :)
  
  Cevapla
Uğur Öztekin dedi ki:

18 Ocak 2016, 11:49

teşekkürler.. ben de javascript e sağlam şekilde girmek istiyorum öneriniz var mıdır?

Cevapla
- borsoft dedi ki:
  
  18 Ocak 2016, 23:33
  
  Selam Uğur;
  
  Şu eğitime bir bak derim. Senin için özellikle Jquery kısmına. Bakalım tanıdık birilerini görebilecek misin?
  https://www.acikakademi.com/portal/egitimler/html-css-js.aspx
  
  İyi çalışmalar.
  
  Cevapla

Webinar Javascript

Bunlar da hoşunuza gidebilir...

4 Cevaplar

Bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler

Webinar Javascript

Bunlar da hoşunuza gidebilir...

Mvc ile Gelişmiş Arama

CRUD – AngularJS ile MVC 6

The Chain of Responsibility Pattern

4 Cevaplar

Bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler