Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы JavaScript

Урок 1. Общие сведения о языке JavaScript (JS).


Общие сведения о языке JavaScript

JavaScript - это язык клиентского веб-программирования. "Клиентский" означает, что код выполняется на компьютере пользователя, в отличии от "серверного", который выполняется на стороне сервера. Следует отметить, что помимо браузеров, у JavaScript есть и другие сферы применения например, веб-приложения и даже ОС Windows.

Для хорошей работы в интернете (и не только), JavaScript - это второе, что вам потребуется после HTML/CSS. Эти курсы рассчитаны как на пользователей, абсолютно не знакомых с JavaScript, так и на тех, кто уже кое-что в этом смыслит.

Стандартизированная версия названия JavaScript - ECMAScript. Не следует путать JavaScript с языком JAVA - это две большие разницы, хотя JavaScript и унаследовал от JAVA часть синтаксиса.

Ввод/вывод информации, работа с графикой и медиа, сохранение данных - всё это реализуется окружающей средой, как правило - это браузер.

Выполнение команд на языке JavaScript

Давайте рассмотрим как выполнить команду на языке JavaScript. Самый простой способ это сделать - запустить браузер (советую Chrome), открыть в нём веб-консоль (инструменты разработчика) и прописать команду:

	 console.log( 'Hello, world');
	

Следующей строкой после команды в консоли браузера будет показан результат её отображения. Для того, чтобы открыть консоль в браузере Chrome кликните на иконку меню > дополнительные инструменты > инструменты разработчика, либо нажмите сочетание клавиш ctrl+shift+i (вообще, такое сочетание клавиш открывает консоль на большинстве браузеров)


Давайте теперь разберём этот простой пример: console - это объект. Что такое объект в JS мы далее детально рассмотрим. log - это функция, которая является методом объекта console, точка как раз-таки и позволяет обратиться к методу объекта. Скобки - оператор вызова функции. То, что находится в одинарных кавычках (можно использовать и двойные) - это литерал строки, точка с запятой - это элемент синтаксиса языка.

Суть этой простой команды такова: вывести в консоли браузера то, что написано в кавычках в скобках.

Консоль нужно время от времени очищать, для этого используется метод console.clear();

Метод .time позволяет задать отсчёт времени:

	console.time("test");console.log("fast");console.timeEnd("test");
	

Это означает начать отсчёт времени действий, начало и завершение которых обозначаются меткой "test" и, затем, вывести на экран сколько времени было затрачено на выполнение этих действий.

Забегая вперёд скажу, что для того чтобы выполнить какое-либо действие с задержкой в JS используется таймер, который задаётся методом setTimeout(), в скобках через запятую указывается действие, которое необходимо выполнить через заданный интервал времени и сам интервал времени в миллисекундах:

	setTimeout(function(){ console.log('test'); }, '5000');
	

В действии мы указали безымянную функцию, которая выведет в консоль указанную в кавычках запись. Написанная в примере команда выведет запись "test" через 5 сек.

Теперь скомбинируем действия - укажем метку времени console.time("metka"); и таймер, действием для которого укажем конец метки времени:

	console.time('metka'); setTimeout(function(){ console.timeEnd('metka'); }, '5000');
	

Теперь откройте текстовый редактор, желательно Notepad++, создайте новый документ, скопируйте в него код из примера ниже, сохраните файл с расширением .html и запустите в браузере.

	<style>
		button{zoom: 200%;}
	</style>
	
	<button onclick="this.textContent='Спасибо'">
	Нажми меня
	</button>
	

В примере написан код JavaScript, который при щелчке по кнопке изменяет на ней надпись с "Нажми меня" на "Спасибо". onclick - атрибут, задающий событие, которое будет происходить при клике (выполнение по щелчку), а this - это обращение к текущему элементу, в данном случае - к кнопке. textContent в нашем примере - это надпись на кнопке. Вообще textContent - это содержимое элемента то, что находится между открывающим и закрывающим тегами.

Обратите внимание, что двойные кавычки в примере чередуются с одинарными - внутри двойных одинарные, либо наоборот - внутри одинарных двойные, иначе код не сработает!

Изменить при клике можно не только надпись на кнопке, но и другие её свойства например, цвет. Для этого через точку с запятой в значении атрибута onclick нужно прописать ещё одну команду:

	<style>
		button{zoom: 200%;}
	</style>
	
	<button onclick="this.textContent='Спасибо';
				    this.style.backgroundColor='red';
					">
	Нажми меня
	</button>
	

В дальнейшем мы разберём эти свойства более подробно.

Основные понятия в JavaScript

Объект в JavaScript - это сложный тип данных, структура, которая объединяет в себе доступные через имена значения разных типов. Они известны как свойства. Если значением свойства является функция, то такое свойство называется методом.

Выражение и инструкции аналогичны соотношению фраза и законченное предложение: результатом обработки выражения является вычисленное значение, но оно не обязательно меняет состояние программы.

Присваивание - выражение, которое влияет на дальнейший ход программы, и это осуществляет оператор присваивания, которым в JavaScript является знак равенства (=).

Операторы связывают первичные выражения, которые более ни к чему не сводимы например, 2*3 является выражением с оператором умножения.

Переменная - это символическое имя некоторого значения то, что возникает при объявлении с помощью ключевого слова var (а в стандарте ES-2015 вводится также ключевое слово let). Переменную можно представить как ссылку к чему-то, что находится в памяти, например - функции.

Область видимости переменной - это границы (scope), в пределах которых доступна объявленная переменная. Глобальные переменные - это те переменные, которые объявлены вне функций; переменные, объявленные внутри функции, доступны только в пределах этой функции:

	var x = 10; // глобальная переменная
	
	function myFunc(){
	var x = 10; // переменная, объявленная внутри функции
		}
	

Советуется как можно реже использовать глобальные переменные, т.к. они создают опасность смешивания переменных.

Присвоение значения переменной (инициализация) - это выражение вида a = 0, это может быть одновременно и объявление: var message = 'hello';. Если переменная объявлена, но не инициализирована, то она хранит значение undefined.

Попытка получить значение необъявленной переменной приводит к ошибке: ReferenceError: ... is not defined

Не следует путать значение undefined с ошибкой not defined, а также знак присвоения "=" с оператором проверки равенства "= =" (двойное равно) и оператором проверки идентичности "= = =" (тройное равно).

Оператор присвоения в JavaScript - знак равенства - означает, что некоторой переменной в левой части равенства присвоено значение правой части равенства, например в выражении x = 5 переменной 'x' из левой части равенства присвоено значение 5 из правой части.

Операторы и их побочные эффекты

Рассмотрим такие варианты присваиваний:

	var x = 1;
	var y = 8;
	
	// можно и так:
	
	var x = 1, y = 8;
	
	// префиксный инкремент:
	++x;
	// постфиксный инкремент:
	y++;
	// выражение с инкрементами:
	var z = ++x + y++; //вычесленное значение будет равно 10 (2 + 8)
	

При работе префиксного и постфиксного инкремента по разному проявляются побочные эффекты на этапе вычисления выражения z=x+y:

префиксный инкремент ++x сначала увеличивает значение "x" на единицу, а затем производит вычисление z=x+y;

постфиксный инкремент y++ сначала производит вычисление z=x+y; а затем производит увеличение переменной "y" на единицу.


Рассмотрим такие понятия:

underfined - это имя предопределённой глобальной переменной, которая инициализирована значением underfined.

null - это ключевое слово, специальный пустой объект, признак отсутствия.

Теперь рассмотрим операторы сравнения:
	var x;
	var y = null;
	
	x == y; // результат в консоли: true
	x === y; // результат в консоли: false
	

В первом случае (двойное равно) происходит проверка равенства, во втором (тройное равно) - проверка идентичности.

При проверке равенства значения null и underfined оказываются равны и результатом их сравнения является истина - булевский тип значения - true.

При проверке идентичности значения null и underfined оказываются не равны и результатом их сравнения является ложь - булевский тип значения - false.

Если присвоить переменной "x" какое-либо значение, а затем в коде ниже присвоить ей значение null, то прежнее её значение будет уничтожено.

Важное о сравнении

В JavaScript логический (булевкий - boolean) тип данных может принимать два значения: истина - true - когда какое-либо выражение верно или ложь - false, когда выражение не верно.

Все следующие значения при преобразовании в логическое значение (true, false) работают как false:

underfined
null
0
-0
NaN
"" (пустая строка)

Остальные - как true.

Комментарии в JavaScript

Комментарии в коде JavaScript могут быть однострочными и многострочными, оформляются они так:

// однострочный комментарий

/* многострочный - комментарий
в несколько строк */


Как и в HTML/CSS, комментарии в JS могут служить для каких-то заметок в коде, либо для отключения участков кода.

В конце каждой команды в коде JavaScript настоятельно рекомендую ставить точку с запятой!

Сейчас вам, возможно, многое из сказанного непонятно, однако продолжив изучение в следующих уроках по JavaScript вы обязательно во всём разберётесь!

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля


Комментарий №1
01-10-2018 18:24:34
Вадим
Большое спасибо за обучающие материалы и курсы по JavaScript - данная отрасль очень подходит к тематике данного сайта - зарабатывания в интернете. Все доступно описано, изложено языком, который понятен для новичка. Начинаю изучение курсов по JavaScript, исследую все отделы на этом сайте, позднее начну применять полученные знания на практике.