JavaScript — в веб сайтах

В яких випадках застосовують код JavaScript

відкриття випливаючого вікна з програмним контролем над розмірами, розташуванням і атрибутами нового вікна ( в вигляді меню або панелі інструментів і т.д). 

перевірка форми вхідних значень, щоб переконатись, що вони будуть прийняті перш ніж вони будуть відправлені на сервер 

зміна зображень в той момент, коли курсор миші переміщається над ними, даний ефект часто використовують для приваблювання уваги користувачів до важливих посилань, представлених в виді графічних елементів.

Код JavaScript може працювати локально в браузері одного користувача ( а не на віддаленому сервері), може швидко відповідати на дії користувача, заставляти додаток реагувати більш чутко.

Крім того, код JavaScript може визначати дії користувача, які HTML визначити не може, наприклад відреагувати на натискання визначених клавіш.

Для різних додатків таких наприклад як сервіс Gmail, більша частина користувацького інтерфейсу написана на  JavaScript, і відповідно JavaScript направляє запити (наприклад, вміст електронної почти) на сервер.

Приклади JavaScript

user_97

Приклад:”Калькулятор”  приклад коду калькулятора написаний на JavaScript разом з CSS, кому потрібен калькулятор, копіюємо цей код, створюємо новий документ, вставляємо код в документ, і зберігаємо, розширення повинно бути HTML.

Код адаптований для любої html сторінки, нижче вигляд калькулятора свореного на цьому коді, кому потрібен калькулятор, копіюємо цей код,  зберігаємо, розширення повинно бути HTML. Код робочий, перевірений.

<style type="text/css">
   	.tblCalc{
 		border:1px solid gray;
 		margin:0;
 		padding:0;
 		width:250px;
 		text-align:center;
 	}
 	.tblCalc input{
 		border:1px solid gray;
 		width:30px;
 		margin:4px;
 	}
	 	#btnWide{
 		width:80px;
 	}
 	#editWide{
 		width:250px;
 	}
</style>

<form name="calc" action="">
     <table class="tblCalc" cellpadding=0 cellspacing=0>
     <tr>
         <td colspan=5 align=middle>
         	<input id="editWide" name="ReadOut" type="Text"
              	size=28 value="0" width="250px">
         </td>
     </tr>
     <tr>
         <td colspan="3"></td>
         <td><input name="btnClear" type="Button"
          	value="C" onclick="Clear()" /></td>
         <td><input name="btnClearEntry" type="Button"
          	value="CE" onclick="ClearEntry()" /></td>
     </tr>
     <tr>
         <td><input name="btnSeven" type="Button"
          	value="7" onclick="NumPressed(7)"></td>
         <td><input name="btnEight" type="Button"
          	value="8" onclick="NumPressed(8)"></td>
         <td><input name="btnNine" type="Button"
          	value="9" onclick="NumPressed(9)"></td>
         <td><input name="btnPlus" type="Button"
          	value="+" onclick="Operation('+')" /></td>
         <td><input name="btnMultiply" type="Button"
          	value="*" onclick="Operation('*')" /></td>
       </tr>
     <tr>
         <td><input name="btnFour" type="Button"
          	value="4" onclick="NumPressed(4)"></td>
         <td><input name="btnFive" type="Button"
          	value="5" onclick="NumPressed(5)"></td>
         <td><input name="btnSix" type="Button"
          	value="6" onclick="NumPressed(6)"></td>
         <td><input name="btnMinus" type="Button"
          	value="-" onclick="Operation('-')" /></td>
         <td align=middle><input name="btnDivide" type="Button"
          	value=" / " onclick="Operation('/')" /></td>
     </tr>
     <tr>
         <td><input name="btnOne" type="Button"
          	value="1" onclick="NumPressed(1)"></td>
         <td><input name="btnTwo" type="Button"
          	value="2" onclick="NumPressed(2)"></td>
         <td><input name="btnThree" type="Button"
          	value="3" onclick="NumPressed(3)"></td>
         <td><input name="btnPercent" type="Button"
          	value="%" onclick="Percent()" /></td>
         <td align=middle>&nbsp;</td>
     </tr>
     <tr>
         <td><input name="btnZero" type="Button"
          	value="0" onclick="NumPressed(0)"></td>
         <td><input name="btnDecimal" type="Button"
          	value="." onclick="Decimal()"></td>
         <td><input name="btnNeg" type="button"
          	value="+/-" onclick="Neg()" /></td>
         <td colspan="2"><input id="btnWide" name="btnEquals"
          	type="Button" value="=" onclick="Operation('=')"></td>
     </tr>
     </table>
</form>
<script language="JavaScript">

var Fcalc = document.calc;
var Currents = 0;
var FlagNewNum = false;
var PendingOp = "";

// обробник натискання
// цифрової кнопки
function NumPressed (Num)
{
		if (FlagNewNum)
		{
			Fcalc.ReadOut.value = Num;
			FlagNewNum = false;
		}
		else
		{
			if (Fcalc.ReadOut.value == "0")
				Fcalc.ReadOut.value = Num;
			else
				Fcalc.ReadOut.value += Num;
		}
}

// обробник натискання
// кнопки дій
function Operation (Op)
{
		var Readout = Fcalc.ReadOut.value;
		if (FlagNewNum && PendingOp != "=")
		{
			Fcalc.ReadOut.value = Currents;
		}
		else
		{
			FlagNewNum = true;
			if ( '+' == PendingOp )
				Currents += parseFloat(Readout);
			else if ( '-' == PendingOp )
				Currents -= parseFloat(Readout);
			else if ( '/' == PendingOp )
				Currents /= parseFloat(Readout);
			else if ( '*' == PendingOp )
				Currents *= parseFloat(Readout);
			else
				Currents = parseFloat(Readout);
			Fcalc.ReadOut.value = Currents;
			PendingOp = Op;
		}
}

// додавання десяткової точки з числа
function Decimal ()
{
		var curReadOut = Fcalc.ReadOut.value;
		if (FlagNewNum)
		{
			curReadOut = "0.";
			FlagNewNum = false;
		}
		else
		{
			if (curReadOut.indexOf(".") == -1)
				curReadOut += ".";
		}
		Fcalc.ReadOut.value = curReadOut;
}

// Очищення поточного результату
function ClearEntry ()
{
		Fcalc.ReadOut.value = "0";
		FlagNewNum = true;
}

//Повне очищення всіх результатів
function Clear ()
{
		Currents = 0;
		PendingOp = "";
		ClearEntry();

}

// міняємо знак поточного результату
function Neg ()
{
		Fcalc.ReadOut.value =
		parseFloat(Fcalc.ReadOut.value) * -1;
}

// обчислюємо значення відсотків
function Percent ()
{
		Fcalc.ReadOut.value =
			(parseFloat(Fcalc.ReadOut.value) / 100) *
			parseFloat(Currents);
}
</script>