Джава скрипт обучение с нуля. JavaScript Основы

JavaScript is a programming language that adds interactivity to your website (for example games, responses when buttons are pressed or data is entered in forms, dynamic styling, and animation). This article helps you get started with this exciting language and gives you an idea of what is possible.

What is JavaScript, really?

Important : If you haven"t been following along with the rest of our course, download this example code and use it as a starting point.

Variables Variable Explanation Example String Number Boolean Array Object
A sequence of text known as a string. To signify that the value is a string, you must enclose it in quote marks. let myVariable = "Bob";
A number. Numbers don"t have quotes around them. let myVariable = 10;
A True/False value. The words true and false are special keywords in JS, and don"t need quotes. let myVariable = true;
A structure that allows you to store multiple values in one single reference. let myVariable = ;
Refer to each member of the array like this:
myVariable , myVariable , etc.
Basically, anything. Everything in JavaScript is an object, and can be stored in a variable. Keep this in mind as you learn. let myVariable = document.querySelector("h1");
All of the above examples too.

So why do we need variables? Well, variables are needed to do anything interesting in programming. If values couldn"t change, then you couldn"t do anything dynamic, like personalize a greeting message or change the image displayed in an image gallery.

Comments

You can put comments into JavaScript code, just as you can in CSS:

/* Everything in between is a comment. */

If your comment contains no line breaks, it"s often easier to put it behind two slashes like this:

// This is a comment

Operators Events

Real interactivity on a website needs events. These are code structures which listen for things happening in the browser and runs code in response. The most obvious example is the click event , which is fired by the browser when you click on something with your mouse. To demonstrate this, enter the following into your console, then click on the current webpage:

Document.querySelector("html").onclick = function() { alert("Ouch! Stop poking me!"); }

There are many ways to attach an event to an element. Here we select the element, setting its onclick handler property equal to an anonymous (i.e. nameless) function, which contains the code we want the click event to run.

Document.querySelector("html").onclick = function() {};

is equivalent to

Let myHTML = document.querySelector("html"); myHTML.onclick = function() {};

It"s just shorter.

Supercharging our example website

Now we"ve gone over a few JavaScript basics, let"s add a few cool features to our example site to see what is possible.

Adding an image changer

In this section, we"ll add an additional image to our site using some more DOM API features, using some JavaScript to switch between the two when the image is clicked.

  • First of all, find another image you"d like to feature on your site. Be sure it is the same size as the first image, or as close as possible.
  • Save this image in your images folder.
  • Rename this image "firefox2.png" (without quotes).
  • Go to your main.js file, and enter the following JavaScript. (If your "Hello world!" JavaScript is still there, delete it.) let myImage = document.querySelector("img"); myImage.onclick = function() { let mySrc = myImage.getAttribute("src"); if(mySrc === "images/firefox-icon.png") { myImage.setAttribute ("src","images/firefox2.png"); } else { myImage.setAttribute ("src","images/firefox-icon.png"); } }
  • Save all files and load index.html in the browser. Now when you click the image, it should change to the other one!

    • If you get stuck, you can compare your work with our finished example code on GitHub .

    We have barely scratched the surface of JavaScript. If you have enjoyed playing, and wish to advance even further, head to our JavaScript learning topic .

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

    Как именно? У меня примерно 100 статей в блоге, посвящено этому. К примеру, « » или « ». Что уж говорить о тех, кто собирается заняться чем-то серьезным? Компьютерная грамотность среди населения растет, а вместе с ней и количество обучающих материалов. Осталось лишь найти лучшие.

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

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

    Вопреки обычаю не стану долго ходить вокруг да около. Информации много. Приступим.

    Бесплатные занятия по JavaScript

    Финансовый вопрос для множества начинающих программистов имеет первостепенное значение. Это вполне логично. Интернет изначально создавался как база знаний, в которой каждый может найти интересующую информацию. «С чего это вдруг я должен платить?», — вполне естественный вопрос.

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

    К счастью, существуют всякие акции, бонусы и курсы, созданные для повышения PR разработчиков. Малоизвестные школы создают материалы, но первое время, ради отзывов и рецензий, готовы предоставлять их бесплатно. Нужно только попасть в нужное место и найти лучшее для этого время. Мне удалось отыскать неплохой вариант, которым я с удовольствием с вами сейчас поделюсь.

    Если вы ничего не смыслите в JS (это всемирное сокращение JavaScript), могу предложить подборку видео с YouTube. Это вводный курс для обучения с нуля, созданный онлайн школой Хакслет.

    Вы также можете получить курс «Основы программирования » с заданиями на официальном сайте компании. В 17 часов на обучение входят 27 уроков и 21 практическое упражнение.

    После того, как основы будут изучены, можно перейти к следующему шагу «JS: подготовка к работе ». Доступ также предоставляется бесплатно.

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

    Англоязычные тексты, курсы, отсылки к знакомым ресурсами типа Лайфхакер и Хабра внушают доверие. Однако, основным преимуществом, на мой взгляд, пока является бесплатность.

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


    Если нет желания тратить время и изучать так много, можете «выкупить» только ту информацию, что касается JS: «JavaScript. Уровень один» и «JavaScript. Уровень два». Правда, думаю, что в этом случае о стажировке придется забыть. Эту информацию следует уточнить у разработчиков.

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

    • Перевод

    Материал, перевод которого мы сегодня публикуем, посвящён основам JavaScript и предназначен для начинающих программистов. Его можно рассматривать и как небольшой справочник по базовым конструкциям JS. Здесь мы, в частности, поговорим о системе типов данных, о переменных, о массивах, о функциях, о прототипах объектов, и о некоторых других особенностях языка.

    Примитивные типы данных В JavaScript имеются следующие примитивные типы данных: number , boolean , string , undefined , null . Сразу нужно отметить, что, при работе с примитивными типами данных, например, со строковыми литералами, мы, даже не проводя явного преобразования, сможем обращаться к их методам и свойствам. Дело тут в том, что при попытке выполнения подобных операций литералы автоматически оснащаются соответствующей объектной обёрткой.▍Числа В JavaScript имеется лишь один тип чисел - это числа двойной точности с плавающей запятой. Это ведёт к тому, что результаты вычисления некоторых выражений арифметически неверны. Возможно, вы уже знаете, что в JS значение выражения 0.1 + 0.2 не равно 0.3 . В то же время, при работе с целыми числами таких проблем не наблюдается, то есть, 1 + 2 === 3 .

    В JavaScript имеется объект Number , представляющий собой объектную обёртку для числовых значений. Объекты типа Number можно создавать либо используя команду вида var a = new Number(10) , либо можно полагаться на автоматическое поведение системы, описанное выше. Это, в частности, позволяет вызывать методы, хранящиеся в Number.prototype в применении к числовым литералам:

    (123).toString(); //"123" (1.23).toFixed(1); //"1.2"
    Существуют глобальные функции, предназначенные для преобразования значений других типов в числовой тип. Это - parseInt() , parseFloat() и конструкция Number() , которая в данном случае выступает в виде обычной функции, выполняющей преобразование типов:

    ParseInt("1") //1 parseInt("text") //NaN parseFloat("1.234") //1.234 Number("1") //1 Number("1.234") //1.234
    Если в ходе операции с числами получается нечто, не являющееся числом (в ходе неких вычислений, или при попытке преобразования чего-либо в число), JavaScript не выдаст ошибку, а представит результат подобной операции в виде значения NaN (Not-a-Number, не число). Для того, чтобы проверить, является ли некое значение NaN , можно воспользоваться функцией isNaN() .

    Арифметические операции JS работают вполне привычным образом, но надо обратить внимание на то, что оператор + может выполнять и сложение чисел, и конкатенацию строк.

    1 + 1 //2 "1" + "1" //"11" 1 + "1" //"11"

    ▍Строки Строки в JavaScript представляют собой последовательности символов Unicode. Строковые литералы создают, заключая текст, который нужно в них поместить, в двойные ("") или одинарные ("") кавычки. Как уже было сказано, при работе со строковыми литералами мы можем полагаться на соответствующую объектную обёртку, в прототипе которой имеется множество полезных методов, среди них - substring() , indexOf() , concat() .

    "text".substring(1,3) //ex "text".indexOf("x") //2 "text".concat(" end") //text end
    Строки, как и другие примитивные значения, иммутабельны. Например, метод concat() не модифицирует существующую строку, а создаёт новую.

    ▍Логические значения Логический тип данных в JS представлен двумя значениями - true и false . Язык может автоматически преобразовывать различные значения к логическому типу данных. Так, ложными, помимо логического значения false , являются значения null , undefined , "" (пустая строка), 0 и NaN . Всё остальное, включая любые объекты, представляет собой истинные значения. В ходе выполнения логических операций всё, что считается истинным, преобразуется к true , а всё, что считается ложным, преобразуется к false . Взгляните на следующий пример. В соответствии с вышеизложенными принципами пустая строка будет преобразована к false и в результате выполнения этого кода в консоль попадёт строка This is false .

    Let text = ""; if(text) { console.log("This is true"); } else { console.log("This is false"); }

    Объекты Объекты - это динамические структуры, состоящие из пар ключ-значение. Значения могут иметь примитивные типы данных, могут быть объектами или функциями.

    Объекты проще всего создавать, используя синтаксис объектных литералов:

    Let obj = { message: "A message", doSomething: function() {} }
    Свойства объекта можно, в любое время, читать, добавлять, редактировать и удалять. Вот как это делается:

    • Чтение свойств: object.name, object .
    • Запись данных в свойства (если свойство, к которому обращаются, не существует, добавляется новое свойство с указанным ключом): object.name = value , object = value .
    • Удаление свойств: delete object.name , delete object .
    Вот несколько примеров:

    Let obj = {}; // создание пустого объекта obj.message = "A message"; // добавление нового свойства obj.message = "A new message"; // редактирование свойства delete object.message; // удаление свойства
    Объекты в языке реализованы в виде хэш-таблиц. Простую хэш-таблицу можно создать, используя команду Object.create(null) :

    Let french = Object.create(null); french["yes"] = "oui"; french["no"] = "non"; french["yes"];//"oui"
    Если объект нужно сделать иммутабельным, можно воспользоваться командой Object.freeze() .

    Для перебора всех свойств объекта можно воспользоваться командой Object.keys() :

    Function logProperty(name){ console.log(name); //имя свойства console.log(obj); // значение свойства } Object.keys(obj).forEach(logProperty);

    ▍Сравнение значений примитивных типов и объектов При практической работе с примитивными значениями можно, как уже было сказано, воспринимать их как объекты, у которых есть свойства и методы, хотя объектами они не являются. Примитивные значения иммутабельны, внутренняя структура объектов может меняться.Переменные В JavaScript переменные можно объявлять, используя ключевые слова var , let и const .

    При использовании ключевого слова var можно объявить переменную, и, если надо - инициализировать её неким значением. Если переменная не инициализирована, её значением является undefined . Переменные, объявленные с использованием ключевого слова var , имеют функциональную область видимости.

    Ключевое слово let очень похоже на var , разница заключается в том, что переменные, объявленные с ключевым словом let , имеют блочную область видимости.

    Блочную область видимости имеют и переменные объявленные с помощью ключевого слова const , которые, учитывая то, что значения подобных переменных нельзя изменять, правильнее будет называть «константами». Ключевое слово const , которое «замораживает» значение переменной, объявленной с его использованием, можно сравнить с методом Object.freeze() , «замораживающим» объекты.

    Если переменная объявлена за пределами какой-либо функции, её область видимости является глобальной.

    Массивы Массивы в JavaScript реализованы с использованием объектов. Как результат, говоря о массивах, мы, фактически, обсуждаем объекты, похожие на массивы. Работать с элементами массива можно, используя их индексы. Числовые индексы преобразуются в строки и используются как имена для доступа к значениям элементов массивов. Например, конструкция вида arr аналогична конструкции вида arr["1"] , и та и другая дадут доступ к одному и тому же значению: arr === arr["1"] . В соответствии с вышесказанным, простой массив, объявленный командой let arr = ["A", "B", "C"] , представляется в виде объекта примерно следующего вида:

    { "0": "A", "1": "B", "2": "C" }
    Удаление элементов массива с использованием команды delete оставляет в нём «дыры». Для того чтобы избежать этой проблемы, можно использовать команду splice() , но работает она медленно, так как, после удаления элемента, перемещает оставшиеся элементы массива, фактически, сдвигая их к началу массива, влево.

    Let arr = ["A", "B", "C"]; delete arr; console.log(arr); // ["A", empty, "C"] console.log(arr.length); // 3
    Методы массивов позволяют легко реализовывать такие структуры данных, как стеки и очереди:

    // стек let stack = ; stack.push(1); // stack.push(2); // let last = stack.pop(); // console.log(last); // 2 // очередь let queue = ; queue.push(1); // queue.push(2); // let first = queue.shift();// console.log(first); // 1

    Функции Функции в JavaScript являются объектами. Функции можно назначать переменным, хранить в объектах или массивах, передавать в виде аргументов другим функциям и возвращать из других функций.

    Существует три способа объявления функций:

    • Классическое объявление функции (Function Declaration или Function Statement).
    • Использование функциональных выражений (Function Expression), которые ещё называют функциональными литералами (Function Literal).
    • Использование синтаксиса стрелочных функций (Arrow Function).
    ▍Классическое объявление функции При таком подходе к объявлению функций действуют следующие правила:
    • Первым ключевым словом в строке объявления функции является function .
    • Функции необходимо назначить имя.
    • Функцию можно использовать в коде, находящимся до её объявления благодаря механизму подъёма объявления функции в верхнюю часть области видимости, в которой она объявлена.
    Вот как выглядит классическое объявление функции:

    Function doSomething(){}

    ▍Функциональные выражения При использовании функциональных выражений нужно учитывать следующее:
    • Ключевое слово function уже не является первым словом в строке объявления функции.
    • Наличие имени у функции необязательно. Возможно применение как анонимных, так и именованных функциональных выражений.
    • Команды вызова таких функций должны следовать за командами их объявления.
    • Такую функцию можно запустить сразу же после объявления, воспользовавшись синтаксисом IIFE (Immediately Invoked Function Expression - немедленно вызываемое функциональное выражение).
    Функциональное выражение выглядит так:

    Let doSomething = function() {}

    ▍Стрелочные функции Стрелочные функции, по сути, можно считать «синтаксическим сахаром» для создания анонимных функциональных выражений. Надо отметить, что у таких функций нет собственных сущностей this и arguments . Объявление стрелочной функции выглядит так:

    Let doSomething = () = > {};

    ▍Способы вызова функций Функции можно вызывать различными способами.Обычный вызов функции doSomething(arguments) Вызов функции в виде метода объекта theObject.doSomething(arguments) theObject["doSomething"](arguments) Вызов функции в виде конструктора new doSomething(arguments) Вызов функции с использованием метода apply() doSomething.apply(theObject, ) doSomething.call(theObject, arguments) Вызов функции с использованием метода bind() let doSomethingWithObject = doSomething.bind(theObject); doSomethingWithObject();
    Функции можно вызывать с большим или меньшим количеством аргументов, чем то количество параметров, которое было задано при их объявлении. В ходе работы функции «лишние» аргументы будут просто проигнорированы (хотя у функции будет доступ к ним), отсутствующие параметры получат значение undefined .

    У функций есть два псевдо-параметра: this и arguments .

    ▍Ключевое слово this Ключевое слово this представляет собой контекст функции. Значение, на которое оно указывает, зависит от того, как была вызвана функция. Вот какие значения принимает ключевое слово this в зависимости от способа вызова функции (они, с примерами кода, конструкции из которых используются здесь, описаны выше):
    • Обычный вызов функции - window / undefined .
    • Вызов функции в виде метода объекта - theObject .
    • Вызов функции в виде конструктора - новый объект.
    • Вызов функции с использованием метода apply() - theObject .
    • Вызов функции с использованием метода bind() - theObject .
    ▍Ключевое слово arguments Ключевое слово arguments - это псевдопараметр, который даёт доступ ко всем аргументам, использованным при вызове функции. Он похож на массив, но массивом не является. В частности, у него нет методов массива.

    Function reduceToSum(total, value){ return total + value; } function sum(){ let args = Array.prototype.slice.call(arguments); return args.reduce(reduceToSum, 0); } sum(1,2,3);
    Альтернативой ключевому слову arguments является новый синтаксис оставшихся параметров. В следующем примере args - это массив, содержащий всё, что передано функции при вызове.

    Function sum(...args){ return args.reduce(reduceToSum, 0); }

    ▍Оператор return Функция, в которой отсутствует выражение return , возвратит undefined . Используя ключевое слово return , обращайте внимание на то, как работает механизм автоматической вставки точки с запятой. Например, следующая функция вернёт не пустой объект, а значение undefined:

    Function getObject(){ return { } } getObject()
    Для того чтобы избежать подобной проблемы, открывающую фигурную скобку нужно расположить на той же строке, на которой находится оператор return:

    Function getObject(){ return { } }

    Динамическая типизация JavaScript является языком с динамической типизацией. Это означает, что конкретные значения имеют типы, а переменные - нет. Во время выполнения программы в одну и ту же переменную можно записывать значения разных типов. Вот пример функции, которая работает со значениями разных типов:

    Function log(value){ console.log(value); } log(1); log("text"); log({message: "text"});
    Для выяснения типа данных, хранящихся в переменной, можно использовать оператор typeof() :

    Let n = 1; typeof(n); //number let s = "text"; typeof(s); //string let fn = function() {}; typeof(fn); //function

    Однопоточная модель выполнения Среда выполнения JavaScript является однопоточной. Это, в частности, выражается в невозможности одновременного выполнения двух функций (если не учитывать возможности асинхронного выполнения кода, которые мы тут не затрагиваем). В среде выполнения имеется так называемая очередь событий (Event Queue), хранящая список заданий, которые нужно обработать. Как результат, для однопоточной схемы выполнения JS несвойственна проблема взаимных блокировок ресурсов, поэтому тут не нужен механизм блокировок. Однако, код, попадающий в очередь событий, должен выполняться быстро. Если перегрузить тяжёлой работой, в браузерном приложении, главный поток, страница приложения не будет реагировать на воздействия пользователя и браузер предложит закрыть эту страницу.Обработка исключений В JavaScript имеется механизм для обработки исключений. Работает он по вполне обычному для подобных механизмов принципу: код, который может вызвать ошибку, оформляют с использованием конструкции try/catch . Сам код находится в блоке try , ошибки обрабатываются в блоке catch .

    Интересно отметить, что иногда JavaScript, при возникновении внештатных ситуаций, не выдаёт сообщений об ошибках. Это связано с тем фактом, что JS не выбрасывал ошибки до принятия стандарта ECMAScript 3.

    Например, в следующем фрагменте кода попытка изменения «замороженного» объекта завершится неудачно, но исключение выдано не будет.

    Let obj = Object.freeze({}); obj.message = "text";
    Некоторые из «молчаливых» ошибок JS проявляются в строгом режиме, включить его можно, воспользовавшись конструкцией "use strict"; .

    Система прототипов В основе таких механизмов JS, как функции-конструкторы, команда Object.create() , ключевое слово class , лежит система прототипов.
    Рассмотрим следующий пример:

    Let service = { doSomething: function() {} } let specializedService = Object.create(service); console.log(specializedService.__proto__ === service); //true
    Здесь, для создания объекта specializedService , прототипом которого нужно было сделать объект service , использована команда Object.create() . В результате оказывается, что метод doSomething() можно вызвать, обратившись к объекту specializedService . Кроме того, это означает, что свойство __proto__ объекта specializedService указывает на объект service .

    Создадим теперь похожий объект с использованием ключевого слова class:

    Class Service { doSomething(){} } class SpecializedService extends Service { } let specializedService = new SpecializedService(); console.log(specializedService.__proto__ === SpecializedService.prototype);
    Методы, объявленные в классе Service , будут добавлены в объект Service.prototype . Экземпляры класса Service будут иметь тот же прототип (Service.prototype). Все экземпляры будут делегировать вызовы методов к объекту Service.prototype . В результате оказывается, что методы объявляются лишь один раз, в Service.prototype , после чего «наследуются» всеми экземплярами класса.

    ▍Цепочка прототипов Объекты могут быть «наследниками» других объектов. У каждого объекта есть прототип, методы которого ему доступны. Если попытаться обратиться к свойству, которого нет в самом объекте, JavaScript приступит к его поиску в цепочке прототипов. Этот процесс будет продолжаться до тех пор, пока свойство не будет найдено, или пока поиск не достигнет конца цепочки.О функциональном программировании в JavaScript В JavaScript функции являются объектами первого класса, язык поддерживает механизм замыканий. Это открывает путь к реализации методик функционального программирования в JS. В частности, речь идёт о возможности применения функций высшего порядка.

    Замыкание - это внутренняя функция, у которой есть доступ к переменным, объявленным внутри родительской функции, даже после выполнения родительской функции.

    Функция высшего порядка - это функция, которая способна принимать другие функции в качестве аргументов, возвращать функции, или делать и то и другое.

    Функциональное программирование в JS освещается во множестве публикаций. Если вам это интересно - вот несколько материалов на данную тему, посвящённых

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

    Примечание. Данный урок предназначен в большей степени для тех пользователей, которые понимают общие принципы программирования, а также знают основы HTML. Если Вы не знаете что такое тег ol и li, то Вам лучше познакомиться сначала с основами HTML . Т акже, если Вы не знаете что это за конструкция if…then…else (это общий вид), рекомендую узнать общие принципы программирования в не зависимости от языка программирования. Только в этом случае можно начать изучать JavaScript. И этот урок будет для Вас максимально полезен.

    Основы JavaScript — теория

    И начнем как обычно с основ, т.е. с определения, что такое JavaScript? JavaScript – это скриптовый язык программирования, код которого выполняется на стороне клиента (пользователя ). Применяется обычно для организации на сайте динамических HTML страниц, без перезагрузки самой страницы, т.е. без обращения к серверу.

    Зачем нужен JavaScript?

    А зачем Вы спросите организовывать динамические страницы?

    Во-первых , это красиво, удобно и современно.

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

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

    Сейчас давайте разберемся с принципами этого языка программирования. JavaScript не строго типизированный язык программирования. Точку с запятой в конце каждой строки можно не ставить, но лучше ставить, для того чтобы самим лучше понимать и читать код, но если Вы вдруг забыли поставить точку с запятой, то никакой ошибки не будет в отличие, например, от языка PHP.

    В процессе формирования HTML страницы браузером, сам браузер не только отрисовывает ее, но и формирует так называемое дерево элементов, которое состоит из узлов. А каждый узел формируется на основе кода HTML. Исходя из всего сказанного, можно сказать, что JavaScript может изменять это дерево и соответственно изменять сам код HTML, а как следствие изменять отображение HTML страницы в браузере. Под изменением дерева элементов понимается как само изменение некоторых узлов, так и удаление, добавление этих самых узлов. Чтобы было понятней, узел формируется на основе элементов в HTML, другими словами, тегов или самого содержимого, т.е. текста. Например, следующий код HTML можно отобразить в виде дерева элементов.

    Код HTML:

    Привет

    Узлы этого кода:

    Корневой Узел – html

    Дочерний Узел узла HTML — body

    Дочерний Узел узла body – p

    Дочерний Узел узла p — сам текст (текст является отдельным узлом, это нужно помнить при добавлении, удалении и изменении текста ).

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

    По началу мне показалось, что JavaScript очень схож, с серверным языком программирования PHP, но это только в некоторых конструкциях, да, кстати, он также схож и с просто языком программирования JAVA, но на самом деле схоже написание нескольких конструкций и называние этих языков, но в остальном, имеется в виду в принципах программирования, это две разные вещи. Кстати, JavaScript никак не связан с языком JAVA, если только названием, поэтому не путайте JavaScript — это один язык программирования, а Java — это совсем другой. Но почему его назвали именно JavaScript? Да потому что в то время, когда разрабатывали JavaScript, был сильно популярен язык Java, и поэтому разработчики JavaScript решили переименовать свой язык LiveScript (так он изначально назывался ) в JavaScript, а также изменили написание базовых конструкций, похожих на Java. Кстати, JavaScript официально называется ECMAScript , существует одноименный стандарт. Это для того чтобы не было проблем с владельцами торговой марки Java. Таким образом, JavaScript и JAVA — это совершенно два разных языка программирования. А почему у всех на устах название JavaScript? Да потому что просто так привыкли, и все называют язык ECMAScript языком JavaScript.

    Пример кода JavaScript

    Хватит лирического отступления от сути нашего вопроса, перейдем к тому, как нам изменять эти самые узлы в этом дереве. Как обычно мы это сделаем на примере. Ниже у нас есть небольшой список, как нам в него добавить (или удалить ) еще несколько значений? Попробуйте нажать «Добавить в список » и у Вас откроется окно для ввода, введите название нового пункта и нажмите OK. Как все это происходит, давайте разбираться.

    Сам пример:

  • Первоя строка
  • Вторая строка
  • Третья строка

    • Код JavaScript:

    //пишем функцию добавления нового пункта в списке function addLi() { var stroka = prompt("Введите название строки:", "");//для ввода названия новой строки if (stroka){ var ol = document.getElementById ("spisokst");//находим наш список var li = document.createElement("LI");//создаем новый элемент списка ol.appendChild(li);//присваиваем нашему списку новый элемент var text = document.createTextNode(stroka);//создаем новый узел текст li.appendChild(text);//присваиваем этот текст нашему новому пункту списка } } //пишем функцию удаления пунктов из списка function deleteLi() { var ol = document.getElementById ("spisokst");//находим наш список var lastLi = ol.lastChild;//заводим переменную и храним в ней последний элемент нашего списка //проверяем на наличие нашего элемента, исключая пробелы, табуляции и комментарии while (lastLi && lastLi.nodeType != 1){ lastLi = lastLi.previousSibling; } if (lastLi){ lastLi.parentNode.removeChild(lastLi);//удаляем пункт списка, //если конечно в списке еще что-то осталось } }

    Код HTML:

  • Первоя строка
  • Вторая строка
  • Третья строка
    • Добавить в список

    		Удалить из списка

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

    У нас есть некий список, помеченный id = spisokst, для того чтобы нам было его легче найти, из JavaScript. Затем мы пишем две функции на javascript:

    1. addLi() –для добавления новых строк.

    В функции addLi мы просим пользователя ввести название новой строки с помощью встроенной функции prompt, и помещаем это название в переменную stroka (как Вы уже, наверное, поняли, переменные объявляются с помощью оператора var ).

    Затем с помощью метода getElementById объекта document, находим нужный нам id списка.

    Потом с помощью метода createElement все того же объекта document, создаем элемент LI (Вы, наверное, заметили, что при создании элемента, его название пишется с большой буквы ).

    Затем мы создаем новый узел текст и передаем ему значение, которое ввел пользователь в нашу переменную stroka.

    И снова присваиваем, только уже элементу li, новое его значение (или его дочерний узел, т.е. текст ) с помощью метода appendChild.

    2. deleteLi() – для удаления этих строк.

    Здесь мы также находим наш список с помощью метода document.getElementById и передаем ему значение spisokst.

    Затем заводим новую переменную lastLi и присваиваем ей значение последнего пункта в нашем списке (ol.lastChild).

    Здесь существует небольшая проблема, по стандарту при формировании страницы HTML все пробелы, табуляции, комментарии в коде HTML учитываются, но не выводятся на экран, поэтому запомните, при обращении к последним элементам, какого-нибудь узла, там может оказаться пробел, табуляция или комментарии, поэтому результат может немного отличатся от действительного, например, если бы я здесь не учел этого, то у меня пункты в списке удалялись через один или, в некоторых случаях, через два клика на кнопку «Удалить из списка » и чтобы этого избежать я проверял, что находится в последнем узле. Если это пока не понятно, можете не запоминать:)

    3. Также хочу отметить, что функционал кнопок также реализован на javascript путем обработки событий, например, при клике (событие — onClick=»javascript:addLi()») на кнопку «Добавить в список » запускается функция addLi(), а при клике на кнопку «Удалить из списка » запускается функция deleteLi(). Остальное сделано для визуальных эффектов, пока это можете не запоминать. Например, событие onmouseover означает, что при наведении курсора мыши будет что-то выполняться.

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

    JavaScript был создан программистом Brendan Eich из Netscape и представлен в декабре 1995 года под названием LiveScript. Довольно быстро он был переименован в JavaScript, хотя официальным названием JavaScript является ECMAScript. ECMAScript разрабатывается и поддерживается Международной организацией ECMA (Европейская ассоциация производителей компьютеров).

    Что такое JavaScript?
    1) JavaScript — язык сценариев, или скриптов. Скрипт представляет собой программный код — набор инструкций, который не требует предварительной обработки (например, компиляции) перед запуском. Код JavaScript интерпретируется движком браузера во время загрузки веб-страницы. Интерпретатор браузера выполняет построчный анализ, обработку и выполнение исходной программы или запроса.

    2) JavaScript — объектно-ориентированный язык с прототипным наследованием. Он поддерживает несколько встроенных объектов, а также позволяет создавать или удалять свои собственные (пользовательские) объекты. Объекты могут наследовать свойства непосредственно друг от друга, образуя цепочку объект-прототип.

    JavaScript на веб-страницах 1. Подключение сценариев к html-документу

    Сценарии JavaScript бывают встроенные , т.е. их содержимое является частью документа, и внешние , хранящиеся в отдельном файле с расширением.js . Сценарии можно внедрить в html-документ следующими способами:

    или тело страницы.

    Этот способ обычно применяется для сценариев большого размера или сценариев, многократно используемых на разных веб-страницах.

    В виде обработчика события .
    Каждый html-элемент имеет JavaScript-события, которые срабатывают в определенный момент. Нужно добавить необходимое событие в html-элемент как атрибут, а в качестве значения этого атрибута указать требуемую функцию. Функция, вызываемая в ответ на срабатывание события, является обработчиком события . В результате срабатывания события исполнится связанный с ним код. Этот способ применяется в основном для коротких сценариев, например, можно установить смену цвета фона при нажатии на кнопку:

    var colorArray = ["#5A9C6E", "#A8BF5A", "#FAC46E", "#FAD5BB", "#F2FEFF"]; // создаем массив с цветами фона var i = 0; function changeColor(){ document.body.style.background = colorArray[i]; i++; if(i > colorArray.length - 1){ i = 0; } } Change background

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

    Обычно код JavaScript размещается в заголовке документа (элемент ) или после открывающего тега . Если скрипт используется после загрузки страницы, например, код счетчика, то его лучше разместить в конце документа:

    document.write("Введите свое имя");

    2. Типы данных и переменные в JavaScript

    Компьютеры обрабатывают информацию — данные. Данные могут быть представлены в различных формах или типах. Большая часть функциональности JavaScript реализуется за счет простого набора объектов и типов данных. Функциональные возможности, связанные со строками, числами и логикой, базируются на строковых, числовых и логических типах данных. Другая функциональная возможность, включающая регулярные выражения, даты и математические операции, осуществляется с помощью объектов RegExp, Date и Math.

    Литералы в JavaScript представляют собой особый класс типа данных, фиксированные значения одного из трех типов данных — строкового, числового или логического:

    "это строка" 3.14 true alert("Hellow"); // "Hellow" - это литерал var myVariable = 15; // 15 - это литерал

    Примитивный тип данных является экземпляром определенного типа данных, таких как строковый, числовой, логический, null и undefined .

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

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

    Имя переменной, или идентификатор , может включать только буквы a-z , A-Z , цифры 0-9 (цифра не может быть первой в имени переменной), символ $ (может быть только первым символом в имени переменной или функции) и символ подчеркивания _ , наличие пробелов не допускается. Длина имени переменной не ограничена. Можно, но не рекомендуется записывать имена переменных буквами русского алфавита, для этого они должны быть записаны в Unicode.

    В качестве имени переменной нельзя использовать ключевые слова JavaScript. Имена переменных в JavaScript чувствительные к регистру, что означает, что переменная var message; и var Message; — разные переменные.

    Переменная создается (объявляется) с помощью ключевого слова var , за которым следует имя переменной, например, var message; . Объявлять переменную необходимо перед ее использованием.

    Переменная инициализируется значением с помощью операции присваивания = , например, var message="Hellow"; , т.е. создается переменная message и в ней сохраняется ее первоначальное значение "Hellow" . Переменную можно объявлять без значения, в этом случае ей присваивается значение по умолчанию undefined . Значение переменной может изменяться во время исполнения скрипта. Разные переменные можно объявлять в одной строке, разделив их запятой:

    Var message="Hellow", number_msg = 6, time_msg = 50;

    2.2. Типы данных переменных

    JavaScript является нетипизированным языком, тип данных для конкретной переменной при ее объявлении указывать не нужно. Тип данных переменной зависит от значений, которые она принимает. Тип переменной может изменяться в процессе совершения операций с данными (динамическое приведение типов ). Преобразование типов выполняется автоматически в зависимости от того, в каком контексте они используются. Например, в выражениях, включающих числовые и строковые значения с оператором + , JavaScript преобразует числовые значения в строковые:

    Var message = 10 + " дней до отпуска"; // вернет "10 дней до отпуска"

    Получить тип данных, который имеет переменная, можно с помощью оператора typeof . Этот оператор возвращает строку, которая идентифицирует соответствующий тип.

    Typeof 35; // вернет "number" typeof "text"; // вернет "string" typeof true; // вернет "boolean" typeof ; // вернет "object" typeof undefined; // вернет "undefined" typeof null; // вернет "object"

    Все типы данных в JavaScript делятся на две группы — простые типы данных (primitive data types) и составные типы данных (composite data types) .

    К простым типам данных относят строковый, числовой, логический, null и underfined .

    2.2.1. Строковый тип (string)

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

    Var money = ""; // пустая строка, ноль символов var work = "test"; var day = "Sunday"; var x = "150";

    В строку в двойных кавычках можно включить одиночную кавычку и наоборот. Кавычка того же типа отключается с помощью символа обратного слэша \ (так называемая escape-последовательность ):

    Document.writeln("\"Доброе утро, Иван Иваныч!\"\n"); // выведет на экран "Доброе утро, Иван Иваныч!"

    Строки можно сравнивать, а также объединять с помощью операции конкатенации + . Благодаря автоматическому приведению типов можно объединять числа и строки. Строки являются постоянными, после того, как строка создана, она не может быть изменена, но может быть создана новая строка путем объединения других строк.

    2.2.2. Числовой тип (number)

    Используется для числовых значений. Числа в языке JavaScript бывают двух типов: целые числа (integer) и числа с плавающей точкой (floating-point number) . Целочисленные величины могут быть положительными, например 1 , 2 , и отрицательными, например –1 , –2 , или равными нулю. 1 и 1.0 — одно и то же значение. Большинство чисел в JavaScript записываются в десятичной системе счисления, также может использоваться восьмеричная и шестнадцатеричная системы.

    В десятичной системе значения числовых переменных задаются с использованием арабских цифр 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 .

    В восьмеричном формате числа представляет собой последовательность, содержащая цифры от 0 до 7 и начинающаяся с префикса 0 .

    Для шестнадцатеричного формата добавляется префикс 0x (0X), за которым следует последовательность из цифр от 0 до 9 или букв от a (A) до f (F), соответствующие значениям от 10 до 15 .

    Var a = 120; // целое десятичное числовое значение var b = 012; // восьмеричный формат var c = 0xfff; // шестнадцатеричный формат var d = 0xACFE12; // шестнадцатеричный формат

    Числа с плавающей точкой представляют собой числа с дробной десятичной частью, либо это числа, выраженные в экспоненциальном виде. Экспоненциальная запись чисел предполагает следующий вид: число с дробной десятичной частью, за ним следует буква e , которая может быть указана как в верхнем, так и в нижнем регистре, далее — необязательный знак + или - и целая экспонента.

    Var a = 6.24; // вещественное число var b = 1.234E+2; // вещественное число, эквивалентно 1.234 Х 10² var c = 6.1e-2; // вещественное число, эквивалентно 6.1 Х 10‾²

    2.2.3. Логический тип (boolean)

    Данный тип имеет два значения, true (истина), false (ложь). Используется для сравнения и проверки условий.

    Var answer = confirm("Вам понравилась эта статья?\n Нажмите ОК. Если нет, то нажмите Cancel."); if (answer == true) { alert("Спасибо!"); }

    Также существуют специальные типы простых значений:
    нулевой тип — данный тип имеет одно значение null , которое используется для представления несуществующих объектов.

    неопределенный тип — тип переменной underfined означает отсутствие первоначального значения переменной, а также несуществующее свойство объекта.

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

    2.3. Глобальные и локальные переменные

    Переменные по области видимости делятся на глобальные и локальные . Область видимости представляет собой часть сценария, в пределах которой имя переменной связано с этой переменной и возвращает ее значение. Переменные, объявленные внутри тела функции, называются локальными , их можно использовать только в этой функции. Локальные переменные создаются и уничтожаются вместе с соответствующей функцией.

    Переменные, объявленные внутри элемента , или внутри функции, но без использования ключевого слова var , называются глобальными . Доступ к ним может осуществляться на протяжении всего времени, пока страница загружена в браузере. Такие переменные могут использоваться всеми функциями, позволяя им обмениваться данными.

    Глобальные переменные попадают в глобальное пространство имен , которое является местом взаимодействия отдельных компонентов программы. Не рекомендуется объявлять переменные таким способом, так как аналогичные имена переменных уже могут использоваться любым другим кодом, вызывая сбой в работе скрипта.

    Глобальное пространство в JavaScript представляется глобальным объектом window . Добавление или изменение глобальных переменных автоматически обновляет глобальный объект. В свою очередь, обновление глобального объекта автоматически приводит к обновлению глобального пространства имен.

    Если глобальная и локальная переменная имеют одинаковые имена, то локальная переменная будет иметь преимущество перед глобальной.

    Локальные переменные, объявленные внутри функции в разных блоках кода, имеют одинаковые области видимости. Тем не менее, рекомендуется помещать объявления всех переменных в начале функции.

    mob_info