Приветствую Вас дорогие читатели! Раз уж Вы открыли данную статью, то наверняка хотите познакомиться поближе с таким языком как JavaScript. Это замечательно!
С помощью данного языка Вы сможете сделать Вашу страницу красивее, динамичнее и привлекательнее. О более конкретных возможностях языка JavaScript Вы можете прочитать на страницу описания
Что нужно знать, перед тем как начать изучение языка javaScriptДо того как начать изучение языка JavaScript Вы должны хорошо знать HTML и CSS . Если Вы не знаете этих языков, то нет смысла идти дальше. Что касается зыка PHP, то это серверный язык и перед тем как начать изучение JavaScript, знать этого языка вовсе необязательно. Языки JavaScript и PHP совсем разные и между ними нет ничего общего.
Весь код JavaScript нужно писать межу тегом script.
//Код JavaScript
Блок JavaScript кода, можно писать в html файлы или в файлы с расширением.php или же в отдельном файле с расширением.js, который потом подключается в html или php файл таким образом:
Чистый код JavaScript должен находиться перед закрывающим тегом . В других местах он просто не будет работать. Это касается и подключения отдельных js файлов.
Главная страница
Дело в том что JavaScript, сокращенно JS, работает с html тегами, и до того как начать свою работу, html теги должны быть уже загружены. Загрузка страницы идет сверху вниз.
Теперь напишем наш первый традиционный скрипт "Hello World" . Создаем html файл с произвольным названием, и как я уже сказал, перед закрывающим тегом пишем этот код:
document.write("Hello World");
Сохраняем и открываем страницу в браузере. Этот код выведет на страницу строчку "Hello World"
Как Вы уже поняли, в JavaScript текст выводится на экран с помощью метода write() , который применяется к объекту document(текущая страница) .
Учтите что, как и в других языках программирования, строковые значения всегда пишутся внутри двойных или одинарных кавычках . Числа можно писать и без кавычек.
Document.write("Строковое значение"); document.write(1214564);
Внутри кавычек можно использовать различные html теги, такие как p, div, strong и другие.
Document.write("
Параграф
");Также часто необходимо к html тегам дописать различные атрибуты. Например, для ссылки необходимо указать обязательный атрибут href. И здесь возникает небольшая проблема с кавычками.
Дело в том, что внутри двойных кавычек мы не можем использовать двойные кавычки. Например, мы не можем вывести значение атрибута href таким образом:
Document.write("my site");
В таком случае мы получим ошибку, потому что текстом для вывода является только тот, который находится внутри кавычек. В данном примере это "">
Здравствуйте, в прошлой статье мы рассматривали синтаксис языка JavaScript. Мы узнали что такое циклы, переменные, массивы, логические операторы, функции и так далее.
Все эти операции проходят внутри страницы и никак не отображаются. Сегодня же мы научимся выводить необходимые данные на экран. Выводить будем обычную числовую переменную с помощью ActionScript, самыми разными способами.
Для того чтобы использовать все способы, которые будут указаны ниже, нам необходимо обращаться к объекту document. Это отдельный элемент языка JavaScript, который предназначен для работы с веб-сайтами.
Первый способ: функция writelnДля вывода переменной таким образом нам необходимо её создать. Напишем такую строку: var message = «Hello World!».
Теперь поговорим о функции writeln. Её лучше всего использовать только при загрузке исходного варианта страницы, так внутренний контент будет изменен.
С помощью таких функций как writeln можно создать страницу, полностью написанную на JavaScript. Кроме этого, данная функция может быть полезна в том случае, когда необходимо уменьшить количество запросов с сервера.
Для того чтобы воспользоваться данной функцией, записываем команду document.writeln, в скобках записываем название нашей переменной, которое затем будет показано на экране.
Обратите внимание! Большинство инструкций для работы с веб-страницей являются составляющими пространства имен document, поэтому его необходимо вписывать перед самой функцией, через точку.
Второй способ: функция alertОна не входит в пространство имен document, как writeln, поэтому его вписывать не нужно. Alert может отлично подойти для отладки кода веб-страницы. Его можно использовать и для взаимодействия с пользователем, но делать это не рекомендуется.
Alert имеет стандартный синтаксис любой JavaScript функции. Сначала записываем команду alert, в скобках записываем значение или переменной.
После этого в верхней части страницы всплывет окно с сообщением для пользователя, которое содержит кнопку «OK».
Данная функция может иметь множество применений, но не стоит злоупотреблять ей при работе с веб-сайтом, так как всплывающие окна могут вывести пользователя из себя. Кроме того, некоторые плагины блокируют функции типа alert.
JAVA
var message = «Hello World!»; document.writeln(«message»); alert(«message»); document.getElementById(«hl»).innerHTML = «message»
Скопировать
Третий способ: функция getElementByIdЭто самый сложный и наиболее популярный способ вывода информации на экран. С его помощью вы сможете изменять текстовый контент вашей HTML страницы.
Как мы знаем — все HTML теги могут иметь идентификаторы. Именно к ним и обращается наша функция. GetElementById находит элемент по его ID, изменяет содержимое тега по желанию, при этом остальной контент остается без изменений.
Данная функция входит в пространство имен document, что требует указывать его перед самой функцией.
Как вы могли заметить, кроме getElementById присутствует непонятная команда innerHTML, после него идет знак равенства и текстовая строка. Так вот, эта команда, вместе со знаком равенства, находит определенный тег и «приравнивает» его содержимое строке в кавычках.
Данный метод лучше всего подходит для вставки текста через JavaScript, поскольку он имеет целый ряд преимуществ:
В этой статье мы поговорили с вами о том, как выводить информацию на экран. Это можно сделать с помощью сообщений, а также меняя внутренний контент веб-страницы. Мы лишь немного затронули пространство имен document, которое имеет целый ряд функция для работы с веб-страницей. В следующих уроках мы ознакомимся с ними детально.
Можете самостоятельно экспериментировать с вышеописанными функциями, либо же скачивайте наши исходники. Удачи в изучении!
Переменные в JavaScript являются контейнерами для хранения различной информации.
Переменные JavaScriptJavaScript переменные являются "контейнерами", в которые Вы можете загружать различную информацию, а позднее извлекать ее обратно.
Каждая JavaScript переменная должна иметь собственное уникальное имя, которое может начинаться с латинской буквы или символа "_".
Обратите внимание: имя переменных в JavaScript не может начинаться с цифр.
Обратите внимание: так как JavaScript чувствителен к регистру, переменные с одинаковыми именами написанными в разном регистре (например var и VAR), будут являться разными переменными.
Создание переменныхСоздание переменных в JavaScript часто называют "объявлением" переменных.
Переменные в JavaScript объявляются с помощью команды var .
//Создаем переменную с именем ex1 var ex1; //Создаем переменную с именем ex2 var ex2;
Созданные выше переменные будут пустыми то есть мы создали контейнеры, но не загрузили в них никакие значения.
Значения могут загружаться в контейнеры также прямо в момент создания как в примере ниже:
//Создаем переменную с именем ex1 содержащую значение 4 var ex1=4; //Создаем переменную с именем ex2 содержащую значение 5 var ex2=5;
Для того, чтобы извлечь значение из созданной ранее переменной, необходимо обратится к ее имени.
В следующем примере мы будем извлекать содержимое переменных и сразу выводить его на страницу с помощью команды document.write.
//Запишем число 4 в переменную ex1
var ex1=4;
//Запишем число 5 в переменную ex2
var ex2=5;
//Выведем содержимое переменной ex1 на страницу
document.write(ex1+"
");
//Выведем содержимое переменной ex2
document.write(ex2+"
");
//Изменим содержимое переменной ex2
ex2=200;
//Выведем новое содержимое переменной ex2
document.write(ex2);
Быстрый просмотр
Строковые переменныеПомимо чисел Вы можете хранить в переменных произвольный текст. Переменные, которые хранят текст, называются строковыми переменными .
При записи текста в переменную обязательно заключайте его в двойные (") или одинарные кавычки (").
//Запишем в переменную ex строку "Привет всем!" var ex="Привет всем!"; //Выведем значение переменной ex на страницу document.write(ex);
Быстрый просмотр
Определение переменных с var и без негоВ JavaScript Вы можете определять переменные с var и без него.
//Создадим новую переменную с var var ex=123; //Создадим новую переменную без var ex2=20;
Вам может показаться, что объявление переменных с var и без него всегда приводят к одинаковому результату, но это действительно так только, когда когда объявление происходит в глобальном контексте (т.е. за пределами всех функций).
Если же объявление происходит в локальном контексте (т.е. в теле какой-либо функции) объявление с var создает локальную переменную (т.е. переменную, которая будет доступна только в теле данной функции и после выполнения функции будет уничтожена), объявление без var создает глобальную переменную (т.е. переменную, которая будет доступна другим функциям внутри данного скрипта).
Обратите внимание: мы подробнее поговорим о локальных и глобальных переменных далее в этом учебнике.
Об удалении и переопределении переменныхПереопределяя переменные Вы не стираете значение, которое хранятся в них.
Var ex=123; var ex; document.write(ex); // Выведет 123
Если Вы хотите удалить переменную в JavaScript и она не была объявлена с помощью var Вы можете использовать оператор delete .
Ex=123; delete ex;
Оператор delete не может удалить переменные объявленные с помощью var, поэтому если переменная была объявлена с помощью var, то единственный способ удалить ее - присвоить ей значение null или undefined.
Var ex=123; ex=null; // или ex=undefined
Сделайте самиЗадание 1 . Исправьте ошибки в коде ниже:
Задание 1
var 33var=33;
document.write(33var);
document.write("
");
var str1=Привет всем!;
document.write(str1);
document.write("
");
var vaR = 288;
document.write(var);
document.write("
");
Задание 2 . Во внешнем файле secred1.js содержится переменные sec1, sec2, sec3 и sec4, которые содержат буквы кодового слова (не по порядку). Подключите внешний файл и узнайте кодовое слово путем вывода значений переменных на страницу.