Internet технологии (конспект). Web-мастеринг. JavaScript. Примеры

Web-мастеринг >> JavaScript >> Примеры

Динамическое изменение размера шрифта
Динамическое изменение размера и цвета шрифта
prompt, alert, toUpperCase, toLowerCase
Обращение к элементу формы
Проверка пароля
Проверка имени и пароля
OnClick, OnMouseOver, OnMouseOut, смена картинки
Список объектов браузера
Объект Date
Время и дата
Движущийся слой
Смена изображения с предварительной загрузкой
Смена изображений с предварительной загрузкой
Слои

1. Динамическое изменение размера шрифта

<HTML>
<HEAD>
<title>Internet технологии. Пример по JavaScript</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
   alert("Hello!");
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Пример по JavaScript</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
for (i=-3; i<=7; i++) {
	document.write("<FONT SIZE="+i+">Hello</FONT><BR>");
}
//-->
</SCRIPT>
<NOSCRIPT>
   <P>Ваш броузер или его настройки не позволяют использовать JavaScript
</NOSCRIPT>
</BODY>
</HTML>

2. Динамическое изменение размера и цвета шрифта

Начало

Демонстрация примера

<HTML>
<HEAD>
<title>Internet технологии. Пример по JavaScript</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
   alert("Hello!");
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Пример по JavaScript</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
var a=new Array();
a[0]="blue";
a[1]="red";
a[2]="cyan";
a[3]="yellow";
a[4]="silver";
for (i=0; i<=4; i++) {
	document.write("<FONT SIZE="+i+" color="+a[i]+">Hello</FONT><BR>");}
//-->
</SCRIPT>
<NOSCRIPT>
   <P>Ваш броузер или его настройки не позволяют использовать JavaScript
</NOSCRIPT>
</BODY>
</HTML>

3. prompt, alert, toUpperCase, toLowerCase

Начало

Демонстрация примера

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
   function MouseClick() {
      var s;
      s = prompt("Введите Ваше имя","test string");
      if (s!=null) {
        s = s.substring(0,1).toUpperCase() + s.substring(1).toLowerCase()
        alert("Привет\n" + s);
      }
   }
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Пример по JavaScript</H1>
<P>
<A HREF="#" onClick="MouseClick();">Кликни мышкой</A>
</BODY>
</HTML>

4. Обращение к элементу формы

Начало

Демонстрация примера

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function chooseURL(a) {
  alert(a.selectedIndex + " " +a.options[a.selectedIndex].value);
  location.href = a.options[a.selectedIndex].value;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Пример по JavaScript</H1>
<FORM NAME="form1">
  <SELECT NAME="Choose_URL" SIZE=1 OnChange="chooseURL(this);">
   <OPTION VALUE="ex11js.html" SELECTED>Пример 1
   <OPTION VALUE="ex2js.html" SELECTED>Пример 2
   <OPTION VALUE="http://www.cko.bmstu.ru/" >ЦКО
  </SELECT>
  <INPUT TYPE="button" VALUE="Go!" OnClick="chooseURL(form.Choose_URL);">
</FORM>
</BODY>
</HTML>

5. Проверка пароля

Начало

Демонстрация примера

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkName(n) {
stringN=" "+n;
	if (n=="irina") {
		alert("Welcom!");
	}
	else {
		alert("Bad Name");
	}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Пример passWord</H1>
<FORM NAME="pass">
	Name: 
	<input name="passN" type="text" value="" size=10 
	onChange="checkName(this.value)"><br>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
var s="irina";
document.write('<hr>'+'s: '+s);
//-->
</SCRIPT>
</BODY>
</HTML>

6. Проверка имени и пароля

Начало

Демонстрация примера

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkNW(n,w) {
//stringN=" "+n;
//stringW=" "+w;
	if ((n=="irina")&&(w=="123456")) {
		alert("Welcom!");
		window.open("ex3js.html", "New");
	}
	else {
		alert("Bad Name");
	}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("<FONT SIZE="+5+">Hello</FONT><BR>");
var s="irina";
document.write('<hr>'+'Name: '+s);
var s1="123456";
document.write('<hr>'+'pass: '+s1);
//-->
</SCRIPT>
<NOSCRIPT>
   <P>Ваш броузер или его настройки не позволяют использовать JavaScript
</NOSCRIPT>
<H1>Пример passWord</H1><p>
<FORM NAME="pass">
		Name: <input name="passN" type="text" value="" size=10">   Pass: 
<input name="passW" type="password" value="" size=10>   
<input type="button" value="OK" onClick="checkNW(pass.passN.value,pass.passW.value)"
</FORM>>
</BODY>
</HTML>

7. OnClick, OnMouseOver, OnMouseOut, смена картинки

Начало

Демонстрация примера

<HTML>
<HEAD>
</HEAD>
<BODY>
<form action="  " name=f1>
  <input type=text name=t1><br><br>
  <input type="button" value=OK OnClick="window.document.f1.t1.value='Hello';">
</form>
<HR>
<A HREF="#" OnMouseOver="window.document.images[0].src='1.gif';"
	OnMouseOut="window.document.images[0].src='4.gif';">
<IMG SRC="4.gif"></A>
</BODY>
</HTML>

8. Список объектов браузера

Начало

Демонстрация примера

<HTML>
<HEAD>
   <TITLE>Список объектов броузера</TITLE>
</HEAD>
<BODY TEXT="black" BGCOLOR="white">
<SCRIPT LANGUAGE="JavaScript">
<!--
for (var i in window.document) {
  window.document.writeln(i+'<br>');
}
window.document.write('<hr>'+document.fgColor);
//-->
</SCRIPT>
</BODY>
</HTML>

9. Объект Date

Начало

Демонстрация примера

<HTML>
<HEAD>
   <TITLE>Объект Date</TITLE>
</HEAD>
<BODY TEXT="black" BGCOLOR="white">
<SCRIPT LANGUAGE="JavaScript">
<!--
	var dateName=new Date();
	document.write('<hr>'+'Date: '+dateName);
	document.write('<hr>');
	document.write('getYear: '+dateName.getYear()+'<hr>');
	document.write('getDay: '+dateName.getDay()+'<hr>');
	document.write('getMonth: '+dateName.getMonth()+'<hr>');
	document.write('getDate: '+dateName.getDate()+'<hr>');
	document.write('getHours: '+dateName.getHours()+'<hr>');
	document.write('getMinutes: '+dateName.getMinutes()+'<hr>');
	document.write('getSeconds: '+dateName.getSeconds()+'<hr>');
	document.write('getTime: '+dateName.getTime()+'<hr>');
	document.write('getTimezoneOffset: '+dateName.getTimezoneOffset()+'<hr>');
	document.write('Date.parse: '+Date.parse()+'<hr>');
	var objectName=new Date('month day, year');
	document.write('objectName: '+objectName+'<hr>');
//-->
</SCRIPT>
</BODY>
</HTML>

10. Время и дата

Начало

Демонстрация примера

<html>
<head>
<script Languege="JavaScript">
<!-- 
var timeStr, dateStr;

function clock() {
	now=new Date();
hours=now.getHours();
minutes=now.getMinutes();
seconds=now.getSeconds();
timeStr=" "+hours;
timeStr+=((minutes<10) ? ":0" : ":") + minutes;
timeStr+= ((seconds<10) ? ":0" : ":") + seconds;
document.clock.time.value=timeStr;

date=now.getDate();
month=now.getMonth()+1;
year=now.getYear();
dateStr="" + month;
dateStr+=((date<10)?"/0":"/")+date;
dateStr+="/" + year;
document.clock.date.value=dateStr;

Timer=setTimeout("clock()",1000);
}
//-->
</script>
</head>
<body onLoad="clock()">
<form name="clock">
TIME:
<input type="text" name="time" size="8" value=""> <br><BR>
DATE:
<input type="text" name="date" size="8" value"">
</form>
</body>
</html>

11. Движущийся слой

Начало

Демонстрация примера

<HTML>
<HEAD>
<TITLE>Движущийся  слой</TITLE>
<STYLE TYPE="text/css">
<!-- 
   DIV {  font-family: Arial
          }
   #L0 {  background: yellow;
             position: absolute;
             width: 200;
             top: 0;
             left: 0
          }
   #L1 {  background: red;
             position: absolute;
             width: 200;
             top: 10;
             left: 100
          }
-->
</STYLE>
<SCRIPT  LANGUAGE="JavaScript">
<!-- 
   function  Right(x) {
       if (document.all) { 
         // for Explorer ver > 3
         L1.style.posLeft+=x;
       }
       else { 
        // for Netscape
        window.document.L1.left+=x; }
   }

   function  Down(y) {
      if (document.all) { 
         L1.style.posTop+=y;
      }
      else { window.document.layers["L1"].offset(0,y); }
   }
//-->
</SCRIPT>
</HEAD>
<DIV ID="L0">
<LAYER NAME="L0" TOP=0 LEFT=0 BGCOLOR=yellow Z-ORDER=1>
   This is layer "L0"<BR>
   <FORM  NAME="F1">
       <INPUT TYPE=button VALUE="Right" onClick="Right(10);">
       <INPUT TYPE=button VALUE="Down" onClick="Down(10);">
   </FORM>
</LAYER>
</DIV>
<DIV ID="L1">
<LAYER NAME="L1" TOP=10 LEFT=100 BGCOLOR=red Z-ORDER=2>
   This is layer "L1"
</LAYER>
</DIV>
</HTML>

12. Смена изображения с предварительной загрузкой

Начало

Демонстрация примера

<html>
<head>
<TITLE>Смена изображения с предварительной загрузкой</TITLE>
<script language=JavaScript>
<!--
var ImgArr,ImgLen;
function preload(imgname) {
 if (document.images) {
   if(!ImgArr) {
     ImgArr=new Array();
     ImgLen=0;
   }
   ImgArr[ImgLen]=new Image();
   ImgArr[ImgLen].src=imgname;
   ImgLen++;
 }   
}
function chimage(x,y){
  var s="";
  if (document.images && ImgArr) {
    with (document) {
        s=images[x].src;
        images[x].src=ImgArr[y].src
        ImgArr[y].src=s;
    }
  }
}
preload ('1.gif');
//-->
</script>
</head>
<body>
<a href="#" onMouseOver="chimage(0,0);"  
	onMouseOut="chimage(0,0);"><img src="4.gif" width=200 height=200></a>
</body>
</html>

13. Смена изображений с предварительной загрузкой

Начало

Демонстрация примера

<html>
<head>
<TITLE>Смена изображений с предварительной загрузкой</TITLE>
<script language=JavaScript>
<!--
var ImgArr,ImgLen;
function preload(imgname) {
 if (document.images) {
   if(!ImgArr) {
     ImgArr=new Array();
     ImgLen=0;
   }
   ImgArr[ImgLen]=new Image();
   ImgArr[ImgLen].src=imgname;
   ImgLen++;
 }   
}
function chimage(x,y){
  var s="";
  if (document.images && ImgArr) {
    with (document) {
        s=images[x].src;
        images[x].src=ImgArr[y].src
        ImgArr[y].src=s;
    }
  }
}
preload ('1.gif');
preload ('2.gif');
preload ('3.gif');
preload ('4.gif');
preload ('5.gif');
//-->
</script>
</head>
<body>
<a href="ex1js.html" onMouseOver="chimage(0,0);"  
	onMouseOut="chimage(0,0);"><img src="6.gif" 
	border=0 width=50 height=50></a><p>
<a href="ex2js.html" onMouseOver="chimage(1,1);"  
	onMouseOut="chimage(1,1);"><img src="7.gif" 
	border=0 width=50 height=50></a><p>
<a href="#" onMouseOver="chimage(2,2);"  
	onMouseOut="chimage(2,2);"><img src="8.gif" 
	width=50 border=0 height=50></a><p>
<a href="#" onMouseOver="chimage(3,3);"  
	onMouseOut="chimage(3,3);"><img src="9.gif" 
	width=50 border=0 height=50></a><p>
<a href="#" onMouseOver="chimage(4,4);"  
	onMouseOut="chimage(4,4);"><img src="0.gif" 
	width=50 border=0 height=50></a><p>
</body>
</html>

14. Слои

Начало

Демонстрация примера

<HTML>
<head>
<style type="text/css">
<!--
#ssylka {
	    color: #00ff00;
	    margin-top: 10px;
	    font-size: 20px;
	    font-family: Arial;
	    font-weight: 900;
}
#layer1 {
	    color: black;
	    margin-top:-145px;
	    font-size: 12px;
	    font-family:Courier;
}
-->
</style>
<script language='javascript'>
<!--
function chColoron(){
ssylka.style.color="#ff0000";
}
function chColorout()
{ssylka.style.color="#00ff00";
}
//-->
</script>
</head>
<body>
<center>
<div id=ssylka onMouseOver="chColoron()" onmouseout="chColorout()"> 
I'm here
</div>
<br> <br> <br> <br> <br> <br> <br> <br>
<div id=layer1> walk'n see 
</div>
</center>
</body>
</HTML>