Неделя 1. Введение в JavaScript

Конспект 1 Недели Курса "JavaScript для начинающих"

Зачем нужен JavaScript (он же JS) ? 

Что бы сделать обычную html-страничку живой. 

Вы можете:

• Изменять страничку в любой момент (показывать, прятать элементы, менять стили на лету, перемещать и вообще полностью переделать всю страницу)
• Проверять на лету что пользователь делает всё правильно ( обрабатывать клики мышью, ввод с клавиатуры, отслеживать перемещения курсора)
• Загружать данные с сервера и на лету их обновлять на страничке без её перезагрузки
• Общаться с пользователем и сервером (запрашивать данные, выводить сообщения и т.д.)

Что бы использовать JavaScript на все 100% надо:

• Знать базовый синтаксис (переменные, операторы, циклы и прочее)
• Научится объединять команды JS в функции, работать с объектами и массивами данных
• Научиться обращаться по уникальному адресу к любому тэгу на HTML-страничке
• Узнать про JQuery и Prototype для упрощения работы.

Что бы "оживить" страничку достаточно вставить на неё JS-скрипт:

<script>Текст</script> 

или же 

<script scr="myscript" /> если текст скрипта у вас в отдельном файле.

/* Вот этими символами  оформляются большинство комментариев, которые ничего не делают, 



но их очень полезно писать и читать. */

// Для комментариев в одну строчку достаточно двойного слеша и никаких символов в конце

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

Var x; // Переменная неизвестного типа. Мы её только объявили

Var x=1; // А теперь инициализируем значением 1 и она теперь тип Number.

Var x = "1"; // Ещё есть String. Любые тексты хранить можно здесь )

Var x = true; // Ещё есть Boolean, всего два значения - правда или ложь.

Есть и ещё пара хитрых типов, но о них позже )

Что мы можем сделать с переменными?

• Использовать их значения в вычислениях (арифметика, +, -, / , *)
• Изменить их (присвоить новые значения через % (остаток от деления), ++ (инкремент), -- (декремент), = (присвоить))
• Сравнить (==, != и т.д.) с чем-либо и сделать глубокомысленные выводы! ))) 

Часто бывает, что нам надо в зависимости от обстоятельств выполнять разные действия. Для этого мы используем условные операторы, например:

• Проверяем обстоятельства:
  (например записываем в переменную x что там нам ввёл человек на страничке в поле email):
  var x =  document.forma.email.value;
• Проверяем всё-ли правильно он ввёл:
  var r = /^\w+@\w+\.\w{2,4}$/i; // Это шаблон для проверки email
  var result = r.test(x); // вот тут будет либо true  - если email верный, либо false, если не так.
• И ругаемся если он ввёл не корректный адрес:
  if (!result) alert("Адрес email не верный!"); // Знак ! перед result изменяет true на false и наоборот.

А когда наши действия должны повториться много-много раз, то на помощь нам придут циклы:

for ( var i=1;i<5;i++) {

Любые команды JS

}

/* Такой цикл сделает своё дело целых 4 раза, 

переменная i будет равна при этом сначала 1, потом 2, потом 3, 4 и наконец

когда i станет равной 5 условие i<5 перестанет выполнятся и цикл завершится.

Обратите внимание, что первое действие var i=1 выполняется 1 раз перед запуском,

i<5 это условие проверяется перед каждым повтором команд в теле цикла, 

и действие i++ делается тоже каждый раз после очередного выполнении команд цикла. 

Причём если написать ++i, то сначала увеличится i, а только потом выполнится цикл.*/

while (i<5){

Любые команды JS

}

//очень простой цикл, просто выполняется пока условие верное.

Если i = 1 например и его не менять в цикле, то это будет бесконечный цикл

do{

}while(i<5);

/*С моей точки зрения не сильно полезный вариант цикла, 

его отличие от предыдущего в том, 

что цикл в любом случае выполнится один раз, а только потом проверит

надо ли продолжать работать.*/

Любой цикл можно прервать при выполнении. break прервёт его полностью, continue  - просто пропустит все оставшиеся команды в теле цикла и перейдёт к следующему повтору.

Циклы мы можем вкладывать друг в друга и что бы JS знал какой из всего набора циклов мы решили прервать мы используем метку:

metka: for (var i=1; i<5; i++){

    for (var j=1; j<5; j++){

       break metka;

   }

}

  

Основываясь на изученных материалах, какой самый полезный и выгодный совет я могу дать сообществу Голоса?

Обязательно используйте JS для того, что бы сделать свою страницу интерактивной, дружелюбной и приятной в работе. В исходниках сайта Голоса тоже полно скриптов на JS ;)

Мнение о курсе и материале

Тут даётся самое-самое начало, даже не столько о JavaScript, сколько о азах программирования как такового. Всё что здесь написано можно просто вынести на небольшую шпаргалку. Особенно много ошибок при самостоятельной работе можно поймать с именами переменных - тут поможет моя оранжевая памятка! ;)