Рубрика: Java script

Задание к 1 уроку JS

Задание:

Написать скрипт который будет определять правильность ввода цифры в промежутке от 1 до 10 и выводить результат.

<!DOCTYPE html>
<html>
<body>
<h1>Валидация с помощью JavaScript</h1>
<p>Пожалуйста введите число от 1 до 10:</p>
<input id="numb" type="number">
<button type="button" onclick="myFunction()">Submit</button>
<p id="output"></p>
<script>
function myFunction() {
 //Здесь ваше решение
}
</script>
</body>
</html>

[spoiler title=»Решение»]

<!DOCTYPE html>
<html>
<body><h1>Валидация с помощью JavaScript</h1>
<p>Пожалуйста введите число от 1 до 10:</p>
<input id="numb" type="number">
<button type="button" onclick="myFunction()">Submit</button>
<p id="output"></p>
<script> 
function myFunction() { 
 var x, text; 
 // Получаем значение инпута с id="numb" 
 x = document.getElementById("numb").value; 
 // Если x не является числом или число больше 10
 if (isNaN(x) || x < 1 || x > 10) {
  text = "Вы ввели не число!";
 } else {
  text = "Все правильно. Молодец :)";
 } 
 document.getElementById("output").innerHTML = text;
}
</script>
</body>
</html>

[/spoiler]

01.10.2015

Урок 1 Java script
Для изучения JavaScript Вам необходимо пройти курс «Верстка HTML CSS» и «Программирование на PHP»

Если вы прошли это курсы или не уверены в том нужны они вам или нет. Вы можете проверить уровень своей подготовки пройдя тестирование. Тест HTML CSS PHP.

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

Вот например вот такая строчка:

document.getElementById("demo").innerHTML = "Hello JavaScript";

найдет HTML элемент с id= «demo» и поменяет его содержимое на «Hello JavaScript».

А следующая изменит размер шрифта на 25 пикселей:

document.getElementById("demo").style.fontSize = "25px";

В JavaSript очень обширные возможности, и мы будем изучать их в этом курсе.

Теперь приступим непосредственно к первому уроку и напишем нашу первую программу на JavaScript.
```
<script language="JavaScript" type="text/javascript">
function hello_world1() {
  alert('Hello, World!');
}
function hello_world() {
 document.getElementById('test_but').onclick=function(){
  alert('Hello, World!');
 }
}
</script>

<input type='button' value='Test' onClick="javascript: window.alert('test');" id='test_but'><br>
<input type='button' value='Change' onClick="hello_world1()"><br>
<input type='button' value='Magic' id='test_but'>
```
Итак, что же наша программа делает, спросите вы? Все очень просто. Вкратце: по нажатию на кнопку Test на экране появится всплывающее окно с текстом «test».

По нажатию на кнопку Change или Magic на экране тоже появится всплывающее окно но с текстом «Hello, World!».

Но в чем разница? Разница в том, что в первом случае мы вызываем всплывающее окно напрямую в кнопке, а во втором и в третьем случае мы вызываем функцию написанную отдельно, которое собственно и вызывает всплывающее окно, но если к кнопке Magic мы обращаемся непосредственно из функции hello_world() ,то в кнопке Change мы вызываем функцию hello_world1() с помощью атрибута onClick.
28.08.2015

Рубрика: Java script

Задание к 1 уроку JS

Задание:

Урок 1 Java script