tip-Простые типовые скрипты для JavaScript.



Содержание:

Перенос строки в тексте команды alert.
Вывод динамической переменной, текста и картинки.
Массив. Цикл. 
Показать - скрыть.
Слайдшоу
5 способов вывода текста.
Условный оператор.
Вывод динамической переменной в рамку.
Динамический вывод информации в таблицу.
 
Перенос строки в тексте команды alert

Смотреть.  Скрипт сценария. 
<html>
<head>
<title>tip1</TITLE>
<script>
v="alert \n без переноса строки"
alert(v)
OnMousedown=RE() 
function RE(){
w="alert\n c переносом\n строки\n в тексте"
alert(w)
}
</script>
</head>
<body bgcolor="00ff00">
</body>
</html>
 
Вывод динамической переменной, текста и картинки
по ходу исполнения скрипта
Смотреть.  Скрипт сценария. 
<html>
<head>
<title>tip9</TITLE>
<p  id="my"></p><p  id="tim"></p>
<script>
var x=0;
setInterval('WW()',100)
function WW(){
x++;
if (x>3)
{
w="выводим цифры"
my.innerHTML="<span style='font-size:40;color:blue'>"+w+"</span>"}
if (x>15)
{
my.innerHTML="<span style='font-size:60;color:red'>"+x+"</span>"}
if (x>35)
{
a="<span style='font-size:30;color:blue'>выводим ТЕКСТ:
</span>"
b="<span style='font-size:40;color:red'>вывод динамической переменной, текста и картинки</span>"
w=a+b
my.innerHTML=w
}
if (x>75)
{
w="выводим рисунок"
my.innerHTML="<span style='font-size:40;color:brown'>"+w+"</span>"
tim.innerHTML="<p align=center><img  SRC='530.jpg'  width=300 height=200>"
}
if (x>100)
{
my.innerHTML='<style.display="none">';
r="КОНЕЦ"
tim.innerHTML="<p align=center><span style='font-size:80;color:red'>"+r+"</span>"
}
}
</script>
</head>
<body bgcolor="00ff00">
</body>
</html>
   
Показать-скрыть

Смотреть.
    Для начала напомним, что display = "block" соответствует видимому объекту, 
а display = "none"- невидимому.   Предположим, какой-то элемент документа
(текст или изображение) надо в нужный момент либо показать (вывести на экран монитора),
 либо скрыть (сделать его невидимым). 
      Начинаем с того, что этот элемент персонифицируем, чтобы  знать, как к нему обратиться.
Для этого присваиваем ему идентификатор id (без имени). 
    Далее по коду 
var elem=document.getElementById(id);
превращаем его в переменную elem. Затем записываем 
два условия. Первое:

if(elem.style.display == "none") elem.style.display = "block"

Оно расшифровывается так. Если наш элемент скрыт 
(display == "none"), делаем его видимым 
(display = "block").
Если же наш элемент не скрыт (display = "none")с помощью условия:

else elem.style.display = "none"

делаем его невидимым (скрываем).

    В целом функция показать-скрыть (именуем ее как SH) выражается 
таким кодом:

function SH(id)
{
var elem=document.getElementById(id)
if(elem.style.display=="none")
elem.style.display="block"
else 
elem.style.display="none"
}
                                
Здесь SH(id) - функция формального параметра id.
    Для того, чтобы функция сработала, надо формальный параметр превратить в 
конкретный элемент. Для этого перед кодом функция нужно указать, к какому именно 
идентификатору мы обращаемся, т.е. поставить его имя в скобки вместо формального 
параметра id. Например, SH('det')

    В теле документа (body) 
необходимо указать какому элементу соответствует
идентификатор. Например, для изображения:

<div id="det" style="display: none"><img  SRC='150.jpg'  align=right width=300 height=200>
</div>

Код style="display: none" указывает, что в исходном состоянии элемент скрыт
(невидим). Получив параметр 'det', функция SH сделает
его видимым.
Скрипт сценария.
<HTML>
<HEAD>
<TITLE>tip8</TITLE>
<script>
setTimeout("WW1()",2000)
function WW1()
{
SH('det') 
}
setTimeout("WW()",4000);
function WW()
{
SH('det')
}
function SH(id){
var elem=document.getElementById(id)
if(elem.style.display=="none")
elem.style.display="block"
else 
elem.style.display="none"
}
</script>
</head>
<body>
<div id="det" style="display: none;"><p align=center><img  SRC='530.jpg'   width=450 height=300></div>
<body bgcolor="00ff00">
</body>
</html>

Массив. Цикл. Непрерывный цикл.

Рассмотрим скрипт цикла, в котором изменение переменной i задается обычным способом 
с помощью оператора 
for (i = 0; i <= 13; i++).
Смотреть.
Скрипт сценария.
<HTML>
<HEAD>
<TITLE>cicl1</TITLE>
<script>
massive_length=7
col =  ["1  ", "2  ",  "3  ", "4  ", "5  ", "6  ", "7  "]
function WW() {
for (i = 0; i <= 6; i++)
{
var z=col[i]+","+" "
document.write(z.fontsize (7))
document.fgColor="#ff0000"
}
}
WW() 
</script>
</head>
<body>
</body>
</html>

Рассмотрим скрипт непрерывного цикла, в котором изменение переменной 
цикла задается другим способом - путем наращивания переменной n на единицу. 
Здесь вывод элементов массива происходит в динамическом 
режиме с помощью свойства innerHTML и функции задержки.
Обратите внимание, что сценарий нуждается в лине массива,
и потому массив задается более длинным кодом 
Смотреть.Скрипт сценария.
<HTML>
<HEAD>
<TITLE>cicl2</TITLE>
<span id="mym">
<script>
massive_length=7
col= new Array(massive_length);
col= 
 ["1", "2",  "3", "4", "5", "6", "7"]
var n = 0;
function WW(){
mym.innerHTML="<span style='font-size:60;color:red'>"+col[n]+"</span>"
n++
if(n>massive_length-1) n=0
window.setTimeout("WW()",500);
}
WW()
</script>
</head>
<body>
</body>
</html>

Элементами массива могут быть не только цифры или числа, но и слова, файлы, цвета и т.д. 
Приведем скрипт, меняющий цвет фона. 
Смотреть
Скрипт

<script>
n=0
function FON()
{
window.setTimeout( "FON()", 500) 
massive_length=10
cv= new Array(massive_length)
cv=["00fa9a","ffefd5","99FFFF","D5CCBB","FFFF99","ccfc",
"FFCC99","ccffcc","CCCCCC","9370db"]
document.bgColor=cv[n]
n++
if(n>massive_length) n=0;
}
FON();
</script>

С л а й д ш о у
Смотреть пример.
В этом простом и короткий скрипте обратите внимание на предельно 
короткий код массива. Это достигается за счет того, 
что адрес перехода записан как присоединение элемента 
массива к переменной w=.jpg. Еще более коротким является 
код вывода и замещения изображений с помощью идентификатора "tam". 
Последний записывают не перед скриптом (как обычно), а в теле 
документа (body). Если здесь указать первый элемент массива, 
то время его просмотра удваивается. Если же указать любой другой 
элемент массива, то он при просмотре будет появляться два раза.
<HTML>
<HEAD>
<TITLE>tip13с</TITLE>
<p  id="my"></p>
<script>
par= new Array
massive_length=6
par=["533","112","32","17","532","150"] 
var  n=0
function ST(){
  setInterval(SH, 2000)
} 
function SH()
{
if (n<6)
{
var w=".jpg"
y=par[n++]+w
tam.src=y
}
else
s2="<font size=7; color=red ><p align=center>КОНЕЦ</p>"
st="<TABLE BORDER=4  WIDTH=200 height=100>"
st2=st+"<TR><TD>"+s2+"</TR></table>"
my.innerHTML="<p align=center><span >"+st2+"</span>"
tam.outerHTML='<style.display="none">'
}
ST() 
</script>
</HEAD>
<body bgcolor="00ff00">
<p align=center><img  id='tam'  src="533"  width=750 height=550></img></p>
</body>
</html>
5 способов вывода текста
Смотреть пример 1. 1-ый способ -это обычный HTML-ный 
способ вывода текста. Без открытия нового окна
изменить или добавить новый текст нельзя.
Остальные способы позволяют изменять или добавлять текст в 
текущем окне по ходу исполнения сценария.
Здесь слово "ТЕКСТ выведен по коду" обозначает ту текстовую
информацию, которую нужно вывести. Помещение стиля
в описание переменной или в сам вывод дает два варианта 
вывода -  
Пример 2. 
Поскольку вышерассмотренный скрипт с 5-тью способами
вывода текста (пример 1) 
довольно громоздкий, мы рассмотрим более простой  Пример 3.
Скрипт примера 3 имеет вид

<HTML>
<HEAD>
<TITLE>tip4с</TITLE>
<font size=6 color="#8a2be2">p1) Способ 1

<p  id="ab3"></p>
<p  id="ab4"></p>
<p  id="my1"></p>
<p  id="my2"></p>
<p  id="ti1"></p>
<p  id="ti2"></p>
<script>
w="  2) Способ 2, использующий id='ab3'"
ab3.innerHTML="<pspan style='font-size:30;color:blue'>'+w+'<p/span>p"
w="<span style='font-size:30;color:red'>    Способ 2a, 
использующий id='ab4'</span>"
ab4.innerHTML=w
r=" 3) Способ 3, использующий id='my1'"
document.getElementById("my1").innerHTML="<span style='font-
size:30;color:blue'>'+r+'</span>"
r="<span style='font-size:30;color:red'>    Способ 3a, 
использующий id='my2'</span>"
document.getElementById("my2").innerHTML=r
b=" 4) Способ 4, использующий id='ti1' "
thelement=document.getElementById("ti1")
thelement.innerHTML="<span style='font-size:30;color:blue'>'+b+'<p/span>"
b="<span style='font-size:30;color:red'>    Способ 4a,
использующий id='ti2'</span>"
thelement=document.getElementById("ti2")
thelement.innerHTML=b
s1="<font size=6>5) Способ 5, использующий метод write"
document.write(s1)
document.fgColor="#ff00ff"

</script>
</head>
<body>
<body bgcolor="00ff00">
</body>
</html>


Условный оператор
Смотреть. Сценарий скрипта таков. 
<html>
<head>
<TITLE>tip5a</TITLE>
function CP(){
var d=document
var a=Number(d.form1.num.value)
if (a==0)
{
c=window.open("530.jpg","","width=550,height=430,left=300, top=300");
setInterval("c.close();",3000);
t="Нажми ОК \n\n\ и потом Очисть Поле Ввода кнопкой ОПВ"
setTimeout("alert(t);",3500)
}
else
alert("Неправильно \n\n\ Нажми ОК \n\n\ и потом Очисть Поле Ввода кнопкой ОПВ")
}
function WW()
{
location="tip5a.html"
}
</script>
</head>
<body>
<body bgcolor="ccffcc" text="Arial">
<P>font size=6 color="#ff00ff">Если введен НОЛЬ, то после нажатия 
"ПУСК" откроется и закроется (через три секунды)  окошко с картинкой,
если другая цифра, то alert ответит "неправильно"
<form name="form1">
<input  type=text name="num" size=10>
<input  type="button" value=ПУСК onClick="CP()">
<P></P>
</form></p><font>
</body>
</html>
Вывод динамической переменной в рамку

Сначала посмотрим работу скрипта.  Здесь роль динамической
переменной играет переменная х, пропорциональная 
времени.  Сценарий скрипта таков.
<html>
<head>
<TITLE>tip15</TITLE>
<p  id="tim"></p><p  id="mim"></p><p  id="tam"></p>
<script>
var x=0;
setInterval('WW()',100)
function WW(){
x++;
s3="<p align=center><span style='font-size:60;color:blue'>"+x+"</span>"
st="<TABLE  BORDER=5; bgColor=#f0ffff ; borderColor=ff00ff  WIDTH=600 height=350>"
st2=st+"<TD>"+s3+"</table>"
mim.innerHTML="<p align=center>'+st2+'"
}
WW()
</script>
</body>
</html>



Динамический вывод информации в таблицу

Сначала посмотрим работу  скрипта.  Скрипт описывает 
последовательную сборку таблицы 
из ячеей, содержащих текст или изображение.
Сценарий скрипта таков.
<html>
<head>
<TITLE>tip5a</TITLE>
<p  id="mim"></p>
<p  id="tim"></p>
<p  id="tam"></p>
<script>
var x=0;
setInterval('WW()',100)
function WW(){
x++;
s1="<p align=center><img  SRC='530.jpg'  width=300 height=180></p>"
st="<TABLE  BORDER=5; bgColor=#f0ffff ; borderColor=ff00ff  WIDTH=550 height=350>"
st2=st+"<TR><TD>"+s1+"</table>"
mim.innerHTML="<p align=center>"+st2+"</p&g"//выводим текст
if (x>13)
{
s2="<font size=6; color=ff0000><p align=center>Здесь может быть размещен текст</p>"
st2=st+"<TR><TD>"+s1+"<TD>"+s2+"</table>"
mim.innerHTML="<p align=center>"+st2+"</p&g"//выводим текст
}
if (x>23)
{
s3="<font size=6; color=ff0000><p align=center>Здесь может быть размещен текст</p>"
st2=st+"<TR><TD>"+s1+"<TD>"+s2+"<TR><TD>"+s3+"</table>"
mim.innerHTML="<p align=center>"+st2+"</p&g"//выводим текст
}
if (x>35)
{
s4="<p align=center><img  SRC='150.jpg'  width=300 height=180></p>"
st="<TABLE  BORDER=5; bgColor=#f0ffff ; borderColor=ff00ff  WIDTH=550 height=350>"
mim.innerHTML="<p align=center>"+st2+"</p&g"//выводим текст
}
if (x>45)
{
s3="<p align=center><img  SRC='112.jpg'  width=270 height=170></p>"
st1="<TABLE  BORDER=5; bgColor=#f0ffff ; borderColor=0000ff  WIDTH=270 height=170>"
st3=st1+"<TR><TD>"+s4+"</table>"
tim.innerHTML="<p align=center>"+st2+"</p&g"//выводим текст
}
if (x>53)
{
s5="<p align=center><span style='font-size:60;color:red'>"+x+"</span>"
st3=st1+"<TR><TD>"+s5+"</table>"
tim.innerHTML="<p align=center>"+st3+"</p&g"//выводим текст
}
if (x>80)
{
s3="<font size=6; color=008000><p align=center>Здесь может быть размещен текст</p>"
st2=st1+"<TR><TD>"+s3+"</table>"
tim.innerHTML="<p align=center>"+st2+"</p>"
}
if (x>100)
{
s3="<font size=6; color=008000><p align=center>КОНЕЦ</p>"
st2=st1+"<TR><TD>"+s3+"</table>"
tim.innerHTML="<p align=center>"+st2+"</p>"
}
}
WW()
</script>
</body>
</html>







home (оглавление)