Печатать книгуПечатать книгу

Javascript: начало

Сайт: Информатикс
Курс: 2086 9М Информатика
Книга: Javascript: начало
Напечатано:: Гость
Дата: Суббота, 14 Март 2026, 08:06

Оглавление

1. HTML

<!DOCTYPE html>
<html>

<head>
<script>
function doit() {
    tbutton = document.getElementById("clicker")
    alert("НАЖАЛАСЬ "+tbutton.innerHTML+"!")
}
</script>

<title>
Название сайта
</title>

</head>

<body bgcolor="#ffffff">
<button id="clicker" onclick="doit()">Кнопка</button>
<p id="text">До нажатия</p>
</body>

</html>

2. Javascript - основы

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

// синтаксис для условного оператора
if (*условие*) {
 // если выполнено условие
}
else //опционально
{
 // если условие не выполнено
}

//синтаксис для циклов
while (*условие*) {
 // что делать, пока выполнено условие
}

for (*начало* ; *условие* ; *действие после каждой итерации*) {
 // что делать, пока выполнено условие
}
// чаще всего Вы будете использовать следующее:
for (let i = 0; i < N; i++) { // завести переменную i равную 0; делать, пока i меньше N; увеличивать i на 1 после каждого прохода цикла
}

//также для условных и цикленных операторов допустим следующий синтаксис:
if (a == 0)
  a = 1;
//его можно использовать, если выполняется лишь 1 действие, как в примере выше

//синтаксис для функций
function *название_функции*(*аргументы*) {
  // что делать 
  // если хотите, чтобы функция что-то возвращала, используйте return
}

//пример :
// Обратите внимание, что, как в python, у переменных не указывается тип
function NameOfFunction(varInt1, varInt2, varStr3) { 
  let varInt3 = varInt2;
  for(let i = 0; i < 3; i++) {
    varInt3 += varInt2;
  } // таким образом varInt3 будет в 4 раза больше, чем varInt2
  if (varBool3 == "true") {
    return varInt1 + varInt3; // здесь вычисляется сумма чисел
  } else { // отступы можно опускать
    return "" + varInt1 + varInt3; // здесь числа добавляются как строки, то есть NameOfFuntion(1, 2, "false") будет равно "18"
  }
}



3. Javascript - обработка событий мыши

Пример обработки события наведения мышью:

<div id="SomeText">Здесь что-то есть</div>
..
..
<script>
SomeText.onmouseover = function(ev) {
  SomeText.innerHTML = "Здесь ещё что-то есть";
}
</script>

Все возможные события:

onmouseover, onmouseout, onmousemove, onmouseenter и onmouseleave


4. Подсказки

<!DOCTYPE html>
<html>

<head>
<script>
count = 0

window.onload = function(e) {
  textfield = document.getElementById("text")
  for(let i = 0; i < 100; i++) {
    textfield.innerHTML += '<button style="width:50px" onclick="doin('+1+')">' + 1 + "</button>"
  }
}

function doin(i) {
    alert(i)
}

function doit() {
    count += 1 // count = count + 1

    textfield = document.getElementById("text")
    textfield.innerHTML = count
    if (count == 1) {
        textfield.innerHTML = "hf"
    }
}
</script>

<title>
Название сайта
</title>

</head>

<body bgcolor="#ffffff">
<button id="clicker" onclick="doit()">Кнопка А</button>
<p id="text">Кнопки ещё не нажимались</p>
</body>

</html>