Основы языка JavaScript

Введение в JavaScript

Приветствую Вас дорогие читатели! Раз уж Вы открыли данную статью, то наверняка хотите познакомиться поближе с таким языком как JavaScript. Это замечательно!

С помощью данного языка Вы сможете сделать Вашу страницу красивее, динамичнее и привлекательнее. О более конкретных возможностях языка JavaScript Вы можете прочитать на страницу описания раздела Javascript

Что нужно знать, перед тем как начать изучение языка javaScript

До того как начать изучение языка JavaScript Вы должны хорошо знать HTML и CSS. Если Вы не знаете этих языков, то нет смысла идти дальше. Что касается зыка PHP, то это серверный язык и перед тем как начать изучение JavaScript, знать этого языка вовсе необязательно. Языки JavaScript и PHP совсем разные и между ними нет ничего общего.

Весь код JavaScript нужно писать межу тегом script.

<script type ="text/javascript">
    //Код JavaScript
</script>

Блок JavaScript кода, можно писать в html файлы или в файлы с расширением .php или же в отдельном файле с расширением .js, который потом подключается в html или php файл таким образом:

<script type ="text/javascript" src ="myscript.js"></script>

Чистый код JavaScript должен находиться перед закрывающим тегом </body>. В других местах он просто не будет работать. Это касается и подключения отдельных js файлов.

<!DOCTYPE html >
<html>
    <head>
        <meta charset="utf-8" />
        <title>Главная страница</title>
        <style type ="text/css">

        </style>
    </head>
    <body>
        <!-- HTML код-->

        <!-- Подключение js файла -->
        <script type ="text/javascript" src ="myscript.js"></script>
        <script type ="text/javascript">

        </script>
    </body>
</html>

Дело в том что JavaScript, сокращенно JS, работает с html тегами, и до того как начать свою работу, html теги должны быть уже загружены. Загрузка страницы идет сверху вниз.

Теперь напишем наш первый традиционный скрипт "Hello World". Создаем html файл с произвольным названием, и как я уже сказал, перед закрывающим тегом </body> пишем этот код:

<script type ="text/javascript">
    document.write("Hello World");
</script>

Сохраняем и открываем страницу в браузере. Этот код выведет на страницу строчку "Hello World"

javascript hello world

Как Вы уже поняли, в JavaScript текст выводится на экран с помощью метода write(), который применяется к объекту document(текущая страница).

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

document.write("Строковое значение");
document.write(1214564);

Внутри кавычек можно использовать различные html теги, такие как p, div, strong и другие.

document.write("<p> Параграф </p>");

Также часто необходимо к html тегам дописать различные атрибуты. Например, для ссылки необходимо указать обязательный атрибут href. И здесь возникает небольшая проблема с кавычками.

Дело в том, что внутри двойных кавычек мы не можем использовать двойные кавычки. Например, мы не можем вывести значение атрибута href таким образом:

document.write("<a href="//sozdatisite.ru">my site</a>");

В таком случае мы получим ошибку, потому что текстом для вывода является только тот, который находится внутри кавычек. В данном примере это "<a href = " то что находится после этого, не находятся в кавычках и поэтому значение атрибута href нужно обрамлять в одинарные кавычки.

document.write("<a href='//sozdatisite.ru'>my site</a>");

Или же можно воспользоваться экранированием кавычек с помощью обратного слеша.

document.write("<a href=\"//sozdatisite.ru\">my site</a>");

Эта же проблема возникает, когда текст выводится с помощью одинарных кавычек. В таком случае значение атрибута можно смело обрамлять двойными кавычками, без экранирования. Или же экранировать одинарные кавычки.

document.write('<a href="//sozdatisite.ru">my site</a>');

Экранирование одинарных кавычек.

document.write('<a href=\'//sozdatisite.ru\'>my site</a>');

Переменные в JavaScript

Переменные объявляются с помощью ключевого слова var, после которой идет название переменной, а дальше знак равно и само значение переменной.

Для примера, выведем на экран с помощью переменной, строчку "Жизнь прекрасна!".

var text = "Жизнь прекрасна!";
document.write(text);

Сохраняем, открываем страницу в браузере и видим что строчка "Жизнь прекрасна!" вывелось без проблем.

javascript переменные

В переменную можно добавить любое значение, строчку, число, строчку с html тегами или же целый текст.

Теперь Я вам покажу, как объединить строку с переменной. Это полезно в случае когда, например одна часть строки должна остаться фиксированной (без изменений) а другая часть должна быть динамичной.

Строка с переменной объединяются с помощью символа +.

var text = "жизнь прекрасна!";
document.write( "Мы знаем что, " + text);

Теперь в браузере будет выведена строчка "Мы знаем, что жизнь прекрасна!".

Свойства и методы в JavaScript

JavaScript использует концепцию ООП(объектно ориентированное программирование), поэтому он работает с объектами, у которых есть свойства и методы.

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

А метод это, какое не будь действие, которое мы хотим применить к данному объекту, например, мы хотим эту машину покрасить или ремонтировать ее. Так вот это действие покрасить, и является методом, который применяется к объекту машина.

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

Продемонстрирую это на примере. Допустим, у нас есть некий блок div, с каким-то произвольным текстом и мы хотим получить содержимое данного блока для того чтобы вывести это содержимое в модальном окне.

Для того чтобы получить доступ к какому то объекту по id, нужно воспользоваться медом getElementById("id_elementa"). Этот метод применяется к объекту document. И после того как получили доступ, можно узнать содержимое данного объекта с помощью свойства innerHTML.

Вот как выглядит это в коде:

HTML код:

<div id ="block">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae nisi, in, sunt deleniti cumque tenetur, ullam officia, pariatur laboriosam fuga non. Animi recusandae, aperiam et quibusdam neque tempora, odit aspernatur!
</div>

JS код:

// получаем доступ к элементу div, у которого id имеет значение block
var object_div = document.getElementById("block");
//Получаем содержимое элемента div
var text = object_div.innerHTML;
alert(text);

И вот результат:

метод alert в JavaScript

Метод alert() применяется к объекту window, которого указать необязательно.

А для того чтобы изменить содержимое данного блока div, нужно написать код немножко иначе.

HTML код:

<div id ="block">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae nisi, in, sunt deleniti cumque tenetur, ullam officia, pariatur laboriosam fuga non. Animi recusandae, aperiam et quibusdam neque tempora, odit aspernatur!
</div>

JS код:

// получаем доступ к элементу div, у которого id имеет значение block
var object_div = document.getElementById("block");
//Изменяем содержимое элемента div
object_div.innerHTML="Новое содержимое для блока div с идентификатором block";

С начало мы также получаем доступ к данному объекту div и после этого вместо того чтобы получить его значение мы ее изменяем.

И вот результат данного кода:

Javascript свойство innerHTML

Разница между свойствами и методами заключается в том, что у методов есть скобки в конце названия, а у свойств нет.

Еще хочу отметить, что у данного языка есть проблемы с кроссбраузерностью. Потому что есть методы и свойства, которые одними браузерами поддерживаются, а другими нет. Поэтому не забывайте проверять Ваш JS код на кроссбраузерность.

Комментарии в JavaScript

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

Существует 2 типа комментариев, это однострочные комментарии и многострочные.

Однострочные комментарии, начинаются с двумя слешами (//) и пишутся в одну строку.

<script type ="text/javascript">
    // Это однострочный комментарии
</script>

А многострочные комментарии начинаются со слешем и звездочкой (/*) и заканчиваются звездочкой и слешем (*/)

<script type ="text/javascript">
    /* 
        Это многострочный комментарий.
        Еще одна комментированная строка.
    */
</script>

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

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Delivered by FeedBurner

Поддержите пожалуйста мой проект!

<< Предыдущая статья

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu920@mail.ru. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: 2016-06-09 01:13:41