JAVASCRIPT

JavaScript - прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript. JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

Задания по JavaScript 1

СТРАНИЦА 1    СТРАНИЦА 2   

0. Начало

0. Прочитайте статью "Правила для посещающих курсы"

1. Переменные


1. Начало работы


2. Переменные. Метод alert и вывод комментариев


3. Объект document и метод write


4. Правила именования переменных (правила написания переменных в JS.txt - ССЫЛКА)

 

Тип данных «number» : 1234, 12.3456 - целые и дробные числа
Тип данных «string» : "Еште кашу", 'Пейте молоко', "1234" - пишется в двойных кавычках или одинарных


5.1 Суммирование, вычитание, деление, умножение переменных number и string. Часть 1


5.2 Суммирование, вычитание, деление, умножение переменных number и string. Часть 2

 

2. Массивы


6. Arrays. Два метода создания Массивов        а) Название_массива['элемент1','элемент2']          в) new Array( )


7. Добавление и удаление данных в начало+конец массива

.unshift(" ") ;   - Добавление в начало
.push(" ") ;      - Добавление в в конец
.shift();            - Удаление первого элемента
.pop();             - Удаление последнего элемента




8. Свойство length - количество элементов массива



9. Метод splice - добавление, удаление элементов массива (англ. : сращивать, сплетать, соединять, женить)



10. Методы:  concat - сумирование массивов (англ. : concatenate сцеплять, связывать)
                          slice - выбирает элементы (англ. : нарезать, часть, ломоть, доля)




11. Методы:
reverse - реверс (англ. : противоположное)
sort - сортировка (англ. : сортировать, сорт, классифицировать, разбирать)
join - изменение разделителя (англ. : присоединиться, вступать, соединить, примкнуть, соединять, соединяться, приобщаться, вливаться)




12. Многомерные массивы



13. Ассоциативные массивы
  Ассоциативные массивы (хэш-таблицы) допускают вместо индексов применять строки.
 

13.1 Выведите в столбик массив из планет земной группы (через for как в номере 13).
        Покажите результат преподавателю.


3. IF-ELSE

14. Конструкция IF - ELSE (англ. : if - если // англ. : else - иначе) (правда - true = 1 // лож - false = 0)

15. Логические && (и) - || (или)

16. if else if else if else ... - несколько условий

16.1 Конструкция switch (оператор) - case - break - несколько условий (англ. : switch - переключатель) (англ. : case - коробка, яшик) (англ. : break - пауза)

16.2 Тернарный оператор
Терна́рная усло́вная опера́ция (от лат. ternarius — «тройной») (обычно записывается как ?:) — во многих языках программирования операция, возвращающая свой второй или третий операнд в зависимости от значения логического выражения, заданного первым операндом. Как можно судить из названия, тернарная операция принимает всего три указанных операнда.

 

4. Циклы while и for

Цикл (греч. kyklos - круг). 1) период, после которого одни и те же
астрономические явления повторяются в том же порядке.

17. while ( англ.: в то время как, пока, покуда, до тех пор пока )

17.1 Самостоятельно - выведите числа с 40 до 60 включительно используя цикл while
        по горизонтали и потом по вертикали в одном документе.
        Покажите результат преподавателю.

17.2 Самостоятельно - используя цикл while создайте бесконечный цикл (старые браузеры отображают бесконечный цикл выводя переменную ограниченное количество раз, новые выдают ошибку)
        Покажите результат преподавателю.

18. while и массивы

19. for ( англ.: для, в течение, за )

5. Типы данных JavaScript

Типы данных - это значения с характерными только для них параметрами, свойствами.

string
 - Строковый или символьный. Символы, заключенные в кавычки, двойные или одинарные ( "Еште яблоки" ’Диаметр Земли’ "12 742км" "делить" "д. Солнца" "1 392 000" "=" "109,2" "от Солнце до Земли - 149 600 000 км")

number - Числовой. Число, последовательность цифр, перед которой может быть указан знак числа (+ или -); перед положительными числами не обязательно ставить знак +; целая и дробная части чисел разделяются точкой. Число записывается без кавычек ( 4 -3.25 )

boolean - Логический (булевский) - имеет только два значения: true (истина, да) или false (ложь, нет) ( true false ). "Boolean" в честь английского математика Джона Буля, создавшего алгебру для логических величин.

object - Объект. Программный объект, определяемый своими свойствами. В частности, массив также является объектом

null - тип данных имеет одно значение null, указывающее на отсутствие какого бы то ни было значения

undefined - этот тип данных имеет одно значение undefined, указывающее, что переменной не присвоено никакое значение

function - Функция. Определение функции программного кода, выполнение которого может возвращать некоторое значение

Symbol() - уникальный, неизменяемый тип данных, который можно применить для идентификации свойств объекта (старые браузеры его не понимают )

Типы данных делятся на приметивные и не приметивные

20. Оператор typeof() возвращает строку, показывающую тип операнда, не показывая финального значения

 

5.1 Объект Window

21. Модальные окна : window.alert(), window.prompt(), window.confirm()
Модальные окна : Часть 1.
Модальные окна : Часть 2.

 

6. Функции (встроенные, создаваемые)

от лат. functio «исполнение, обязанность, взнос»
Функция
: роль, значение чего-нибудь (рус. язык)
Функция : зависимая переменная величина (в математике).
Функции – это стандартное задание переменной, где значение, которое задает переменная, будет функцией.

22. Функция parseFloat( ) - преобразует строковый аргумент и отдает число с плавающей точкой.

23. Создание пользовательских функций :
Создание функций. Часть 1.
Создание функций. Часть 2.

24. Переменные, функции и их видимость

25. Фперерывункция и возврат значения (return - англ.: возвращение, отдача)

25.1 Методы объекта window - setTimeout (set - задавать) ( timeout - перерыв ) и setInterval для отложенного запуска кода. Отличаются они тем, что setTimeout запускает код единожды, а setInterval — постоянно с заданной периодичностью.
Оба метода первым аргументом принимают строку кода, которую необходимо выполнить, или функцию, которую необходимо запустить. Второй аргумент задаёт задержку в миллисекундах. Возвращают оба метода идентификатор созданного таймера.
Методы объекта window - clearTimeout, (clear - очищать) clearInterval : возвращает числовой идентификатор таймера timerId, который можно использовать для отмены действия.
Методы объекта window - setTimeout и setInterval. Часть 1.
Методы объекта window - setTimeout и setInterval. Часть 2.

 

7. Числовые обьекты (функции и методы)

В JavaScript существуют обычные числа и 3 особенных числовых значения:  Infinity, -Infinity, NaN

26. NaN (Not-A-Number), Infinity (бесконечность), -Infinity (минус бесконечность)

27. Преобразование к числу. 4 способа. Указание арифметического знака числа. Функция Number, parseInt, parseFloat .

28. Метод toFixed и функция isNaN

29. Объект Math (методы - ceil (перекрывать, потолок), floor(пол), round(округлять, круг), random(случайный, выбранный наугад))

29.1 Зачетное задание.
Создайте 3 страницы используя блочную верстку с перекрестным меню в каждой странице. Для отображения меню активной страницы примените "IF-ELSE" чтобы ссылка была другим цветом и размером. На каждой странице создайте опросник из 5 пуктов на разные темы используя модальные окна с выводом результатов на страницу.

Покажите результат преподавателю.

Валентина Андрей 1 Андрей 2

 

8. Строковые обьекты JAVASCRIPT

30. Вставка спецсимволов с обратным слешем - \ .

Написание Действие
\n перенос строки
\'' двойная кавычка
\' одинарная кавычка
\\ обратный слэш
\r возврат каретки
\t табуляция
\b стереть символ (backspace)
\f прогон листа

31. Методы toLowerCase и toUpperCase. Свойство length

32. Метод slice - выбирает элементы (англ. : нарезать, часть, ломоть, доля) (10)
Методы indexOf и lastIndexOf. (Of - англ. : из, от, для) (last - англ. : последний)


32.1 Самостоятельно методом slice вырежте из фразы "ешьте свежие фрукты" слово свежие и выведите на его экран.
        Покажите результат преподавателю.


33. Методы charAt() и charCodeAt()

Метод charAt возвращает символьное значение, представляющее символ, расположенный по указанному индексу index. Первый знак строки имеет индекс 0, второй — индекс 1 и т. д. При указании значения index, выходящего за пределы допустимого диапазона, возвращается пустая строка.

Метод charCodeAt возвращает значение символа Юникода в указанном расположении.

Алфавит русский и английский - текст букв

33.1 Самостоятельно - используя задание 33 сделайте проверку на вывод некоректных русских символов и цифр.
        Покажите результат преподавателю.

33.2. Методы charAt и charCodeAt с массивом ( цикл в цикле )
Английский - текст массива planets: Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune ( для 33.2)

34. Методы:
search (англ. :поиск, обыск). При успехе метод search() возвращает индекс первого сопоставления с внутри строки. В противном случае метод вернёт -1.
match (англ. :совпадение, спичка). Возвращает текст совпадения или -1, если ничего не найдено.
replace (англ. :заменять). Метод не меняет вызывающую строку, а возвращает новую, после замены.

 

9. Регулярные выражения JAVASCRIPT

РЕГУЛ’ЯРНЫЙ, -ая, -ое; -рен, -рна.
1. Осуществляемый равномерно и правильно, через определённые промежутки времени. Р.осмотр. Регулярная доставка газет.
2. полн. ф. Имеющий правильную и постоянную организацию. Регулярные войска (войска постоянной армии, имеющие штатную организацию). Словарь Ожегова.

Регуля́рные выраже́ния (англ. regular expressions) — формальный язык поиска и осуществления манипуляций с подстроками в тексте, основанный на использовании метасимволов (символов-джокеров, англ. wildcard characters). По сути это строка-образец (англ. pattern, по-русски её часто называют «шаблоном», «маской»), состоящая из символов и метасимволов и задающая правило поиска.

Многие современные языки программирования имеют встроенную поддержку регулярных выражений. Среди них ActionScript, Perl, Java, PHP, JavaScript, языки платформы .NET Framework, Python, Tcl, Ruby, Lua, Gambas, C++ (стандарт 2011 года), Delphi, D и другие.

35. Регулярные выражения. 2 метода написания. Метод search

36. Регулярные выражения. Поиск цифр. Метод search

37. Регулярные выражения. " function visaelectron " Поиск цифр. Метод search

38. Регулярные выражения. Метод match

VELCOM и Privet : +375-299-12-32-69 , +375-296-12-93-68. МТС : +375-298-76-98-28, +375-297-45-72-10. Life: +375-259-43-78-31. Билайн : +7-903-537-34-19


38.1 Самостоятельно - используя данные из задания 38 сделайте регулярное выражения с методом match для поиска бел. телефонов данных ниже :
VELCOM и Privet : 8(29)912-32-69 , 8(29)612-93-68. МТС : 8(29)876-98-28, 8(29)745-72-10. Life: 8(25)943-78-31. Билайн : 8(903)537-34-19

1. Всех бел. телефонов
2. бел. телефонов МТС
3. Всех бел. телефонов кроме МТС
" () - надо экранировать \( ".
        Покажите результат преподавателю.

38.1 итог



39. Регулярные выражения. Метод match и цикл for
Регулярные выражения : Часть 1.
Регулярные выражения : Часть 2.

WWW.GOOGLE.BY, https://Google.by, http://24new.by, www.translate.google.ru, 1-site.by, https://ru.wikipedia.org, neustar.us

39.1 Самостоятельно - используя данные из задания 39 выполните .
        Покажите результат преподавателю.


Сылка под видео на YOUTUBE в описании (39.1)


40. Метод replace (англ. : заменять). (34, join -11 )

VELCOM и Privet : 8(29)9-12-32-69 , 8(29)6-12-93-68. МТС : 8(29)8-76-98-28, 8(29)7-45-72-10. Life: 8(25)9-43-78-31. Билайн : 8(903)537-34-19
VELCOM и Privet : +375-299-12-32-69 , +375-296-12-93-68. МТС : +375-298-76-98-28, +375-297-45-72-10. Life: +375-259-43-78-31. Билайн : +7-903-537-34-19

41. Метод replace и функция

Сергей Савельев. Мозг. Обманы в науке 2011 08 04


10. JAVASCRIPT и ДАТЫ

1. Обьект Date ( англ.: дата, финик) 1секунда = 1000 миллисекунд

Дата измеряется в миллисекундах, начиная от полуночи 01 января 1970 года GMT+0. Сутки содержат 86,400,000 миллисекунд. (8,64e+7)


new Date(year, month, date, hours, minutes, seconds, ms)

year - Год в формате YYYY

month - Месяц от 0 (Янв) до 11 (Дек)

date - День месяца от 1 до 31

hours - Параметр должен быть указан, если указан параметр minutes. Устанавливает количество часов от 0 до 23

minutes - Параметр должен быть указан, если указан параметр seconds. Устанавливает количество минут: от 0 до 59

seconds - Параметр должен быть указан, если указан параметр ms. Устанавливает количество секунд: от 0 до 59

ms - Количество миллисекунд: от 0 до 999

2. Обьект Date и его методы getMilliseconds, getSeconds, getMinutes, getHours, getMonth, getFullYear, getYear, getDay

3. Обьект Date и вывод времени в формате не 15 : 2 : 7 : 8 , a в формате 15 : 02 : 07 : 008

3.1 Самостоятельно - используя данные из задания 2 и 3 выполните вывод месяцев в двух значном формате с использованием метода getMonth.
        Покажите результат преподавателю.

Сылка под видео на YOUTUBE в описании (3.1)




4. Обьект Date и вывод дней недели по русски используя массив

4.1 Самостоятельно - используя данные из задания 4 и предыдущих выполните вывод месяцев текстом по русски методом getMonth с применением массива.
        Покажите результат преподавателю.


5. Обьект Date и метод getTime()
getTime() : Часть 1.
getTime() : Часть 2.

getTime - Возвращает количество миллисекунд, истекших с полуночи 1 января 1970 г. до значения времени, сохраненного в объекте Date. Отрицательные числа указывают даты до 1970 года.

5.1 Самостоятельно - используя данные из задания 5 и предыдущих выполните вывод :
(при изменении даты нового года например на 2018 должен измениться день недели)
        Покажите результат преподавателю.

ДО НОВОГО ГОДА 2017 ( ВОСКРЕСЕНЬЕ ) ОСТАЛОСЬ :
месяцев : xx недель : xx суток : xx часов : xx минут : xx секунд : xx


6. Обьект Date и и его методы для вывода конца срока вклада используя функцию
Часть 1.
Часть 2.

 

11. Моделирование собственных объектов

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

Хеш-табли́ца — это структура данных, реализующая интерфейс ассоциативного массива, а именно, она позволяет хранить пары (ключ, значение) и выполнять три операции: операцию добавления новой пары, операцию поиска и операцию удаления пары по ключу.


а) Литеральная нотация.
Литеральный — литеральная, литеральное [латин. litteralis] (книжн.). Буквальный. Литеральный смысл. Большой словарь иностранных слов.

Литерал (англ. literal — константа) — запись в исходном коде компьютерной программы, представляющая собой фиксированное значение. Литералами также называют представление значения некоторого типа данных.

Нота́ция (от лат. notatio — записывание, замечание)


б) Оператор new

Инстру́кция или опера́тор (англ. statement) — наименьшая автономная часть языка программирования; команда. Программа обычно представляет собой последовательность инструкций.

Операторы JAVASCRIPT :
delete
function
in
instanceof
new
this
typeof
void
Аксессоры
object.property и object["property"]

Арифметические операторы
+, -, *, /, %, ++, --
Запятая
,
Логические операторы
&& - и ,
|| - или,
! - не



Операторы присваивания
=, +=, -=, *=, /=, >>=, <<=, >>>=, &=, |=, ^=

Операторы сравнения

==, !=, ===, !==, >, >=, <, <=

Побитовые операторы
&, |, ^, ~, <<, >>, >>>

Строковые операторы
+, +=

Условный оператор
condition ? ifTrue : ifFalse



8. Собственные объекты и создание их методов. Оператор this

Используйте ключевое слово this (англ.: этот, это ) для указания на текущий объект. В общем случае this указывает на вызываемый объект в данном методе.

9. Отображение всех данных объекта на дисплее

Оператор in возвращает true, если указанный объект имеет указанное свойство.

 

12. Объекты : navigator, screen, location

10. Объект : navigator - содержит информацию о браузере пользователя.
Свойство userAgent - возвращает строку, идентифицирующую Web-обозреватель клиента.

11. Объект : screen, location
Часть 1.
Часть 2.

screen (англ. : экран) - содержит информацию о разрешении установленном на экране пользователя. screen
location (англ. : местонахождениe) - содержит информацию о местонахождении текущего документа, т.е. его интернет-адрес. Его также можно использовать для перехода на другой документ и перезагрузки текущего документа.

11.1 Самостоятельно - используя файл из задания 11 доделайте его так чтобы срабатывало условие и выводилась свойство - "language" либо "browserLanguage" в зависимости это IE или нет

1. document.write("1. Язык Web-обозревателя - не для IE (language) : "+navigator.language + "<br>");
2. document.write("2. Код программы Web-обозревателя - для IE (browserLanguage) : "+navigator.browserLanguage + "<br>");

        Покажите результат преподавателю.


13. Модель DOM в JAVASCRIPT

12. Начало

13. Понятие Dom (Document Object Model - объектная модель документа)

Файл для задания 13

DOM — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, а также изменять содержимое, структуру и оформление таких документов.

Модель DOM не накладывает ограничений на структуру документа. Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или любой другой объект. Узлы связаны между собой отношениями «родительский-дочерний».

ОБЪЕКТИВНЫЙ — (от лат. objecivus.предметный). 1) относящийся к предмету нашего наблюдения. 2) бесстрастный, чуждый личных симпатий и взглядов. 3) Соответствующий объекту, существующий вне нас и независимо от нас; реальный. 4) существующий вне сознания и независимо от него (противоп.: субъективный).

  • Дочерние элементы (или дети) – элементы, которые лежат непосредственно внутри данного. Например, внутри <HTML> обычно лежат <HEAD> и <BODY>.
  • Потомки – все элементы, которые лежат внутри данного, вместе с их детьми, детьми их детей и так далее. То есть, всё поддерево DOM.

14. Метод document.getElementsByTagName() - возвращает список узлов (тегов) всех элементов с указанным именем.
Часть 1.
Часть 2.

Файл для задания 14

В мире DOM в качестве значения, обозначающего «нет такого элемента» или «узел не найден», используется не undefined, а null.

15. Метод document.getElementById(). Он возвращает ссылку на узел документа, которую можно использовать для изменения свойств и обращения к методам узла.

16. Выбор родственных элементов.
childNodes - возвращает псевдо-массив  хранит все дочерние элементы, включая текстовые. (англ. child - ребенок)(англ. node - узел)
parentNode - возвращает родителя определенного элемента DOM дерева. (англ. parent - родитель)
nextSibling - возвращающее узел непосредственно после данного узла в родительском списке childNodes (англ. next - следующий) (англ. sibling - родной брат)
previousSibling - возвращающее узел непосредственно предшестующий указанному в родительском списке childNodes (англ. previous - предыдущий)


DOM-коллекции, такие как childNodes и другие не являются JavaScript-массивами.
В них нет методов массивов, таких как forEach, map, push, pop и других.
Именно поэтому childNodes и называют «коллекция» или «псевдомассив».

17. Свойство innerText - позволяет задавать или получать текстовое содержимое элемента и его потомков. (англ. inner - внутренний)
textContent - позволяет задавать или получать текстовое содержимое элемента и его потомков. (англ. content - содержание)

18. Свойство innerHTML извлекает весь HTML код и может менять его внутри какого либо элемента.




Отзывы



Считаю, что время на курсах потратил с огромной пользой. Знания, полученные мной в ходе курса "JavaScript + jQuery" а также полученные ранее на курсе "PHP + MySQL", позволят мне создавать по-настоящему интересные, динамичные и современные сайты, удобные как для пользователей, так и для администраторов.
Яцкевич Олег     vk


За время пребывания на курсах я прошла HTML, CSS, Javascript. Научилась верстать сайты блочным и табличным методом, применять различные стили. Изучила язык Javascript(множество методов, событий и функций), благодаря которому веб-страницы становятся динамическими. Огромный плюс этих курсов состоит в том, что вся теория отрабатывается на практике и существует индивидуальный подход к каждому слушателю, а также гибкий график, что очень удобно. Отдельное спасибо преподавателю Михаилу за его советы и понимание.
Филипенко Анастасия     vk

 

 

 

 

 

перейти вверх страницы