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

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

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

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

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

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

<p>Нажмите на звезду, и цвет изменится</p>

<img id="myimage" onclick="changeImage()"
src="images/star.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="http://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>

к меню ↑

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

<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
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>