Примеры JavaScript

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

Оглавление:
  1. JavaScript примеры и коды
  2. Заменить изображение
  3. Вызов функции с аргументами
  4. Изменение стиля в HTML
  5. Реакция на курсор
  6. Реакция на нажатие
  7. Показать дату
  8. Замена элементов
  9. Открыть текст в окне
  10. Определение браузера
  11. Продемонстрировать подсказки

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Россия, Республика Крым, Белогорский район, с. Зуя
http://samartsy.ru/

JavaScript примеры и коды

Скриптов JavaScript очень много, и они с каждым днём обновляются. С выходом HTML5 скриптов появилось еще больше, со временем мы постараемся добавить больше примеров JavaScript.

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

Заменить изображение

<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("star-bath"))
  {
  element.src="images/star-first.png";
  }
else
  {
  element.src="images/star-bath.png";
  }
}
</script>

<p>Нажмите на звезду, и изображение изменится!</p>

<img id="myimage" onclick="changeImage()"
src="images/star-first.png" width="256" height="256">

Вызов функции с аргументами

<p>Нажмите одну из кнопок для вызова функции с аргументами</p>

<button onclick="myFunction('Никита','Васичкин')">Для Никиты</button>
<button onclick="myFunction('Сергей','Пупкин')">Для Сергея</button>

<script>
function myFunction(name,job)
{
alert("Привет! " + name + " " + job);
}
</script>

Изменение стиля в HTML

<p id="p1">Привет мир!</p>
<p id="p2">Привет мир!</p>

<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

<p>Во втором пункте, изменён стиль скриптом.</p>

Реакция на курсор

<div onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:green;width:140px;height:20px;padding:20px; color:#fff">Навести курсор</div>

<script>
function mOver(obj)
{
obj.innerHTML="Реакция на курсор"
}

function mOut(obj)
{
obj.innerHTML="Навести курсор"
}
</script>

Реакция на нажатие

<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:green;width:140px;height:20px;padding:20px; color:#fff">Нажать здесь</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="Отпустите кнопку"
}

function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Реакция на нажатие"
}
</script>

Показать дату

document.write(Date());

Замена элементов

<p>Когда вы нажимаете кнопку Заменить, заменится текст.</p>

<p id="myPar">Замена параграфа.</p>
<div id="myDiv">Замена элемента div.</div>

<button type="button" onclick="myFunction()">Заменить</button>

<script>
function myFunction()
{
document.getElementById("myPar").innerHTML="Новый параграф";
document.getElementById("myDiv").innerHTML="Новый текст в элементе div";
}
</script>

К началу

Открыть текст в окне

<a href="https://htmlhook.ru/userfiles/pravila-sita.htm"
onClick="NewWindow(this.href,'name','600','600','yes');return false">Открыть текст в окне.</a>
<script language="javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings)
}</script>

К началу

Определение браузера

<script>
var language = navigator.languages && navigator.languages[0] || // Chrome / Firefox
               navigator.language ||   // All browsers
               navigator.userLanguage; // IE <= 10
               
txt = "<span>Браузер: " + navigator.appCodeName + "<br>";
txt+= "Производитель: " + navigator.appName + "<br>";
txt+= "Версия: " + navigator.appVersion + "<br>";
txt+= "Используются куки: " + navigator.cookieEnabled + "<br>";
txt+= "Разрядность: " + navigator.platform + "<br>";
txt+= "Заголовок: " + navigator.userAgent + "<br>";
txt+= "Язык: " + language + "</span>";

document.getElementById("example").innerHTML=txt;
</script>

К началу

Продемонстрировать подсказки

<p>Нажмите на кнопку, чтобы продемонстрировать подсказки.</p>

<button onclick="myFunction()">Кнопка</button>

<p id="demo"></p>
<script>
function myFunction()
{
var x;
var name=prompt("Пожалуйста, введите ваше имя","Сергей Пупкин");
if (name!=null)
  {
  x="Привет " + name + "! Как дела?";
  document.getElementById("demo").innerHTML=x;
  }
}
</script>

автор
htmlhook.ru | Скрипты для веб-приложений