- •Teoriyaliq bo’lim.
- •Server ta’repindegi ssenariylar
- •Php (Hypertext Preprocessor)
- •Css (Cascading Style Sheets)
- •Kliеnt ta'repindegi scenariylar
- •JavaScript
- •Var MyVariable;
- •Ameliy bo’lim.
- •Aylaniwshi su’wret slayder
- •Su’wret u’stine basqanda o’lshemi u’lkeyiwshi fotogalereya.
- •Aylaniwshi su’wret slayder.
- •Index.Html kodlari to’mendegishe.
- •Su’wret u’stine basqanda o’lshemi u’lkeyiwshi fotogalereya.
- •Juwmaqlaw.
- •Paydalanilg’an a’debiyatlar
- •Internet materiallari:
Var MyVariable;
Egerde bul o’zgeriwshini null ma’nisi menen o’zgertsek, ol halda o’zgeriwshi tipi o’zgeredi ha’m null ma’niske iye bolg’an o’zgeriwshige aylanadi:
MyVariable = null;
Mag’liwmat tipin o’zgertiw
Egerde an’latpalarda ha’r qiyli tipli o’zgeriwshiler ushirap qalsa, JavaScript interpretatori avtomatik halda sanli mag’liwmatlardi tekstli qatarlarg’a o’zgertiwi mu’mkin. Keri aylandiriwdi (qatardi-sang’a) arnawli funkciyalar ja’rdeminde, yag’niy parseIntvaparseFloat funkciyalari ja’rdemine o’zgertiw mu’mkin.
Ameliy bo’lim.
A’meliy jumista Web-betlerde ko’rinislerdi JavaScript arqali basqariw boyinsha 2 misal ko’rip o’temiz. Bular:
Aylaniwshi su’wret slayder
Su’wret u’stine basqanda o’lshemi u’lkeyiwshi fotogalereya.
Bulardi izbe-iz ko’rip shig’amiz.
Aylaniwshi su’wret slayder.
Slayder HTML, CSS, JavaScript, jQuery kodlarinan paydalanip jaratilg’an.
A’meliy jumisimiz, css, js, images papkalari ha’m index.html web betinen ibarat.
Index.Html kodlari to’mendegishe.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript kurs jumisi</title>
<meta charset="UTF-8" />
<meta name="keywords" content="jquery, rotation, slider, images, slideshow, autoplay, play, pause, css3"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="content">
<h1>Aylaniwshi su'wret slayder</h1>
<div class="rm_wrapper">
<div id="rm_container" class="rm_container">
<ul>
<li data-images="rm_container_1" data-rotation="-15"><img src="images/1.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="images/2.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="images/3.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="images/4.jpg"/></li>
</ul>
<div id="rm_mask_left" class="rm_mask_left"></div>
<div id="rm_mask_right" class="rm_mask_right"></div>
<div id="rm_corner_left" class="rm_corner_left"></div>
<div id="rm_corner_right" class="rm_corner_right"></div>
<h2>Muzey ha'm milliy kiyimler</h2>
<div style="display:none;">
<div id="rm_container_1">
<img src="images/1.jpg"/>
<img src="images/5.jpg"/>
<img src="images/6.jpg"/>
<img src="images/7.jpg"/>
</div>
<div id="rm_container_2">
<img src="images/2.jpg"/>
<img src="images/8.jpg"/>
<img src="images/9.jpg"/>
<img src="images/10.jpg"/>
</div>
<div id="rm_container_3">
<img src="images/3.jpg"/>
<img src="images/11.jpg"/>
<img src="images/12.jpg"/>
<img src="images/13.jpg"/>
</div>
<div id="rm_container_4">
<img src="images/4.jpg"/>
<img src="images/14.jpg"/>
<img src="images/15.jpg"/>
<img src="images/16.jpg"/>
</div>
</div>
</div>
<div class="rm_nav">
<a id="rm_next" href="#" class="rm_next"></a>
<a id="rm_prev" href="#" class="rm_prev"></a>
</div>
<div class="rm_controls">
<a id="rm_play" href="#" class="rm_play">Play</a>
<a id="rm_pause" href="#" class="rm_pause">Pause</a>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.RotateImageMenu.js"></script>
</body>
</html>