bmstu.py lecture 4

aori.ru

			bmstu.py
		

Лекция

Javascript

Основные типы данных

Особенности системы типов в JS

Пример

				var foo = "1";
				var bar = new String("1");
				console.log(foo, bar); // Выведет "1", "1"
				console.log(foo == bar);
				console.log(foo === bar);
				console.log(typeof foo);
				console.log(typeof bar);
			

Пример

				var foo = "1";
				var bar = new String("1");
				console.log(foo, bar); // Выведет "1", "1"
				console.log(foo == bar); // Выведет true
				console.log(foo === bar);
				console.log(typeof foo);
				console.log(typeof bar);
			

Пример

				var foo = "1";
				var bar = new String("1");
				console.log(foo, bar); // Выведет "1", "1"
				console.log(foo == bar); // Выведет true
				console.log(foo === bar); // Выведет false
				console.log(typeof foo);
				console.log(typeof bar);
			

Пример

				var foo = "1";
				var bar = new String("1");
				console.log(foo, bar); // Выведет "1", "1"
				console.log(foo == bar); // Выведет true
				console.log(foo === bar); // Выведет false
				console.log(typeof foo); // Выведет "string"
				console.log(typeof bar);
			

Пример

				var foo = "1";
				var bar = new String("1");
				console.log(foo, bar); // Выведет "1", "1"
				console.log(foo == bar); // Выведет true
				console.log(foo === bar); // Выведет false
				console.log(typeof foo); // Выведет "string"
				console.log(typeof bar); // Выведет "object"
			

Области видимости

Пример

				console.log(window === this); // true - значит мы в глобальном скоупе
				var global = "global";
				(function () { //Immediate Invoked Function Expression
				
var foo = 1;
console.log(foo); // 1
console.log(global); // "global"
})(); console.log(foo); // ReferenceError
				console.log(window === this); // true - значит мы в глобальном скоупе
				var global = "global";
				(function () { //Immediate Invoked Function Expression
				
var foo = 1;
console.log(foo); // 1
console.log(global); // "global"
(function () {
var bar = 2;
console.log(bar); // 2
console.log(foo); // 1
console.log(global); // "global"
})();
console.log(bar); //ReferenceError
})(); console.log(locallyScoped); // ReferenceError

Приведение типов в JS

Типы, которые приводятся к false

				Boolean(0); // false
				Boolean(""); // false
				Boolean(undefined); //false
				Boolean(null); //false
				Boolean(false); //false
			

Типы, которые приводятся к true

				Boolean(1); //true
				Boolean("non zero length string"); //true
				Boolean(true); //true
				Boolean({}); //true
				Boolean([]); //true
			

JSON

JSON

				var complexObject = {
					
"foo": 1,
"bar": "string",
func: function () {}, // Нестрогое задание одного из свойств (без кавычек)
"baz": {
"bazA": 1,
"bazB": false,
"bazC": {...}
}
};

Функции

Контекст исполнения

				var t = function () {
					
console.log(this);
}; t(); // Выведет Window var foo = {}; t.call(foo); // Выведет {}; t.apply(foo); // Выведет {}; var bound = t.bind(foo); // Создаст новую функцию, у которой контекстом будет foo bound(); // Выведет {};

DOM API в Javascript

Событийная модель

Пример

				var t = document.querySelector("button.click-me");
				t.addEventListener("click", function () { //DOM Level 2
					//...
				});
				t.attachEvent("onclick", function () { //IE > 9
					//...
				});
				t.onclick = function () { //DOM Level 0
					//...
				};
			

Всплытие и погружение

jQuery

Vanilla JS

				var elementsCollection = document.body.querySelectorAll("div"); //NodeList
				for (var i=0, l = elementsCollection.length, node; i < l; i++) {
					
node = elementsCollection[i];
node.className = node.className !== "" ?
node.className.split(" ").push("myClass").join(" ") :
"myClass";
if (/$(some|other)/.test(node.getAttribute("my-attribute")) {
if (node.addEventListener) {
node.addEventListener("click", function () {...});
} else if (node.attachEvent) {
node.attachEvent("onclick", function () {...});
}
}
}

Пример с использованием jQuery

				var jqueryObjectCollection = jQuery("div");
				jqueryObjectCollection.each(function (index) {
					
var $node = $(this);
$node.addClass("myClass");
if (/$(some|other)/.test($node.prop("my-attribute"))) {
$node.on("click", function (e) {
//...
});
}
});

Vanilla JS AJAX

				
var XMLHttpFactories = [
function () {return new XMLHttpRequest()},
function () {return new ActiveXObject("Msxml2.XMLHTTP")},
function () {return new ActiveXObject("Msxml3.XMLHTTP")},
function () {return new ActiveXObject("Microsoft.XMLHTTP")}
];
function createXMLHTTPObject() {
var xmlhttp = false;
for (var i=0;i<gt;XMLHttpFactories.length;i++) {
try {
xmlhttp = XMLHttpFactories[i]();
} catch (e) {
continue;
}
...
}
return xmlhttp;
}

Jquery AJAX

				
jQuery.ajax({
type: "POST",
data: JSON.stringify({
myKey: 1
}),
url: "testsite.com/api"
});

Управление командой разработчиков

(да, разработчики должны это знать)

Agile - подходы к созданию продуктов, путём непрерывной быстрой поставки ценного рабочего функционала самоорганизованной командой профессионалов в сотрудничестве с заказчиком.

Борис Вольфсон

Scrum

Agile