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

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

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

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

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

Изменить цвет изображения



<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
  {
  element.src="images/star.phg";
  }
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>



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



<script>
document.write(Date());
</script>



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



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

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

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

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



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



<a href=
http://pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua/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>



3 комментария на тему “JavaScript примеры и коды”

  1. комментарии

    Первый скрипт if (element.src.match(«bulbon»)) что такое bulbon ни где нет инфы почему без него не работает скрипт

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>