bmstu.py lecture 10

aori.ru

			bmstu.py
		

Лекция

Еще немного о javascript

Снова об областях видимости

Пример

				function test () {
						global = "123"; // без var - глобальная переменная
				};
				test();
				console.log(window.global); // "123";
			

Пример

				function test {
					var local = "123";
				}
				test();
				console.log(window.global); // "undefined"
			

Локальная область видимости

Пример

				function foo () {
						var t = 1; // Переменная в скоупе функции, доступна только внутри foo
						console.log(t); // 1
				}
					foo();
				console.log(t);
			

Пример

				function foo () {
						var t = 1;
						function bar () {
								var baz = 2;
								console.log(t); // 1
								console.log(baz); // 2
						};
					 
						bar();
						console.log(t); // 1
						console.log(baz); // ReferenceError
				}
			

Javascript ООП

Использование функции как конструктора

				function MyClass () {
						this.test = "test";
				}
				
				MyClass();
				console.log(window.test); // Выведет test, т.к. по
						  // дефолту контекст исполнения - window
				var myInstance = new MyClass();
				console.log(myInstance.test); // "test"
			

Наследование в JS

Пример prototype lookup

				function MyClass () {}

				MyClass.prototype.foo = 1;
				MyClass.prototype.bar = function () {
						console.log(123);
				}
				
				var myInstance = new MyClass();
				console.log(myInstance.foo); // 1
				console.log(myInstance.bar()); // 123
				MyClass.prototype.foo = 2;
				console.log(myInstance.foo); // 2
			

Пример наследования

				function ParentClass () {}
				
				ParentClass.prototype.foo = 1;
				
				function ChildClass () {}
				
				ChildClass.prototype = Object.create(ParentClass.prototype);
				ChildClass.prototype.bar = function () {
				 console.log(this.foo);
				};
				
				var parentInstance = new ParentClass(),
						childInstance = new ChildClass();
				
				console.log(parentInstance.foo); // 1
				console.log(childInstance.foo); // 1
				console.log(childInstance.bar()); // 2
			

Немного лирики о стандартах языка

Пример ООП в ECMAScript6

				class ParentClass {
						constructor () {
								this.foo = 1;
						}
				}

				class ChildClass extends ParentClass {
						constructor () {
								super();
						}

						bar () {
								console.log(this.foo);
						}
				}
			

Transpilers

CSS-препроцессоры

Пример SASS

				$fontSize: 16px;
				$fontSizeBigger: 22px;
				
				.foo {
					
						.bar {
								font-size: $fontSize;
						 
								&.active {
										font-size: $fontSizeBigger;
								}
						}
				}
			

Пример компиляции SASS

				.foo .bar {
						font-size: 16px;
				}
				 
				.foo .bar.active {
						font-size: 22px;
				}
			

Google Chrome Developer Tools

Отладка JS в Chrome DevTools

Инспектирование вёрстки

Просмотр сети