CoderLessons.com

Учебник JavaScript

Fri, 29 May 2020 23:39:53 +0000

Резюме обучения Javascript

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

что я должна знать?

Ничего! Это абсолютное руководство для начинающих по JavaScript.

Основы Javascript

Руководство	Что такое JavaScript? Полное введение с Hello World! пример
Руководство	Переменная Javascript: объявить, присвоить значение с примером
Руководство	Методы JavaScript в массиве: создание с примером
Руководство	Для, Пока и Делай Пока LOOP в JavaScript (с Примером)
Руководство	Условные операторы JavaScript: IF, Else, Else IF (пример)

Продвинутый Javascript

Руководство	Javascript Определить и вызвать функции с примером
Руководство	Cookies в JavaScript: установить, получить и удалить пример
Руководство	Учебник по DOM JavaScript с примером
Руководство	Учебник по объектно-ориентированному JavaScript (OOJS) с примером
Руководство	Внутренний и внешний JavaScript: учитесь на примере
Руководство	Практические примеры кода с использованием JavaScript
Руководство	JavaScript интервью Вопросы и ответы
Руководство	Фреймворки для модульного тестирования JavaScript
Руководство	Учебник по TypeScript: типы, массивы, перечисление, классы, интерфейсы
Руководство	Typescript и JavaScript: в чем разница?
Руководство	Java против JavaScript: самые важные различия, которые вы должны знать
Руководство	Алгоритм быстрой сортировки в JavaScript
Руководство	Разница между =, == и === в JavaScript [Примеры]
Руководство	90 лучших курсов по сертификации JavaScript
Руководство	14 лучших JavaScript-книг для начинающих и экспертов
Руководство	Учебник JavaScript для начинающих PDF

The post Учебник JavaScript appeared first on CoderLessons.com.

1. Введение

Fri, 29 May 2020 23:26:23 +0000

В этом уроке вы узнаете

Что такое JavaScript?
История Javascript
Как запустить JavaScript?
Инструменты, которые вам нужны
Простая программа на JavaScript
Привет мир! пример

Что такое JavaScript?

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

История Javascript

JavaScript был разработан Бренданом Айхом в 1995 году, который появился в популярном браузере того времени Netscape.

Язык первоначально назывался LiveScript, а затем был переименован в JavaScript. Многие программисты считают, что JavaScript и Java — это одно и то же. На самом деле JavaScript и Java очень сильно не связаны между собой. Java — очень сложный язык программирования, тогда как JavaScript — только язык сценариев . Синтаксис JavaScript в основном зависит от языка программирования C.

Как запустить JavaScript?

Будучи языком сценариев, JavaScript не может работать сам по себе. На самом деле, браузер отвечает за выполнение кода JavaScript . Когда пользователь запрашивает HTML-страницу с JavaScript, скрипт отправляется в браузер, и браузер должен его выполнить. Основным преимуществом JavaScript является то, что все современные веб-браузеры поддерживают JavaScript. Таким образом, вам не нужно беспокоиться о том, использует ли посетитель вашего сайта Internet Explorer, Google Chrome, Firefox или любой другой браузер. JavaScript будет поддерживаться. Кроме того, JavaScript работает в любой операционной системе, включая Windows, Linux или Mac. Таким образом, JavaScript преодолевает основные недостатки VBScript (сейчас не рекомендуется), который ограничивается только IE и Windows.

Инструменты, которые вам нужны

Для начала вам понадобится текстовый редактор для написания вашего кода и браузер для отображения веб-страниц, которые вы разрабатываете. Вы можете использовать любой текстовый редактор, включая Notepad ++, Visual Studio Code, Sublime Text, Atom или любой другой текстовый редактор, который вам удобен. Вы можете использовать любой веб-браузер, включая Google Chrome, Firefox, Microsoft Edge, Internet Explorer и т. Д.

Простая программа на JavaScript

Вы должны поместить весь свой код JavaScript в теги

The post 1. Введение appeared first on CoderLessons.com.

2) Использование переменных

Fri, 29 May 2020 23:04:55 +0000

Переменные используются для хранения значений (name = «John») или выражений (sum = x + y).

Объявить переменные в JavaScript

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

var name;

Присвойте значение переменной

Вы можете присвоить значение переменной либо при объявлении переменной, либо после объявления переменной.

var name = "John";

ИЛИ

var name; name = "John";

Именование переменных

Хотя вы можете называть переменные так, как вам нравится, хорошая практика программирования — давать описательные и содержательные имена переменным. Кроме того, имена переменных должны начинаться с буквы, и они чувствительны к регистру. Следовательно, переменные имя студента и имя студента различны, потому что буква n в имени отличается (n и N).

Попробуйте сами:

1
<html>
2
<head>
3
<title>Variables!!!title>
4
<script type="text/javascript">
5
var one = 22;
6
var two = 3;
7
var add = one + two;
8
var minus = one - two;
9
var multiply = one * two;
10
var divide = one/two;
11
document.write("First No: = " + one + "<br />Second No: = " + two + " <br />");
12
document.write(one + " + " + two + " = " + add + "<br/>");
13
document.write(one + " - " + two + " = " + minus + "<br/>");
14
document.write(one + " * " + two + " = " + multiply + "<br/>");
15
document.write(one + " / " + two + " = " + divide + "<br/>");
16
script>
17
head>
18
<body>
19
body>
20
html>
21

Этот код доступен для редактирования. Нажмите Run, чтобы выполнить

The post 2) Использование переменных appeared first on CoderLessons.com.

3) Учить массивы

Fri, 29 May 2020 22:39:19 +0000

Что такое массив?

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

JavaScript создать массив

Вы можете создать массив в JavaScript, как указано ниже.

var students = ["John", "Ann", "Kevin"];

Здесь вы инициализируете свой массив как и когда он создается со значениями «John», «Ann» и «Kevin». Индекс «John», «Ann» и «Kevin» равен 0, 1 и 2 соответственно. Если вы хотите добавить больше элементов в массив студентов, вы можете сделать это следующим образом:

students[3] = "Emma"; students[4] = "Rose";

Вы также можете создать массив с помощью конструктора Array следующим образом:

var students = new Array("John", "Ann", "Kevin");

ИЛИ

var students = new Array(); students[0] = "John"; students[1] = "Ann"; students[2] = "Kevin";

Методы массива JavaScript

Объект Array имеет много свойств и методов, которые помогают разработчикам легко и эффективно обрабатывать массивы. Вы можете получить значение свойства, указав arrayname.property и выходные данные метода, указав arrayname.method ().

свойство length -> если вы хотите узнать количество элементов в массиве, вы можете использовать свойство length.

свойство prototype -> Если вы хотите добавить новые свойства и методы, вы можете использовать свойство prototype.

Обратный метод -> Вы можете изменить порядок элементов в массиве, используя обратный метод.

Метод сортировки -> Вы можете сортировать элементы в массиве, используя метод сортировки.

Метод pop -> Вы можете удалить последний элемент массива, используя метод pop.

метод сдвига -> Вы можете удалить первый элемент массива, используя метод сдвига.

Метод push -> Вы можете добавить значение в качестве последнего элемента массива.

Попробуйте сами:

1
<html>
2
<head>
3
<title>Arrays!!!title>
4
<script type="text/javascript">
5
var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
6
Array.prototype.displayItems=function(){
7
for (i=0;i<this.length;i++){
8
document.write(this[i] + " ");
9
}
10
}
11
document.write("students array ");
12
students.displayItems();
13
document.write(" The number of items in students array is " + students.length + " ");
14
document.write(" The SORTED students array ");
15
students.sort();
16
students.displayItems();
17
document.write(" The REVERSED students array ");
18
students.reverse();
19
students.displayItems();
20
document.write(" THE students array after REMOVING the LAST item ");
21
students.pop();
22
students.displayItems();
23
document.write(" THE students array after PUSH ");
24
students.push("New Stuff");
25
students.displayItems();
26

27
head>
28
<body>
29
body>
30
html>

Этот код доступен для редактирования. Нажмите Run, чтобы выполнить

The post 3) Учить массивы appeared first on CoderLessons.com.

4) Как использовать Loops

Fri, 29 May 2020 22:27:20 +0000

В этом уроке мы узнаем

Как использовать Loop?

Различные типы петель

для цикла

в то время как цикл

делать … пока цикл

Как использовать Loop?

Циклы полезны, когда вам нужно выполнять одни и те же строки кода многократно, в течение определенного количества раз или до тех пор, пока определенное условие выполняется. Предположим, вы хотите 100 раз напечатать сообщение «Hello» на своей веб-странице. Конечно, вам придется скопировать и вставить одну и ту же строку 100 раз. Вместо этого, если вы используете циклы, вы можете выполнить эту задачу всего за 3 или 4 строки.

Различные типы петель

В JavaScript в основном есть четыре типа циклов.

для цикла

для / в цикле (объяснено позже)

в то время как цикл

делать … пока цикл

для цикла

Синтаксис:

for(statement1; statement2; statment3) { lines of code to be executed }

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

Statement2 является условием для выполнения цикла.

Оператор 3 выполняется каждый раз после выполнения кода цикла.

Попробуйте сами:

1
<html>
2
<head>
3
<script type="text/javascript">
4
var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
5
document.write("<b>Using for loops b><br />");
6
for (i=0;i<students.length;i++)
7
{
8
document.write(students[i] + " ");
9
}
10

11
head>
12
<body>
13
body>
14
html>

в то время как цикл

Синтаксис:

while(condition) { lines of code to be executed }

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

Попробуйте сами:

1
<html>
2
<head>
3
<script type="text/javascript">
4
document.write("<b>Using while loops b><br />");
5
var i = 0, j = 1, k;
6
document.write("Fibonacci series less than 40<br />");
7
while(i<40)
8
{
9
document.write(i + " ");
10
k = i+j;
11
i = j;
12
j = k;
13
}
14

15
head>
16
<body>
17
body>
18
html>

делать … пока цикл

Синтаксис:

do { block of code to be executed } while (condition)

Цикл do… while очень похож на цикл while. Единственное отличие состоит в том, что в цикле do… while блок кода выполняется один раз даже до проверки условия.

Попробуйте сами:

1
<html>
2
<head>
3
<script type="text/javascript">
4
document.write("<b>Using do...while loops b><br />");
5
var i = 2;
6
document.write("Even numbers less than 20<br />");
7
do
8
{
9
document.write(i + "<br />");
10
i = i + 2;
11
}while(i<20)
12

13
head>
14
<body>
15
body>
16
html>

Этот код доступен для редактирования. Нажмите Run, чтобы выполнить

The post 4) Как использовать Loops appeared first on CoderLessons.com.

5) Условные заявления

Fri, 29 May 2020 22:10:37 +0000

В этом уроке вы узнаете

Как использовать условные выражения

Различные типы условных выражений

Если заявление

Если … остальное утверждение

Если … еще если … еще заявление

Как использовать условные выражения

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

Различные типы условных выражений

В JavaScript в основном есть три типа условных операторов.

Если заявление

Если … остальное утверждение

Если … еще если … еще заявление

Если заявление

Синтаксис:

if (condition) { lines of code to be executed if condition is true }

Вы можете использовать оператор If, если хотите проверить только определенное условие.

Попробуйте сами:

1
<html>
2
<head>
3
<title>IF Statments!!!title>
4
<script type="text/javascript">
5
var age = prompt("Please enter your age");
6
if(age>=18)
7
document.write("You are an adult <br />");
8
if(age<18)
9
document.write("You are NOT an adult ");
10

11
head>
12
<body>
13
body>
14
html>

Если … остальное утверждение

Синтаксис:

if (condition) { lines of code to be executed if the condition is true } else { lines of code to be executed if the condition is false }

Вы можете использовать оператор If… .Else, если вам нужно проверить два условия и выполнить другой набор кодов.

Попробуйте сами:

1
<html>
2
<head>
3
<title>If...Else Statments!!!title>
4
<script type="text/javascript">
5
// Get the current hours
6
var hours = new Date().getHours();
7
if(hours<12)
8
document.write("Good Morning!!! ");
9
else
10
document.write("Good Afternoon!!! ");
11

12
head>
13
<body>
14
body>
15
html>

Если … еще если … еще заявление

Синтаксис:

if (condition1) { lines of code to be executed if condition1 is true } else if(condition2) { lines of code to be executed if condition2 is true } else { lines of code to be executed if condition1 is false and condition2 is false }

Вы можете использовать оператор If… .Else If… .Else, если хотите проверить более двух условий.

Попробуйте сами:

1
<html>
2
<head>
3
<script type="text/javascript">
4
var one = prompt("Enter the first number");
5
var two = prompt("Enter the second number");
6
one = parseInt(one);
7
two = parseInt(two);
8
if (one == two)
9
document.write(one + " is equal to " + two + ".");
10
else if (one<two)
11
document.write(one + " is less than " + two + ".");
12
else
13
document.write(one + " is greater than " + two + ".");
14

15
head>
16
<body>
17
body>
18
html>

Этот код доступен для редактирования. Нажмите Run, чтобы выполнить

The post 5) Условные заявления appeared first on CoderLessons.com.

6) Изучить функции

Fri, 29 May 2020 21:48:42 +0000

Что такое функция в JavaScript?

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

В этом уроке вы узнаете

Как создать функцию в JavaScript

Функция с аргументами

Возвращаемое значение JavaScript

Как создать функцию в JavaScript

Используйте ключевое слово function, за которым следует имя функции.

После имени функции откройте и закройте скобки.

После скобок откройте и закройте фигурные скобки.

В фигурных скобках напишите свои строки кода.

Синтаксис:

function functionname() { lines of code to be executed }

Попробуйте сами:

1
<html>
2
<head>
3
<title>Functions!!!title>
4
<script type="text/javascript">
5
function myFunction()
6
{
7
document.write("This is a simple function.<br />");
8
}
9
myFunction();
10
script>
11
head>
12
<body>
13
body>
14
html>

Функция с аргументами

Вы также можете создавать функции с аргументами. Аргументы должны быть указаны в скобках

Синтаксис:

function functionname(arg1, arg2) { lines of code to be executed }

Попробуйте сами:

1
<html>
2
<head>
3
<script type="text/javascript">
4
var count = 0;
5
function countVowels(name)
6
{
7
for (var i=0;i<name.length;i++)
8
{
9
if(name[i] == "a" || name[i] == "e" || name[i] == "i" || name[i] == "o" || name[i] == "u")
10
count = count + 1;
11
}
12
document.write("Hello " + name + "!!! Your name has " + count + " vowels.");
13
}
14
var myName = prompt("Please enter your name");
15
countVowels(myName);
16

17
head>
18
<body>
19
body>
20
html>

Возвращаемое значение JavaScript

Вы также можете создавать функции JS, которые возвращают значения. Внутри функции вам нужно использовать ключевое слово return, за которым следует возвращаемое значение.

Синтаксис:

function functionname(arg1, arg2) { lines of code to be executed return val1; }

Попробуйте сами:

1
<html>
2
<head>
3
<script type="text/javascript">
4
function returnSum(first, second)
5
{
6
var sum = first + second;
7
return sum;
8
}
9
var firstNo = 78;
10
var secondNo = 22;
11
document.write(firstNo + " + " + secondNo + " = " + returnSum(firstNo,secondNo));
12
script>
13
head>
14
<body>
15
body>
16
html>

Этот код доступен для редактирования. Нажмите Run, чтобы выполнить

The post 6) Изучить функции appeared first on CoderLessons.com.

7) Печенье

Fri, 29 May 2020 21:43:02 +0000

Что такое куки?

Файл cookie — это фрагмент данных, который хранится на вашем компьютере для доступа к вашему браузеру. Вы также могли бы использовать преимущества куки сознательно или неосознанно. Вы когда-нибудь сохраняли свой пароль Facebook, чтобы вам не приходилось вводить его каждый раз, когда вы пытаетесь войти? Если да, то вы используете куки. Файлы cookie сохраняются в виде пар ключ / значение.

Зачем вам нужен Cookie?

Связь между веб-браузером и сервером происходит по протоколу без сохранения состояния с именем HTTP. Протокол без сохранения состояния обрабатывает каждый запрос независимо. Таким образом, сервер не сохраняет данные после отправки их в браузер. Но во многих ситуациях данные снова потребуются. Вот и печеньки в картинке. При использовании файлов cookie веб-браузеру не нужно будет обмениваться данными с сервером каждый раз, когда требуются данные. Вместо этого его можно получить непосредственно с компьютера.

Javascript Set Cookie

Вы можете создавать куки, используя документ. свойство cookie, как это.

document.cookie = "cookiename=cookievalue"

Вы даже можете добавить дату истечения срока действия в ваш файл cookie, чтобы конкретный файл cookie был удален с компьютера в указанную дату. Дата истечения должна быть установлена в формате UTC / GMT. Если вы не установите дату истечения срока действия, cookie будет удален, когда пользователь закроет браузер.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2014 20:00:00 UTC"

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

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2014 20:00:00 UTC; path=/ "

// создаем куки с доменом для текущей страницы и путем к всему домену.

JavaScript получить Cookie

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

var x = document.cookie

JavaScript Удалить Cookie

Чтобы удалить cookie, вам просто нужно установить значение cookie пустым и установить значение expires на прошедшую дату.

document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

Попробуйте этот пример самостоятельно:

1
<html>
2
<head>
3
<title>Cookie!!!title>
4
<script type="text/javascript">
5
function createCookie(cookieName,cookieValue,daysToExpire)
6
{
7
var date = new Date();
8
date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
9
document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
10
}
11
function accessCookie(cookieName)
12
{
13
var name = cookieName + "=";
14
var allCookieArray = document.cookie.split(';');
15
for(var i=0; i<allCookieArray.length; i++)
16
{
17
var temp = allCookieArray[i].trim();
18
if (temp.indexOf(name)==0)
19
return temp.substring(name.length,temp.length);
20
}
21
return "";
22
}
23
function checkCookie()
24
{
25
var user = accessCookie("testCookie");
26
if (user!="")
27
alert("Welcome Back " + user + "!!!");
28
else
29
{
30
user = prompt("Please enter your name");

Специальные инструкции, чтобы заставить код работать … Дважды нажмите кнопку запуска

Этот код доступен для редактирования. Нажмите Run, чтобы выполнить

The post 7) Печенье appeared first on CoderLessons.com.

8) Как использовать DOM и События

Fri, 29 May 2020 21:16:16 +0000

Что такое DOM в JavaScript?

JavaScript может получить доступ ко всем элементам веб-страницы, используя объектную модель документа (DOM). Фактически, веб-браузер создает DOM веб-страницы при загрузке страницы. Модель DOM создается в виде дерева таких объектов:

Как использовать DOM и События

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

getElementById, innerHTML Пример

getElementById: для доступа к элементам и атрибутам, чей идентификатор установлен.

innerHTML: для доступа к содержимому элемента.

Попробуйте этот пример самостоятельно:

1
<html>
2
<head>
3
<title>DOM!!!title>
4
head>
5
<body>
6
<h1 id="one">Welcomeh1>
7
<p>This is the welcome message.p>
8
<h2>Technologyh2>
9
<p>This is the technology section.p>
10
<script type="text/javascript">
11
var text = document.getElementById("one").innerHTML;
12
alert("The first heading is " + text);
13
script>
14
body>
15
html>

Пример getElementsByTagName

getElementsByTagName: для доступа к элементам и атрибутам, используя имя тега. Этот метод возвращает массив всех элементов с одинаковым именем тега.

Попробуйте этот пример самостоятельно:

1
<html>
2
<head>
3
<title>DOM!!!title>
4
head>
5
<body>
6
<h1>Welcomeh1>
7
<p>This is the welcome message.p>
8
<h2>Technologyh2>
9
<p id="second">This is the technology section.p>
10
<script type="text/javascript">
11
var paragraphs = document.getElementsByTagName("p");
12
alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
13
document.getElementById("second").innerHTML = "The orginal message is changed.";
14
script>
15
body>
16
html>

Пример обработчика событий

createElement: создать новый элемент

removeChild: удалить элемент

Вы можете добавить обработчик события к определенному элементу, например так:

document.getElementById(id).onclick=function() { lines of code to be executed }

ИЛИ

document.getElementById(id).addEventListener("click", functionname)

Попробуйте этот пример самостоятельно:

1
<html>
2
<head>
3
<title>DOM!!!title>
4
head>
5
<body>
6
<input type="button" id="btnClick" value="Click Me!!" />
7
<script type="text/javascript">
8
document.getElementById("btnClick").addEventListener("click", clicked);
9
function clicked()
10
{
11
alert("You clicked me!!!");
12
}
13
script>
14
body>
15
html>

Этот код доступен для редактирования. Нажмите Run, чтобы выполнить

The post 8) Как использовать DOM и События appeared first on CoderLessons.com.

9) Объектно-ориентированный JS

Fri, 29 May 2020 21:12:54 +0000

Что такое концепция OOPS в JavaScript?

Часто переменные или массивы не достаточны для моделирования реальных ситуаций. JavaScript позволяет создавать объекты, которые действуют как объекты реальной жизни. Студент или дом могут быть объектом, который имеет множество уникальных характеристик. Вы можете создавать свойства и методы для ваших объектов, чтобы упростить программирование. Если ваш объект является студентом, он будет иметь такие свойства, как имя, фамилия, идентификатор и т. Д., А также такие методы, как Calculate, ChangeAddress и т. Д. Если ваш объект является домом, он будет иметь такие свойства, как количество комнат, цвет краски, местоположение и т. Д. и методы, такие как CalculayArea, ChangeOwner и т. д.

Как создать объект

Вы можете создать объект как это:

var objName = new Object(); objName.property1 = value1; objName.property2 = value2; objName.method1 = function() { line of code }

ИЛИ

var objName= {property1:value1, property2:value2, method1: function() { lines of code} };

Доступ к свойствам и методам объекта

Вы можете получить доступ к свойствам объекта следующим образом:

objectname.propertyname;

Вы можете получить доступ к методам объекта следующим образом:

objectname.methodname();

Попробуйте этот пример самостоятельно:

1
<html>
2
<head>
3
<title>Objects!!!title>
4
<script type="text/javascript">
5
var student = new Object();
6
student.fName = "John";
7
student.lName = "Smith";
8
student.id = 5;
9
student.markE = 76;
10
student.markM = 99;
11
student.markS = 87;
12
student.calculateAverage = function()
13
{
14
return (student.markE + student.markM + student.markS)/3;
15
};
16
student.displayDetails = function()
17
{
18
document.write("Student Id: " + student.id + "<br />");
19
document.write("Name: " + student.fName + " " + student.lName + "<br />");
20
var avg = student.calculateAverage();
21
document.write("Average Marks: " + avg);
22
};
23
student.displayDetails();
24
script>
25
head>
26
<body>
27
body>
28
html>

OOPS Конструктор

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

Попробуйте этот пример самостоятельно:

1
<html>
2
<head>
3
<script type="text/javascript">
4
function Student(first, last, id, english, maths, science)
5
{
6
this.fName = first;
7
this.lName = last;
8
this.id = id;
9
this.markE = english;
10
this.markM = maths;
11
this.markS = science;
12
this.calculateAverage = function()
13
{
14
return (this.markE + this.markM + this.markS)/3;
15
}
16
this.displayDetails = function()
17
{
18
document.write("Student Id: " + this.id + "<br />");
19
document.write("Name: " + this.fName + " " + this.lName + "<br />");
20
var avg = this.calculateAverage();
21
document.write("Average Marks: " + avg + "<br /><br />");
22
}
23
}
24
var st1 = new Student("John", "Smith", 15, 85, 79, 90);
25
var st2 = new Student("Hannah", "Turner", 23, 75, 80, 82);
26
var st3 = new Student("Kevin", "White", 4, 93, 89, 90);
27
var st4 = new Student("Rose", "Taylor", 11, 55, 63, 45);
28
st1.displayDetails();
29
st2.displayDetails();
30
st3.displayDetails();

Цикл по свойствам объекта

Синтаксис:

for (variablename in objectname) { lines of code to be executed }

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

Попробуйте этот пример самостоятельно:

1
<html>
2
<head>
3
<script type="text/javascript">
4
var employee={first:"John", last:"Doe", department:"Accounts"};
5
var details = "";
6
document.write("<b>Using for/in loops b><br />");
7
for (var x in employee)
8
{
9
details = x + ": " + employee[x];
10
document.write(details + "<br />");
11
}
12
script>
13
head>
14
<body>
15
body>
16
html>

Этот код доступен для редактирования. Нажмите Run, чтобы выполнить

The post 9) Объектно-ориентированный JS appeared first on CoderLessons.com.