Оператор alert и prompt в javascript
Javascript — это язык программирования, который активно используется для построения динамических веб страниц. Собственно с этой целью он и был изобретен. У нашего с вами языка еще есть такое интересное название, как язык сценариев. В принципе такое название можно дать любому языку с приставкой script на конце.
Языки сценариев являются ограниченными языками программирования, и для выполнения кода, они встраиваются в другую программу. Чтобы вы понимали о чем я говорю, наведу парочку примеров.
- ActionScript — используется только во флеш приложениях
- VBScript — в программах MC Office
- JavaScript — только в браузерах
Язык javascript, как и большинство языков сценария интерпретируемый язык, и как вы догадались его интерпретатором является абсолютно любой браузер. Мы лишены ручной работы компилирования исходного кода в машинный, так как за нас эту работу выполняет браузер.
Запомните раз и навсегда, для javascript очень важен регистр букв!
1 2 |
document.getElementById("example").style.display = "none"; document.getElementByID("example").style.display = "none"; |
Во второй строке в слове getElementById буква D написана в верхнем регистре, что является в корне не правильно и ошибочно. Есть много вещей, который в том или ином языке программирования нужно знать и соблюдать. Все важные моменты я буду описывать здесь, а вы постарайтесь обращать на них внимание и делать все правильно.
Java, ActionScript, JavaScript — это все языки которое пошли от языка C, для тех, кто знает стили и синтаксис написания кода на языке «C», без проблем сможет переучиться на javascript. Так что javascript, это интерпретируемый, регистрозависимый язык основанный на языке С, он весьма актуален сейчас и интересен для изучения, а еще специалисты в этой области получают довольно таки неплохие зарплаты.
Первые строки кода в javascript
Чтобы заставить наш исходный код работать, его нужно запустить в браузере, а для того, чтобы запустить в браузере, следует создать простую веб страницу в которую мы с вами подключим внешний документ с javascript. Знание html и css в изучении скрипта не критично, но желательно. Если вы совсем не знакомы с html, рекомендую ознакомиться с моим руководством по изучению html и css.
Сейчас у меня в рабочей папке имеется два файла, html страничка, к которой подключен скрипт и собственно сам документ javascript.
У меня первый файл имеет название index и расширение стоит у него html, не важно какое название у вашего файла будет, вы можете назвать его по своему, здесь играет роль расширение файла и оно должно быть html. Вторым документом является сам исходный код javascript и он имеет расширение js, что и говорит о его принадлежности к скрипту.
Я себя приучил давать файлам имена на латинице и использовать нижний регистр, если вы сделаете тоже самое, то в будущем вам будет проще и вы избежите многих проблем. Бывает такое, что операционная система на которой вы работаете скрывает расширения файлов, тогда вам нужно посмотреть в интернете, как разрешить показывать расширения документов, чтобы вы легко ориентировались с чем работаете.
Рассмотрим наш html документ и убедимся, что там нет ничего лишнего:
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="script.js"></script> </body> </html> |
Как видите у нас простая htnl5 страничка, в которой внутри тега body подключен код javascript. Так как это не курс по html, я не стану разбирать теги, и их значение, для этого есть рубрика на моем блоге с изучением HTML5 и CSS. Закрываем нашу страничку с html и переходим к документу javascript для написания исходного кода самой простой программки на этом языке.
Итак в открытом документе для кода скрипта пишем следующий кусочек кода:
1 |
alert("Hello world!"); |
Запомните все примеры, которые я даю нужно писать именно так, как они в примере указаны, никаких лишних пробелов, отсутствия точек с запятой и т.д. Мы с Вами написали первую инструкцию на языке javascript. Чтобы запустить этот код, нам нужно сохранить документ и закрыть, на это время он нам уже не понадобится. Запускаем теперь нашу веб страницу. то есть кликаем два раза по html документу и он откроется в окне нашего браузера.
Запустившись страница подгрузила наш с вами код и он выполнился на странице браузера в виде всплывшего диалогового окошка. Это функционал нашего с вами написанного скрипта.
Взаимодействие вас и страницы сайта при помощи javascript
Как я и упоминал выше, javascript был создан в первую очередь для повышения функционала наших веб страниц и повышения их динамики. Мы уже с вами получили результат программы на выходе, этакое окно с предупреждением, понимаю, что не совсем впечатлительно, но это результат. Теперь давайте передадим что либо на вход программе. Давайте я вам дам несколько строк кода, а потом просто прокомментирую их значение ниже:
1 2 |
var name = prompt("Как вас зовут?"); alert("Привет, "+ name); |
Итак первая строчка кода, все написано в нижнем регистре, используются двойные кавычки, скобки и строка с вопросом вашего имени. Обратите внимание на точку с запятой в конце первой и второй строки, они обязательны и указывают на окончание оператора, определенной инструкции.
Давайте взглянем еще раз на первую строку, она выполняет два действия, первое это вопрос вашего имени, который выполняет оператор prompt и второе, сохранение вашего имени в переменную var с именем name. То есть получается некий ящичек с названием name и содержимым вашего имени. Что же такое переменная var — это контейнер, емкость, которая может хранить разные данные полученные как путем взаимодействия с пользователем в окне браузера, так и введенные нами в исходном коде.
Также вы уже догадались, что оператор prompt создает в вашем браузере диалоговое окно с запросом на ввод данных. Мы могли и не написать вопрос вашего имени, но окно все равно было бы диалоговым, ибо за это отвечает оператор prompt, а чтобы информация, которую введем в поле ввода была сохранена мы и создали переменную name.
Если говорить о второй строке, то вам уже знаком оператор alert, он вызывает раздражающее окошко в вашем браузере требующее нажать ок или крестик в правом верхнем уголке. Но так же вы заметили, что с первого знакомства с оператором alert, кое что изменилось, там мы писали вот так («Hello world»), а здесь появился + да еще и какой-то name.
Давайте разберемся, name это созданная переменная в которой будет храниться имя введенное в окне браузера. При вызове окна оператором alert происходит следующее, строка Привет присоединяется к значению находящемуся в переменной name и на выходе мы получаем Привет, (ваше имя).
Я объясняю насколько это позволяет сделать текстовый вариант преподавания, очень надеюсь на понимание вами моих советов и примеров. Рекомендую используя операторы prompt и alert, а также переменную var поупражняться с разными вариантами запросов. Например спросите, сколько вам лет, а переменную var уже не name называйте, а скажем age.
Я жду ваши вопросы и благодарности в виде комментариев, это способствует моему желанию писать дальше и помогать вам в освоении замечательного языка javascript/
Спасибо!
Очень доходчиво и интересно написано. Добавил вас в закладки. Пожалуйста, не останавливайтесь с уроками. Было бы классно, если бы в дальнейшем вы потихоньку учили нас писать скрипты. Это же так здорово, когда ты сам своими руками создаешь что то.