Примеры html javascript – Где посмотреть реальные примеры использования «правильных» клиентских javascript?

Leave a Comment / Html / By /

HTML JavaScript

JavaScript делает страницы HTML более динамичными и интерактивными.

Пример

Мой Первый JavaScript

Нажми на меня, чтобы отобразить дату и время

Редактор кода »

Тег <script> HTML

Тег <script> используется для определения клиентского сценария (JavaScript).

Элемент <script> содержит сценарии или указывает на внешний файл скрипта через атрибут src.

Чаще всего используется JavaScript — для манипуляция изображения, формы проверки, а также динамического изменения содержания.

Чтобы выбрать элемент HTML в JavaScript, очень часто используется метод document.getElementById(id).

В примере JavaScript написать «Привет JavaScript!» в нутри элемента HTML с :

Совет: Вы можете узнать гораздо больше о JavaScript в нашем Учебник JavaScript.

Что может JavaScript

Вот некоторые примеры того, что JavaScript может сделать:

JavaScript может изменять содержимое HTML

document.getElementById(«demo»).innerHTML = «Привет JavaScript!»;

Редактор кода »

JavaScript может изменить стили HTML

document.getElementById(«demo»).style.fontSize = «25px»;
document.getElementById(«demo»).style.color = «red»;
document.getElementById(«demo»).style.backgroundColor = «yellow»;

Редактор кода »

JavaScript может изменить атрибуты HTML

document.getElementById(«image»).src = «picture.gif»;

Редактор кода »

Тег <noscript> HTML

Тег <noscript> используется, чтобы предоставить альтернативный контент для пользователей у которых отключены скрипты в браузере или имеют браузер, который не поддерживает клиентские скрипты:

Пример


document.getElementById(«demo»).innerHTML = «Привет JavaScript!»;

<noscript>К сожалению, ваш браузер не поддерживает JavaScript!</noscript>

Редактор кода »

Теги Script HTML

ТегОписание
<script>Определяет клиентский сценарий
<noscript>Определяет альтернативный контент для пользователей, которые не поддерживают клиентские скрипты

Проверьте себя с помощью упражнений!

Примеры JavaScript скриптов — Учитель программирования.ру

Пример 4. Плавающая ссылка



Плавающие ссылки
<!&ndash;
.line { color: #333333; font-weight: bold}
–>


// ATTENTION: Too many images will slow down the floating effect.
var message=new Array()
message[0]=”http://scriptic.ru”
message[1]=”Lidia”
message[2]=”http://studia.scriptic.ru”

// You may add a link for each message.
// In case you do not want to link a message just add a ‘#’ instead of an URL
var message_link=new Array()
message_link[0]=”http://scriptic.ru”
message_link[1]=”mailto:[email protected]”
message_link[2]=”http://studia.scriptic.ru”

// font-family for each message
var message_font=new Array()
message_font[0]=”Times New Roman, Times, serif”
message_font[1]=”Impact, Arial, sans-serif”
message_font[2]=”Comic Sans MS, Arial, sans-serif”

// font-size for each message
var message_fontsize=new Array()
message_fontsize[0]=28
message_fontsize[1]=25
message_fontsize[2]=30

// font-color for each message
var message_fontcolor=new Array()
message_fontcolor[0]=”red”
message_fontcolor[1]=”olive”
message_fontcolor[2]=”blue”

// font-weight for each message. Choose a value between 1 and 9
var message_fontweight=new Array()
message_fontweight[0]=7
message_fontweight[1]=9
message_fontweight[2]=7

// width for each message (pixels)
var message_width=new Array()
message_width[0]=300
message_width[1]=200
message_width[2]=300

// average speed of the floating images. Higher means faster
var floatingspeed=3

// do not edit the variables below
var tempo=30
var numberofmessages=message.length-1
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=numberofmessages;i++) {
stepx[i]=randommaker(floatingspeed)

stepy[i]=randommaker(floatingspeed)
}
var imgwidth=new Array()
var imgheight=new Array()
for (i=0;i<=numberofmessages;i++) {
imgwidth[i]=10
imgheight[i]=10
}
var i_fadestrength=new Array()
var i_fadestep=new Array()
var i_fadenow=new Array()
var i_fadenowmax=new Array()
for (i=0;i<=numberofmessages;i++) {
i_fadenowmax[i]=randommaker(10)+2
i_fadestrength[i]=randommaker(90)
i_fadestep[i]=1
i_fadenow[i]=0
}
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
var timer
for (i=0;i<=numberofmessages;i++) {
message_fontweight[i]=100*message_fontweight[i] }

var spancontent=new Array()
for (i=0;i<=numberofmessages;i++) {
spancontent[i]=”<table width=”+message_width[i]+” cellspacing=0><tr><td valign=top>”
spancontent[i]+=”<span style=’position: relative; font-family: “+message_font[i]+”; font-size: “+message_fontsize[i]+”pt; font-weight: “+message_fontweight[i]+”‘>”

spancontent[i]+=”<a href=’”+message_link[i]+”‘>”
spancontent[i]+=”<font color=”+message_fontcolor[i]+”>”
spancontent[i]+=message[i] spancontent[i]+=”</a>”
spancontent[i]+=”</span>”
spancontent[i]+=”</td></tr></table>”
}

function setValues() {
if (document.all) {
marginbottom=document.body.clientHeight-5
marginright=document.body.clientWidth-5
for (i=0;i<=numberofmessages;i++) {
var thisspan = eval(“document.all.span”+i)
thisspan.innerHTML=spancontent[i] var thisspan = eval(“document.all.span”+(i)+”.style”)
thisspan.posLeft=randommaker(marginright)
thisspan.posTop=randommaker(marginbottom)
}
for (i=0;i<=numberofmessages;i++) {
var thisspan = eval(“document.all.span”+i)
imgwidth[i]=thisspan.offsetWidth
imgheight[i]=thisspan.offsetHeight

}
checkmovement()
}
}

function randommaker(range) {

rand=Math.floor(range*Math.random())
if (rand==0) {rand=Math.ceil(range/2)}
return rand
}

function checkmovement() {
if (document.all) {
for (i=0;i<=numberofmessages;i++) {
var thisfilter=eval(“span”+i)
i_fadenow[i]++
if (i_fadenow[i]>=i_fadenowmax[i]) {
i_fadenow[i]=0
if (i_fadestrength[i]>=100) {i_fadestep[i]=i_fadestep[i]*-1}
else if (i_fadestrength[i]<=-20) {i_fadestep[i]=i_fadestep[i]*-1}
}
i_fadestrength[i]+=i_fadestep[i] thisfilter.filters.alpha.opacity=Math.floor(i_fadestrength[i])

}
checkposition()
movepictures()
timer=setTimeout(“checkmovement()”,tempo)
}
}

function movepictures() {
if (document.all) {
for (i=0;i<=numberofmessages;i++) {
var thisspan=eval(“document.all.span”+(i)+”.style”)
thisspan.posLeft+=stepx[i] thisspan.posTop+=stepy[i] }
}
}

function checkposition() {
if (document.all) {
for (i=0;i<=numberofmessages;i++) {

var thisspan=eval(“document.all.span”+i+”.style”)
if (thisspan.posLeft>marginright-imgwidth[i]) {
thisspan.posLeft-=Math.abs(stepx[i]+1)
stepx[i]=randommaker(floatingspeed)*-1
}
if (thisspan.posLeft<marginleft) {
thisspan.posLeft+=Math.abs(stepx[i])
stepx[i]=randommaker(floatingspeed)
}
if (thisspan.posTop>marginbottom-imgheight[i]) {
thisspan.posTop-=Math.abs(stepy[i])
stepy[i]=randommaker(floatingspeed)*-1

}
if (thisspan.posTop<margintop) {
thisspan.posTop+=Math.abs(stepy[i])
stepy[i]=randommaker(floatingspeed)
}
}
}
}
// – End of JavaScript – –>
</SCRIPT>
</head>
<BODY style=”width:100%;overflow-x:hidden;overflow-y:hidden”>
<SCRIPT>
<!– Beginning of JavaScript –
if (document.all) {
for (i=0;i<=numberofmessages;i++) {
document.write(“<span id=’span”+i+”‘ style=’position: absolute; z-index: 100; filter: alpha(opacity=50)’></span>”)

document.close()
}
window.onload=setValues
}
// – End of JavaScript – –>
</SCRIPT>
</body>
</html>

JS JavaScript Куда


Тег <script>

В HTML код JavaScript должен быть вставлен между тегами <script> и </script>.

Пример

<script>
document.getElementById(«demo»).innerHTML = «My First JavaScript»;
</script>

В старых примерах JavaScript может использоваться атрибут Type: <тип скрипта = «Text/JavaScript»>.
Атрибут Type не является обязательным. JavaScript является языком сценариев по умолчанию в HTML.

Функции и события JavaScript

функция JavaScript — это блок кода JavaScript, который может быть выполнен при вызове.

Например, функция может быть вызвана при возникновении события , например при нажатии пользователем кнопки.

Вы узнаете гораздо больше о функциях и событиях в более поздних главах.

JavaScript в <head> или <BODY>

В документ HTML можно поместить любое количество скриптов.

Скрипты можно размещать в <BODY> или в разделе <head> страницы HTML или в обоих.

JavaScript в <head>

В этом примере функция JavaScript помещается в раздел <head> страницы HTML.

Функция вызывается (вызывается) при нажатии кнопки:

Пример

<head>
<script>
function myFunction() {
    document.getElementById(«demo»).innerHTML = «Paragraph changed.»;
}
</script>
</head>

<body>

<h2>A Web Page</h2>
<p>A Paragraph</p>
<button type=»button»>Try it</button>

</body>
</html>

JavaScript в <BODY>

В этом примере функция JavaScript помещается в раздел <BODY> страницы HTML.

Функция вызывается (вызывается) при нажатии кнопки:

Пример


<h2>A Web Page</h2>
<p>A Paragraph</p>

<button type=»button»>Try it</butt

JavaScript

JavaScript

Язык JavaScript позволяет писать различные сценарии (скрипты) на клиентской стороне.

Этот язык является очень простым для изучения, а также, на мой взгляд, его освоение обязательно для любого Web-мастера, причём желательно сразу после CSS и перед PHP. Так как настоящие возможности по созданию дизайну сайта раскрываются при объединении HTML, CSS и JavaScript. И это объединение называется DHTML (Dynamic HTML), которое позволяет создать абсолютно любой внешний вид страниц, а также позволяет настроить интерактивность страниц.

Применив DHTML у себя на сайте, можно поставить определённую точку в его создании, и эта точка называется: готовая структура и внешний вид сайта.

Теперь немного конкретно о JavaScript. Этот язык позволяет Вам сделать массу возможностей для общения с пользователем без перезагрузки страницы (отсюда и название

DHTML). Например, с помощью JavaScript можно сделать проверку корректности введённых данных в форму. Также с помощью JavaScript можно создавать анимацию на страницах, делая их внешний вид более необычным и захватывающим внимание посетителя.

Также JavaScript позволяет на лету обрабатывать данные из форм, обрабатывать различные действия пользователей (например, нажатие клавиш на клавиатуре, изменения размера окон, движение мыши и так далее).

Также JavaScript позволяет менять на лету стили тегов HTML. Что открывает безграничные просторы по Web-дизайну.

Все эти возможности (их гораздо-гораздо больше) делают язык JavaScript незаменимым при создании своего web-сайта. И 99.9% сайтов в Интернете используют JavaScript на полную катушку.

Разумеется, чтобы почувствовать всю мощь и научиться её использовать у себя на сайте, необходимо познакомиться с этим языком программирования. Для этого создана специальная категория, посвящённая основам JavaScript, изучив которую, Вы сможете писать различные скрипты, которые сделают Вашу страницу максимально удобной и красивой.

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

Свежие материалы по JavaScript

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *