Как изучить синтаксис javascript

Javascript урок 1. Внедрение сценариев в HTML

В сети Интернет Вы найдете большое количество информации, посвященной языку JavaScript. Цель нашего портала заключается в последовательном логичном изложении кратких теоретических сведений по теме, с обязательным закреплением материала в виде практических заданий на основе решенных примеров. Представленные на сайте labs-org.ru лабораторные задания по javaScript выстроены последовательно по мере увеличения сложности, а готовые решенные примеры позволят с легкостью пройти материал даже новичку. Сайт можно использовать в качестве вспомогательного наглядного пособия для учителей и преподавателей.

1. Добавление сценариев Javascript в HTML

Javascript — скриптовый (сценарный) интерпретируемый язык программирования, интерпретатор встроен непосредственно в браузер. Поэтому обработка скрипта (или другими словами — сценария) происходит на стороне клиента без обращения к серверной стороне

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

Для добавления сценария на страницу HTML используется дескриптор:

script type="text/javascript"> script>

Или сегодня можно использовать упрощенный вариант:

Атрибуты дескриптора:

• type — атрибут, пришедший на замену language ; он сообщает браузеру, какой язык используется внутри дескрипторов;
• src — атрибут определяет URL внешнего исходного JavaScript-файла, сценарий которого прикрепляется к html-странице.

sсript language="javascript">. sсript>

script type="text/javascript">. script>

script src="/jscripts/myscript.js"> sсript>

• тег script обычно помещается в html-страницу в область head или body ;
• этот тег указывает на то, что внутри находится сценарий — исполняемый код, в нашем случае скрипт на языке javascript;
• когда html-парсер браузера, отображая последовательно структуру html, доходит до тега script , то он передает инициативу интерпретатору javascript ;
• интерпретатор, в свою очередь, исполняет содержимое кода до закрывающего тега script , а затем опять передает управление html-парсеру.

Добавление javascript в html

Встраивание javascript в html происходит двумя основными способами, которые рассмотрим на примере:

Пример 1: Вывести в браузере сообщение «Это JavaScript!», используя скрипт на языке JavaScript.

script> document.write("Это JavaScript!"); script>

 hr> Это обычный HTML документ. /body>/html>

В данном примере дескриптор script может находиться как в теле документа, т.е. теге body (как в примере), так и в области head .

• Создайте две страницы: lab1.html и myscript.js. Расположите обе страницы в одном каталоге.
• В html-документе разместите код:

script src="myscript.js">script>

document.write("Это JavaScript!")

При прикреплении js-файла следует иметь в виду, что в html-файле надо указывать относительный путь к файлу со скриптом. Так, если файл со скриптом находится в каталоге jscripts , то код будет: sсript src=»https://labs-org.ru/javascript-1/jscripts/myscript.js» .

Выполните следующий пример, чтобы увидеть особенности работы метода alert() :

script> alert ("Hello?"); document.write("Hello!"); script>

Важно: особенность модального окна alert() состоит в том, что пользователь не может продолжить работу, пока не щелкнет по кнопке окна

Обратите внимание, как работает javascript, помещенный в теги оформления шрифта:

h1> sсript> alert ("Hello?"); document.write("Hello!"); sсript> h1>

alert («Hello?»); document.write(«Hello!»);

Важно: Пример показывает, что при использовании метода write() на странице выводится не просто текст, а html-код. То есть данный код может содержать теги html, которые будут преобразованы в соответствующее форматирование текста.

h1> sсript> console.log("Hello!"); sсript> h1>

console.log(«Hello!»);

Задание Js 1. Вывести в окно браузера следующие данные: Ваше ФИО, возраст, хобби (каждое на новой строке). Затем то же самое выведите в консоль.

Задание Js 2. Написать сценарий (javascript) для вывода двух строк текста, красной и синей.

Замечание:
Теги html для оформления текста цветом:

font color="red">Красная строка/font>

• Что такое сценарий (скрипт)?
• Сформулируйте основные задачи, решаемые с помощью скриптов javaScript.
• Опишите основные правила подключения сценариев к странице html.
• Какой метод javaScript используется для вывода текста (html-кода) на страницу?

2. Синтаксис javaScript, основные понятия

JavaScript – язык интерпретируемый (простыми словами: интерпретируемый — исполняется последовательно команда за командой), но также оснащен JIT-компиляцией.

JIT или компиляция «на лету» (Just-in-time compilation) — технология увеличения скорости работы программных систем, использующих байт-код, путём компиляции байт-кода в машинный код непосредственно во время работы программы.

Рассмотрим некоторые понятия, относящиеся к синтаксису языка:

Сценарий — текст, состоящий из:

Операторы могут содержать:

• переменные — могут изменять свое значение в программе,
• константы — не изменяют свое значение,
• выражения.

Вспомним, что переменная — это область памяти для хранения значений; для обращения к переменной используется ее имя (идентификатор). Кроме того, у переменной есть тип данных — это тип значения, которое принимает переменная.

Идентификаторы (identifiers) — имена переменных, методов и объектов:

• состоят из комбинации букв и цифр;
• должны начинаться либо с буквы, либо с символа подчеркивания;
• не должны содержать пробелов.

//переменные различаются: counter=1 Counter=1

//переменные различаются: counter=1 Counter=1

«Верблюжья нотация» в записи идентификаторов:

Есть определенные устоявшиеся среди программистов правила для идентификаторов (имён) переменных, функций, массивов и классов. Рассмотрим их:

• num_docs — знак подчеркивания между словами — хорошо, но есть способ лучше
• numDocs — вот такой «верблюжий» стиль превосходно подходит для именования переменных:
• все имена строчными буквами,
• на стыке слов — большая буква,
• переменные и свойства — называем именами существительными,
• массивы и коллекции — называем существительными во множительном числе,
• функции и методы — называем глаголами,
• название классов — с заглавной буквы.

let myCounter=1; // просто переменная let userNames = new Array(); // массив function getUserCounter(){}// функция

let myCounter=1; // просто переменная let userNames = new Array(); // массив function getUserCounter()<>// функция

Ключевые слова (keywords) — предварительно определенные идентификаторы, составляющие основу языка программирования. Ключевые слова нельзя использовать для имен переменных, функций, объектов и методов.

Литералы (literals) — это постоянные значения JavaScript. Это значения, которые не изменяются во время выполнения сценария (целочисленные литералы, литералы с плавающей точкой, логические литералы (true и false), строковый литерал — это ноль и более символов, заключенных в двойные («») или одиночные (») кавычки).

Правила оформления скрипта JavaScript

• каждый оператор JavaScript лучше начинать с новой строки;
• каждый оператор заканчивается точкой с запятой;

сегодня точка с запятой в конце оператора не обязательна, но если написать в строку несколько операторов (это тоже разрешается), то необходимо их разделить через ‘ ; ‘

Такой код не работает:

// способ 1: a=5 document.write(a) // способ 2: a=5; document.write(a); // способ 3: a=5; document.write(a);

// способ 1: a=5 document.write(a) // способ 2: a=5; document.write(a); // способ 3: a=5; document.write(a);

JavaScript комментарии

1. // — одна строка символов, расположенная справа от этого оператора, считается комментарием;
2. /*. */ — все, что заключено между /* и */ , считается комментарием; с помощью этого оператора можно выделить несколько строк в качестве комментария.

// проверка /* здесь может быть ошибка a=5; document.write(a); */

// проверка /* здесь может быть ошибка a=5; document.write(a); */

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

alert("Hello World!"); / это однострочный комментарий

alert(«Hello World!»); / это однострочный комментарий

Объявление переменных в javaScript и оператор присваивания

Переменная (variable) — это имя, присваиваемое ячейке памяти компьютера, которая хранит определенные данные.

JavaScript — нетипизированный язык. Это значит, что переменные принимают тот тип данных, значение которого в них присваивается. Напрямую задавать тип переменной не надо.

Объявление переменной происходит при помощи служебного слова javascript let (раннее использовалось var ):

Пример объявления переменной:

Источник