Запуск события кликом вместо кнопки

или что означают знаки "?" и ":" в кодах JavaScript

JavaScript для начинающих

Содержание.
Принцип работы тернарного оператора.
Примеры использования тернарного оператора.
Изменить размер изображения .
Изменить размер несколько раз.
Изменить цвет фона.
Изменить цвет строки.
Изменить шрифт.
Заменить один рисунок другим.
С элементами анимации.
Альтернатива тернарному оператору в JavaScript
Простой счетчик кликов.

       Для последовательного запуска событий сценария применяют код, использующий
знаки "?" и ":". Этот код носит название тернарного оператора. Он позволяет
заменить кнопки простыми кликами по экрану. Тогда при каждом клике будет происходить
переход к новому событию. При этом возможен возврат к исходному событию (также по клику)
без перезагрузки программы.
      Ниже разбирается принцип работы тернарного оператора и приводятся примеры его
использования для программирования различных событий (изменение размера изображения,
изображения другим, изменения цвета фона, изменения цвета строки,
выбора типа шрифта и др.). 

Принцип работы тернарного оператора


      Рассмотрим принцип работы тернарного оператора на простейшем примере: 
по клику сменить квадрат на круг, а по другому клику вернуться снова к квадрату. 
Приведем скрипт.
<style>
.a {
	width:150px;
height: 150px; 
background: #f00;
margin-left:20;
	}
.b {
	border-radius: 150px; width: 150px; height: 150px;
background-color: #0000ff; margin-left:20; margin-top:12;
	}
</style>
<body>
<div class="a" onclick="this.className = (this.className == 'a' ? 'b' : 'a'  )">
<p align=center><img  src='223.jpg'></div>
    Здесь классами .a и .b  задаются квадрат и круг. Замена одной фигуры на другую 
происходит за счет смены класса. Функция, которая по клику меняет один класс на другой, 
(выделена красным цветом) содержит тернарный оператор.
  




Кликни по квадрату

    Кодировка
this.className = (this.className == 'a' ? 'b' : 'a')
есть не что иное, как сокращенная запись условного оператора ( в таком виде он 
называется тернарным оператором). По сути тернарный оператор 
является сокращенной записью оператора if-else, записанного в форме:
if (условие) переменная = первое выражение;
else переменная = второе выражение
     Тернарный оператор содержит условие, за которым следует знак вопроса (?), 
затем выражение, которое выполняется, если условие истинно (первое выражение), 
далее следует двоеточие (:), и, наконец, выражение, которое нужно выполнить, если 
условие ложно (второе выражение). Знак ? соответствует русскому «то», знак :
соответствует русскому «иначе». Кодировку
(this.className == 'a' ? 'b' : 'a' )
можно произнести так: ЕСЛИ класс элемента, по которому щелкает курсор, имеет 
имя `a`, ТО выполняется действие после знака ? (класс `а` заменяется классом `b`), 
ИНАЧЕ выполняется действие после знака : то-есть, класс `b` заменяется классом `а`.
Другими словами, при первом клике на картинку она заменяется на другую, 
при втором клике происходит  возвращение  к исходной фигуре.


 Примеры использования тернарного оператора

Изменить размер изображения           
С помощью  тернарного оператора можно реализовать простейший способ переход от 
малого размера изображения к ЛЮБОМУ размеру. Клик - увеличение размера, другой 
клик - возврат к исходному размеру. Приведем скрипт.
<style>
.a img{
	width:100px;
	}
.b img{
	width:600px;
	}
</style>
<body>
<div class="a" onclick="this.className = (this.className == 'a' ? 'b' : 'a'  )"
><img  src='223.jpg'></div>



  
При первом клике на картинку ее первоначальный размер (width:100px)
заменяется на другой  (width:600px), при втором клике размер возвращается к исходному.

Изменить размер несколько раз 
(код тернарного оператора с несколькими условиями)

Приведенный ниже код  позволяет 3 раза увеличивать размер изображения, последовательно 
кликая на фото 3 раза. Возврат к исходному размеру - по четвертому клику.


<style>
.f img{
	width:100px;
	}
.g img{
	width:300px;
	}
.h img{
	width:500px;
	}
.j img{
	width:700px;
	}
</style>
<body><div class="f"  onclick="this.className =(this.className == 'f' ? 'g':
this.className == 'g' ? 'h' :  this.className == 'h' ? 'j': 'f')"><img  src='223.jpg'  ></div>




Для увеличения количества событий (размеров) код нужно дополнять строками, 
содержащими ДВА класса, последняя строка должна содержать ТРИ класса. 
Изменить цвет фона
   Кликнуть по фону квадрата. Потом еще раз - для возврата. Смотрим код
<style>
.aw {
	width:150px;
height: 150px; 
background: #f00;
margin-bottom:200px;
	}
.bw {
width:150px;
height: 150px; 
background: #00f;
margin-bottom:200px;
}
</style>
<div class="aw" onclick="this.className = (this.className == 'aw' ? 'bw' : 'aw'  )"></div>






Изменить цвет строки
   Кликнуть по строке . Потом еще раз - для возврата.Смотрим код

<style>
.as {	
color: blue;	 
font-family: Arial;
font-size:60px; font-weight: bold;
}
.bs {
font-family: Arial;
font-size:60px; font-weight: bold;
color: red;
}
</style>
<div class="as" onclick="this.className = (this.className == 'as' ? 'bs' : 'as'  )"></div>

щелкни по строке

Изменить шрифт
Тремя кликами можно просмотреть три типа шрифта. Для возврата - двойной клик.



 Щелкни! Кроме шрифта 'Arial' можно увидеть 
еще три типа шрифта (возврат - двойной клик)


Заменить один рисунок другим
Для смены рисунка используется код

<style>
.ab img{position: absolute;
	width:450px;
height:300px;
}

.bb img{opacity:0;position: absolute;
}
</style>
<div class="ab" onclick="this.className = (this.className == 'ab' ? 'bb' : 'ab' )">
</div><img   src='224.jpg'></div><img src='36.jpg' width=450px; height=300px>





С элементами анимации
Кликните на фото, через 2 секунды оно остановит свое движение. Затем можно кликнуть 
еще раз, чтобы вернуть его в исходное состояние.

<style>
.sqw img{
	width:50px;
-webkit-transition: width 2s,
-webkit-transform 2s;  
	}
.sqw-n img{
	width:700px;
-webkit-transition: width 2s,
-webkit-transform 2s;  
	}
</style>
<body>
<div class="sqw" onclick="this.className = (this.className == 'sqw' ? 'sqw-n' : 'sqw'  )"></div><img  src='35.gif'  
tabindex="1"/> 

Щелкни по картинке и потом еще раз
 



Альтернатива тернарному оператору в JavaScript
Тернарный оператор является инструментом CSS. Альтернативой ему в JavaScript служит 
массив. Ниже представлен скрипт изменения размеров картинки по клику. 4 клика 4 раза 
увеличивают размер. При 5-ом клике размер возаращается к исходному.

<head>
<body>
<script>
massive_length=5;  /*сколько будет размеров*/
col= new Array(massive_length);
colh= ["100px","200px","300px","400px","500px"] /*высота*/
colw= ["150px","300px","450px","600px","750px"] /*ширина*/
var n = 0;
function WW(){
rew = colw[n];
document.getElementById("mypict").style.width =rew;
reh = colh[n];
document.getElementById("mypict").style.height =reh;
n++;
if(n>massive_length) 
location.reload()
}
</script>
<img id="mypict"  src="3.jpg"  width=60 height=40>
<input type="button" style='margin-top:40px; font-size:18px; color:purple;  border:4px solid red;  
background-color:cyan '
 value=кликни name=but2 OnClick=WW()>
</body>






 Простой скрипт счетчика кликов
В заключение разговора о кликах простенький скрипт подсчета кликов
</head>
<style>
#tabo{border-color:green; margin-top:25px; border-style: solid;  border-width: 6px;
font-size:130;
color:red; background-color:cfc;  WIDTH:150; height:100}
</style>
<p  id="myt"></p>
<script>
var x = 0;
	function WCH()
{
x++
s2="<span style='font-size:130; color:red'><p align=center>"+x+"</p></span>"
st="<TABLE  id='tabo'>"
st2=st+"<TR><TD>"+s2+"</TR></table>"
myt.innerHTML="<p align=center><span>"+st2+"</span>"
}
function REZ() {
myt.innerHTML=''  
}
</script>
<body>
<input type="button"  value=кликай-не-очень-быстро name=but2 OnClick='WCH()'>

<input type="button"  value=сброс name=but1 OnClick='REZ()'>



Оглавление (простые скрипты для основных приложений JavaScript)



Hosted by uCoz