Методичка-справочник по WEB с примерами.

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

Веб браузер (обозреватель) – программа, благодаря которой осуществляется доступ к веб-страницам во Всемирной паутине.

HTML (от англ. HyperText Markup Language - «язык гипертекстовой разметки») - стандартизированный язык разметки документов.

Язык HTML интерпретируется браузерами; полученный в результате форматированный текст отображается на экране монитора компьютера или мобильного устройстваю.
HTML не является языком программирования.

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

Программа (от греч. pro - вперед, и grapho - пишу) - комплект шагов (набор инструкций), выполняемых вычислительной техникой.

Javascript является интерпретируемым языком для документов HTML. Программы на этом языке называются скриптами или сценариями.

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

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

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

Переменные JavaScript являются контейнерами для хранения данных. Доступ к переменным осуществляется по уникальному имени - индентификатору.

Имена переменных не должны начинаться с цифры и зависят от регистра.

Объект в Javascript - неупорядоченный набор пар данных "ключ-значение" (hash), ассоциированных с объектом.
Объект может содержать любые значения (свойства), доступ к которым осуществляется по ключю (имени).

Метод - функция связанная с объектом. Добавление метода - присвоение функции какому-либо свойству.


            
               var person = { firstName: "Ivan", lastName : "Petrov",
               		fullName: function(){return this.firstName + " " + this.lastName;}
            		}
               		

Операнд - то, к чему применяется оператор. Например: 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="rover.src='knop2.gif'" onmouseout="rover.src='knop1.gif'" onclick="return false">
		<img name="rover" src="knop1.gif">
        </a>
        
    Здесь:    
    url   - адрес Веб-страницы на которую нужно перейти, например, href = "https://straushome.info".
    knop1 - первая кнопка.
    knop2 - вторая кнопка. 
    src (сокращение от source/источник) - адрес изображения.
    т. е. img name - имя самого тэга с изображением а src это то, что он показывает.
    
    Наша задача - заменить один адрес изображения на другой (и наоборот).
   
    onclick="return false" - это чтобы сейчас не переходить по ссылке URL. 
    
    В XHTML и HTML5 вместо "name" требуется указывать уникальный атрибут "id" и надо записать так:
    
    <a href="url" onmouseover="document.getElementById('rover').src='knop2.gif'"
		  onmouseout="document.getElementById('rover').src='knop1.gif'">
		 <img id="rover" src="knop1.gif">
        </a>
         
        или так:
        
    <a href="url" onmouseover="document.images['rover'].src='knop2.gif'"
		  onmouseout="document.images['rover'].src='knop1.gif'">
		 <img id="rover" src="knop1.gif">
        </a>    
        
         или эдак:
         
    <a href="url" onmouseover="over();" onmouseout="out();" onclick="return false"><img id="rover" src="knop1.gif"></a> 
        
	<script>
		function over(){document.images['rover'].src="knop2.gif"}
		function out(){document.images['rover'].src="knop1.gif"}
	</script>

   	как вариант: 

    <img src="knop1.gif" onmouseover="this.src='knop2.gif'" onmouseout="this.src='knop1.gif'"
        onclick="window.open('https://straushome.info'" />
 
 	Примечание: изображения желательно предварительно подгружать в память (кэшировать):
 		<script>
			imover=new Image(); imover.src="knop2.gif";
       			imout=new Image(); imout.src="knop1.gif";
 		</script>
 
 	и тогда вместо "knop1.gif" писать "imout.src" и, соответственно, "imover.src" вместо "knop2.gif".
          
    [-] Свернуть
 

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

  (Надо щелкать мышью).
[+] Показать код
        <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>
    [-] Свернуть  

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

[+] Показать код
<!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>
[-] Свернуть

Главная Изучение автокад Изучение 3ds max Программа фотошоп Программа CorelDraw relax

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

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>
[-] Свернуть

Продолжительность занятий от 45 мин. Стоимость (зависит от места и времени проведения занятий) от 400 руб.

Copyright © Straus 2020. Designed by Straus. Использование материалов сайта только с разрешения владельца ресурса.