Викиучебник

Blender для начинающих/Основы Web технологий: различия между версиями

Интерактивная навигация по истории
← Предыдущая правка
Содержимое удалено Содержимое добавлено
ВизуальныйВики-текст
м Откат правок Владислав Молдован (обс.) к версии 109.72.249.93
м <source> -> <syntaxhighlight> (phab:T237267)
 
Строка 10:
==Подключение JS==
Для использования JS в файле.html надо написать следующее между тегами <nowiki><body> и </body></nowiki>:
<sourcesyntaxhighlight lang="js">
<script type="text/javascript">
//код
</script>
</syntaxhighlight>
</source>
Первая стока указывает тип языка, на котором ниже будет писаться код до <nowiki></script></nowiki>. Атрибут type принимает значение «text/javascript», указывающее на то, что ниже располагается код, написаный на JS.
 
Размещать скрипты можно и в <nowiki><head> </head></nowiki>:
<sourcesyntaxhighlight lang="js">
<script type="text/javascript">
//код
</script>
</syntaxhighlight>
</source>
 
Другим способом является использование кода на этом языке из внешнего файла:
<sourcesyntaxhighlight lang="js"><script type="text/javascript" src="путь"></script></sourcesyntaxhighlight>
Путь - путь к файлу, в котором лежит ваш скрипт.
 
==Комментарии==
Комментарии в JS могут начинаться с //, если они длятся всего одну строку:
<sourcesyntaxhighlight lang="js">// комментарий</sourcesyntaxhighlight>
Или начинаться с /*, и заканчиваться */, если это многострочные комментарии:
<sourcesyntaxhighlight lang="js">/*
комментарий
*/</sourcesyntaxhighlight>
==Вывод на экран==
Вывод чего-либо на страницу производится функцией document.write():
<sourcesyntaxhighlight lang="js">document.write('что-то');</sourcesyntaxhighlight>
При том, внутри скобок все пишется по правилам HTML (то, что требуется отобразить).
 
Например, вывод жирного текста:
<sourcesyntaxhighlight lang="js">document.write('<b>пример жирного текста</b>');</sourcesyntaxhighlight>
==Переменные==
Все переменные объявляются с ключевого слова var:
<sourcesyntaxhighlight lang="js">var переменная;</sourcesyntaxhighlight>
Переменная будет локальной, если она объявлена в теле функции. Если же объявлять без var (внутри функции), то созданая переменная будет глобальной.
Также, можно сразу указывать ее значение:
<sourcesyntaxhighlight lang="js">var переменная = значение;</sourcesyntaxhighlight>
К примеру:
<sourcesyntaxhighlight lang="js">var a = 23;</sourcesyntaxhighlight>
Можно и удалить переменные, написав конструкцию:
<sourcesyntaxhighlight lang="js">delete переменная;</sourcesyntaxhighlight>
Это действует на переменные, объявленные без var. Если же переменная декларирована с var, то есть два способа ее удалить:
<sourcesyntaxhighlight lang="js">переменная = undefined;
переменная = null;</sourcesyntaxhighlight>
===Переменные let===
Эти переменные имеют еще более узкую область видимости - только внутри того блока, в котором объявлены. Например, в следующих блоках:
Строка 61:
# while
Их декларация происходит следующим образом:
<sourcesyntaxhighlight lang="js">let переменная = значение;</sourcesyntaxhighlight>
 
==Массивы==
Массивы объявляются с помощью функции Array(), создющую пустой массив:
<sourcesyntaxhighlight lang="js">переменная = new Array()</sourcesyntaxhighlight>
Для заполнения массива используйте конструкцию:
<sourcesyntaxhighlight lang="js">массив[индекс] = значение</sourcesyntaxhighlight>
Например:
<sourcesyntaxhighlight lang="js">a = new Array();
a[0] = 12
a[2] = 0</sourcesyntaxhighlight>
Причем, если Вы указали индекс элемента массива, который превышает все предыдущее, длина массива станет равна i + 1, где i - этот индекс.
 
==Условный оператор if==
Условный оператор if в JS имеет синтаксис:
<sourcesyntaxhighlight lang="js">if условие
{
// команды
Строка 83:
{
// команды2
}</sourcesyntaxhighlight>
В условие могут входить такие знаки сравнения:
{| class="wikitable"
Строка 104:
|}
Вывод сообщения в зависимости от значений переменных:
<sourcesyntaxhighlight lang="js">
var a = 3;
var b = 7;
Строка 114:
{
document.write('a не равно b')
}}</sourcesyntaxhighlight>
Иная форма оператора if представлена ниже:
<sourcesyntaxhighlight lang="js">if условие
{
// команды
Строка 128:
{
// командыN
}</sourcesyntaxhighlight>
Даная форма условного оператора нужна для проверки большого количества условий. Если одно из условий выполнилось, то выполнятся команды написанные для этого условия, и браузер завершит проверку остальных условий.
 
Например, здесь выведется только одно сообщение - о равенстве переменных:
<sourcesyntaxhighlight lang="js">
var a = 3;
var b = 3;
Строка 146:
{
document.write('a не равно b')
}</sourcesyntaxhighlight>
===Сложные условия===
Для написания более сложных условий требуются специальные логические операторы: && (и), || (или) и ! (не).
 
Записать условие «a равно либо b, либо c» с их помощью можно следующим образом:
<sourcesyntaxhighlight lang="js">if ((a==b) || (a==c))</sourcesyntaxhighlight>
 
==Циклы==
Строка 161:
===Цикл for===
Цикл for описывается так:
<sourcesyntaxhighlight lang="js">for (объявление переменной, условие, изменение переменной)
{
//команды
}</sourcesyntaxhighlight>
Первым объявляется любая переменная, доступная только для использования ее циклом, либо присваивается значение уже существующей переменной. Ее значение изменения прописывается в самом конце.
 
Команды в теле цикла выполняются до тех пор, пока условие выполняется, к примеру:
<sourcesyntaxhighlight lang="js">for (v=0, v<100, i+1)
{
document.write(v+'</br>')
}</sourcesyntaxhighlight>
 
===Цикл while===
Цикл While нужен тогда, когда надо выполнять какие-то действия до тех пор, пока условие верно:
<sourcesyntaxhighlight lang="js">while условие
{
// команды
}</sourcesyntaxhighlight>
Например:
<sourcesyntaxhighlight lang="js">while (i<100)
{
i = i + 1
document.write(v+'</br>')
}</sourcesyntaxhighlight>
 
===Цикл do while===
От цикла while он имеет одно отличие - блок команд выполняется всегда от одного или более раз.
Например:
<sourcesyntaxhighlight lang="js">do
{
i = i + 1
document.write(v+'</br>')
}
while (i<100);</sourcesyntaxhighlight>
 
===Цикл for in===
Этот цикл нужен лишь тогда, когда некоторая переменная поочередно должна принять все значения массива. Форма его записи такова:
<sourcesyntaxhighlight lang="js">for (переменная in массив)
{
// команды
}
</syntaxhighlight>
</source>
Перебирание всех элементов массива:
<sourcesyntaxhighlight lang="js">
var a;
var arr = new Array;
Строка 214:
document.write(a): // будет выведено 'Учимся программировать вместе.'
}
</syntaxhighlight>
</source>
===Команды break и continue===
# break используется для выхода из цикла.
# continue - для новой итерации цикла.
Например выход из цикла при равенстве a = 3:
<sourcesyntaxhighlight lang="js">
for (a=-2, a<100, a+1)
{
Строка 229:
document.write('a== ' + a):
}
</syntaxhighlight>
</source>
 
==Функции==
Функции оформляются вот так:
<sourcesyntaxhighlight lang="js">var имя=function(параметры)
{
//команды
}</sourcesyntaxhighlight>
Например:
<sourcesyntaxhighlight lang="js">
var d;
var f=function(a, b, c)
{
d = a + b + c;
}</sourcesyntaxhighlight>
Но функции могут также и возвращать значения с помощью оператора return:
<sourcesyntaxhighlight lang="js">var имя=function(параметры)
{
//команды
return значение
}</sourcesyntaxhighlight>
Например:
<sourcesyntaxhighlight lang="js">
var d;
var f=function(a, b, c)
Строка 257:
return a + b + c;
}
d = f(1,2,3)</sourcesyntaxhighlight>
=Ajax=
Ajax - технология, позволяющая обновить данные страницы, не обновляя страницу полностью. Используется в социальных сетях, таких как: «ВК», «Facebook» и других.
Строка 280:
==Представление данных==
Любые данные в JSON представляются двумя способами. Для массивов:
<sourcesyntaxhighlight lang="json">[
поле:значение
]
</syntaxhighlight>
</source>
И для объектов:
<sourcesyntaxhighlight lang="json">{
поле:значение
}
</syntaxhighlight>
</source>
Например:
<sourcesyntaxhighlight lang="json">[
"Имя":"Вася",
"Фамилия":"Петров",
]
</syntaxhighlight>
</source>
Данную структуру можно включить в объект:
<sourcesyntaxhighlight lang="json">
{
"Дата регистрации":"сегодня",
Строка 305:
]
}
</syntaxhighlight>
</source>
==Конвертирование в строку JSON и наоборот==
В JS есть встроенная функция, конвертирующая содержание некоторой переменной в строку JSON - JSON.stringify().
 
Пусть имеем:
<sourcesyntaxhighlight lang="js">
var a = {
"RegistrationDate":"today",
Строка 320:
}
JSON.stringify(a); // получим: '{"RegistrationDate":"today","Person":["Name":"Den","FriendName":Kolya"]}'
</syntaxhighlight>
</source>
Данный метод просто запишет содержание переменной в одну строку.
 
Противоположное действие имеет метод JSON.parse():
<sourcesyntaxhighlight lang="js">
var a = JSON.parse('{"RegistrationDate":"today","Person":["Name":"Den","FriendName":Kolya"]}')
a.Person[0] // равно "Den"
</syntaxhighlight>
</source>
 
[[File:JSON1.jpg|frameless]]
Источник — https://ru.wikibooks.org/wiki/Blender_для_начинающих/Основы_Web_технологий