Методичка-справочник по веб-программированию со специально подобранными примерами для закрепления пройденного материала.


Технология дизайна. Сайт преподавателя.

Основные понятия:

Документ - любой материальный носитель информации.

Веб-страница — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера.

DOM (Document Object Model) - структурированное представление документа, которое позволяет программам и скриптам иметь доступ к документу и динамически изменять его содержание структуру или стиль.

Компьютерная программа - комплект шагов для управления данными или информацией.

Скрипт (script) - программа, выполняемая по запросу со страницы.

Node (узел) - некий объект, к которому мы можем и с которым мы можем обращаться (формулировка © Straus).

Все, что есть в документе, является узлами (Nodes) веб-страницы.

Element object представляет HTML element (то, что в тегах).

Тег (tag) — специальное зарезервированное слово, заключённое в угловые скобки, например: <body>.
Внутри тегов заключается отображаемая на веб-странице информация.

Javascript является интерпретируемым языком для документов HTML, разработанным фирмой Netscape в сотрудничестве с Sun Microsystems. Сценарии (scripts) выполняются в результате наступления каких-либо событий, инициированных действиями пользователя.

Программы Javascript могут работать только внутри браузера.

Функция представляет собой созданный программистом или встроенный в язык участок кода, ассоциированный с определенным именем. Это, как правило, необходимо для того, чтобы иметь возможность выполнять какую-либо задачу несколько раз используя один и тот же метод. Она также может вернуть значение, если в нее поместить оператор return.

Метод представляет собой функцию, связанную с объектом. Например, userName.toUppercCase() возвращает строку, содержащуюся в переменной userName, преобразованную к верхнему регистру.

Метод обязательно с круглыми скобками!


Список методов: www.citforum.ru/internet/javascript/jsmethod.shtm

Объект в Javascript это просто неупорядоченный набор пар ключ-значение, т. е. представляет собой обычный ассоциативный массив, иначе говоря, "хэш" и имеет несколько стандартных методов.
Добавление метода в объект - просто присвоение функции какому-либо свойству:


                        var obj = new Object(); или
                        var obj = {};
                      Есть два способа добавления свойств в объект:
                        obj.group = "lamers"; или
                    	obj["group"] = "lamers";
            
Любая переменная в Javascript — это на самом деле объект!

Хэшами называются ассоциативные массивы.

Элементы hash (нарезка) состоят из двух частей - ключа и значения. Ключ идентифицирует элемент хэша, а значение содержит данные, связанные с этим ключом. Такая взаимосвязь называется "пара ключ - значение".


                    var hash = {group: "lamers"} или
                    var hash = new Object();
                    hash.group = "lamers"
                     
                    var element = hash.group; или var element = hash['group'];
            

Операнд - то, к чему применяется оператор. Например: 2 * 2 – оператор умножения с левым и правым операндами. Другое название оператора - «аргумент оператора».

Оператор производит действие над одним или несколькими операндами или переменными. Операторы делятся на две основные группы: унарные (применяются к одному выражению) и бинарные:

 counter++      - унарный оператор.

 sum = 1 + 5   - бинарный оператор;

Комментарии - это специальные замечания программиста, чтобы объяснить, что делает данный скрипт, и они игнорируются интерпретатором. Javascript поддерживает следующий стиль комментариев:

 однострочные комментарии начинаются с символа (//);

 многострочные комментарии начинаются /* и заканчиваются */.

Строки. Строки создаются при помощи двойных или одинарных кавычек.
Внутренним форматом строк, вне зависимости от кодировки страницы, является Юникод (Unicode).
Можно вставлять кавычки внутри строки, предшествуя им наклонной чертой влево. Это известно как выход кавычек. Например:

 document.write("\\"Меньше знаешь - крепче спишь!"\\"). \n - "новая строка". \t - "табуляция".

Можно указывать юникодные символы через \uXXXX, например: \u002a - * - "звездочка", 

Идентификатор - имя, под которым известна переменная или функция. В JavaScript для идентификатора допустима любая комбинация букв, кроме зарезервированных или ключевых слов, цифр, знаков подчеркивания и знаков доллара. В идентификатор обязан начинаться с латинской буквы, символа подчёркивания (underscore) "_" или знака доллара "$"; последующие символы имени могут также быть цифрами (0-9).

Javascript различает регистр символов.

Константа - идентификатор "только-для-чтения". Вы можете создавать именованные константы с помощью ключевого слова const. Синтаксис идентификатора константы такой же, что и у идентификатора переменной: он обязан начинаться с буквы или символа подчёркивания, и может содержать символы алфавита, числа и символ подчёркивания:

 const prefix = '212';

Метапеременные — это слова-заменители, используются в программировании для обозначения чего-либо, что может стоять на их месте.

Чаще всего используются "foo" и "bar".

Свойство javascript "self" является синонимом текущего окна, т. е. ключевые слова window и self взаимозаменяемы. Данное свойство введено для обеспечения лучшей читаемости JavaScript.

Мини-справочник по JavaScript:

JavaScript тренажер Training Trainer:

Пример

[+] Показать код
        <html>
        <head>
		<script language="Javascript">
		<!--
		function myDate()
			{
			var date=new Date();
			var month=date.getMonth()+1;
			var dom=date.getDate();
			var year=date.getFullYear();
				if (dom<10)dom="0"+dom; 
				if (month<10)month="0"+month;
			document.write(dom+":"+month+":"+year); 
			 }
		// -->
		</script>
        </head>
        
        <body>
        	<script>myDate();</script>
        </body>
        </html>
        [-] Свернуть 
        

Изменение изображение на кнопке (RollOver):

[+] Показать код
Пока мы не знакомы с программированием на Javascript, можно скопировать себе на страницу следущее:
   
        <a href="url"
		  onmouseover="document.rover.src='knop2.gif'"
		  onmouseout="document.rover.src='knop1.gif'"
		  onclick="return false">
		<img name="rover" src="knop1.gif">
        </a>
        
    Здесь:    
    url   - адрес Веб-страницы на которую нужно перейти, например, href = "http://straushome.info": 
    knop1 - имя первой кнопки.
    knop2 - имя второй кнопки. 
    
    
    С учетом того, что  в XHTML и HTML5 для определения якоря вместо "name" требуется указывать уникальный атрибут "id"
     можно записать так:
     <a href="url"
		  onmouseover="document.getElementById('rover').src='knop2.gif'"
		  onmouseout="document.getElementById('rover').src='knop1.gif'"
		  onclick="return false">
		<img id="rover" src="knop1.gif">
        </a>
        
        или так:     
 <a href="url" onmouseover="over();" onmouseout="out();" onclick="return false"><img id="rover" /></a>
        
<script>
// Примечание: изображения желательно подгружать:
			imover=new Image(); imover.src="knop2.gif";
         		imout=new Image(); imout.src="knop1.gif";
		out();		
	function over(){document.images['rover'].src=imover.src};
	function out(){document.images['rover'].src=imout.src};   
</script>

как вариант: 
<img src="knop1.gif" onmouseover="this.src='knop2.gif'" onmouseout="this.src='knop1.gif'"
 onclick="window.open('http://straushome.info'" />
          
    [-] Свернуть
 

Примерно то же самое:

  (Надо щелкать мышью).
[+] Показать код
        <script>
        	var fl=1; 
                function change(element)
				{
				if (fl > 0 )element.src = "knop2.gif";
				else element.src = "knop1.gif";
				fl = -fl;
				}
	</script>
        
        <img src="knop1.gif" onclick = "change(this);" />
    
    Другой вариант:
        
  	<script>function change(e){e.src.indexOf('knop1.gif')+1?e.src='knop2.gif':e.src='knop1.gif'}</script>  
        
		[-] Свернуть

Изменение положения:



Если постараться,  должно получиться:
[+] Показать код
    <img src="knop1.gif" onmouseover="this.style.marginLeft='200px'; this.src='knop2.gif'"
     				onclick="this.style.marginLeft=0; this.src='knop1.gif'"/>
		 [-] Свернуть
	

Кнопка на CSS:

КАК ТАК
[+] Показать код
 <style type="text/css">
 	.myType{
		font:bold 14px Verdana, Geneva, sans-serif;
		color:navy;
    		width:100px;
            	text-align:center;
        	padding:.3em 0;
        	border:2px #0a0 dashed;
        	cursor:pointer;
            /* сами пишите, что хотите */
	    	}
 </style>
   
	<p class="myType" onmouseover="this.innerHTML='СДЕЛАТЬ?'" onmouseout="this.innerHTML='КАК ТАК'">КАК ТАК</p>
    [-] Свернуть  
And our island is called Java!

Прозрачность:

[+] Показать код
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Прозрачность</title>
</head>

<body>
<img src="knop1.gif" width="120" height="30" onmouseover="opas(this,10,50)" onmouseout="opas(this,0)" alt="" />
</body>

    <script>
    
      function opas(obj,grad,delay)
    	{
        var opas=100;
		obj.style.cursor="pointer";
		var MS=document.body.filters; // для MSIE, пусть ест; 
		var stra="opacity"; if(MS)stra="filter";
        
        if(grad)setIn=setInterval(change,delay); else {	
                                                    if(setIn)clearInterval(setIn);
                                                    MS?obj.style[stra]=100:obj.style[stra]=1;
                                                    };
		function change()
                        {
                        if(opas<=0){clearInterval(setIn)};	
                        opas-=grad;
                        MS?obj.style[stra]="alpha(opacity="+opas+")":obj.style[stra]=opas/100;	
                        }
		}
             
	</script>
</html>
[-] Свернуть


Полезные веши:

экспресс автокад 3d max программы фотошоп корел
loading

Сюда

Слайдшоу

Туда


[+] Показать код
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">
        a, a:visited{ color:#008; font-weight:bold; margin: 0 30px; text-decoration:none; }
    </style>

<script>
    var arr = new Array("beach.jpg","tai.jpg","water.jpg","dolph.jpg","couple.jpg");
    var im = new Array();
    var num = 0;
    var FL  = 1;
    var d = document;
    var dir = "picts/" // папка с картинками.
    var i=0;
    
          while(i < arr.length)
              {
              im[i] = new Image();
              im[i].src = dir+arr[i];
              i++;
              }
    	
    function vpered()
         	{
            if(FL<0){setTimeout("vpered()", 2000)}else return; 
            tuda()
          	}
    
    function tuda()
        {
        if(++num >= im.length ) num = 0;
        d.myImg.src = im[num].src
        }
    
function suda()
            {
            FL=1;
            d.getElementById('assa').style.backgroundColor =  "#fff"
            if(num <= 0 ) num = im.length;
            d.myImg.src = im[--num].src;	
            }
			
   function slide(id)
    {
    FL=-FL;
    
    if(FL<0){id.style.backgroundColor =  "green"}
        else {id.style.backgroundColor =  "#fff"}
    vpered();
    }
</script>    
</head>

<body>
    <img name="myImg" src="picts/beach.jpg" />
    <br />
    <a href="" onclick="suda(); return false;" ondblclick="suda(); return false;">Сюда</a>
    <a id="assa" href="" onclick="slide(this); return false;">Слайдшоу</a>
    <a href="" onclick="tuda(); return false;" ondblclick="tuda(); return false;">Туда</a>
</body>
</html>
[-] Свернуть

Тот же код, но с небольшой оптимизацией:

[+] Показать код
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Полезные вещи</title>
    <style type="text/css">
        .knopki{margin: 0; font-weight:bold; cursor:pointer}
        	.knopki p{float:left; margin-right:.5em; border:1px #000 solid; padding: 0 3px}
    </style>
</head>

<body>
	<div>
        <img id="myImg" onclick="change(1);" alt="loading" style="margin-bottom:5px"/>
             <div class="knopki">
                <p onclick="change(-1); slide();">Сюда</p>
                <p id="sl" onclick="slide(1)">Слайдшоу</p>
                <p onclick="change(1); slide();">Туда</p>
              </div>
	</div>
	
<script>
	
	var picts = ["beach.jpg","tai.jpg","water.jpg","dolph.jpg","couple.jpg"];
	var d=document;
	var num = 0;
	var FL=1;
	var dir = "picts/" // папка с картинками.
	var si; 
	var int = 1000;
    	var assa;
		
		for(i=0; i<picts.length; i++)
			{
            		assa=picts[i];
			picts[i]=new Image();
			picts[i].src=dir+assa;
			}
    
    change(0);				
	
	function change(n)
		{
		num+=n;	
		if(num<0)num = picts.length-1;	
		if(num+1>picts.length)num=0;
		d.images["myImg"].src = picts[num].src;
			}
	
function slide(s)
	{
	if(s)FL=-FL; else FL=1;
	if(FL<0){d.getElementById("sl").style.cssText="color:white;background:green"; si=setInterval("change(1)", int)}
	else{d.getElementById("sl").style.cssText = ""; clearInterval(si); return;}
	}
</script>

</body>
</html>
[-] Свернуть

Предлагаю изучить!
Автокад

Castro Mello Architects

3ds Max

Hello!

CorelDRAW

Hugo Hansen

PhotoShop

Sinthuja Sutharsan

Copyright © Straus 2017.

Designed by Straus.

Правила использования информации сайта

Яндекс.Метрика