Toshkent davlat transport universiteti

“O‘ZBEKISTON RESPUBLIKASI TRANSPORT VAZIRLIGI” 

TOSHKENT DAVLAT TRANSPORT UNIVERSITETI 

 

 

 

 

 

 

“AXBOROT TIZIMLARI” TIZIMLARI KAFEDRASI 

 

 

 

 

 

 

 

“VEB TEXNOLOGIYALARI” FANIDAN 

LABORATORIYA ISHI 

MAVZU: JAVASCRIPT. OYNALAR BILAN ISHLASLASHDA JAVASCRIPTDAN 

FOYDALANISH

 

 

 

 

 

 

 

 

BAJARDI: AT-32 “A” GURUH TALABASI  

                                       SULTONBAYEV O. B 

                                                             QABUL QILDI: GULYAMOV J. N 

 

 

 

 

 

 

TOSHKENT-2020 

6-LABORATORIYA ISHI 

JavaScript. Oynalar bilan ishlaslashda JavaScriptdan foydalanish 

 

Ishdan maqsad: Oynalar bilan ishlaslashda JavaScriptdan foydalanish.

 

Laboratoriya ishiga topshiriq 

1-toshiriq.  Yangi  hujjat  yarating.  Avvalgi  laboratoriya  ishidagi  N  tugmalar  juftligi  tashkil 

topsin.  Harbir  juft  tugma  alohida  yangi  oynaga  N  laboratoriya  ishini  va  Noynani  ochish, 

yopishni bajarsin. Har bir oyna o’zining xususiyatiga ega: oyna o’lchami mustaqil aniqlasin, 

prokrutkadan foidalanilsin, sichqon yordamida oyna o’lchamlari o’zgartirilsin va h.k. 

2-toshiriq. Hujjat foniga o’zgartirish kiritish uchun (fon rangi tanlansin, mustaqil aniqlansin): 

a)  tugma-juft variant uchun; 

b)  o’chirib yoqish forma bilan – toq variant uchun. 

3-toshiriq. Modal dialog oyna yaratish, masalan, parol kiritish uchun panel. 

3-topshiriq: 

HTML kodi: 

html

> 

<

html 

lang

="en"

> 

<

head

> 

   <

meta 

charset

="utf-8"

> 

   <

meta 

name

="viewport" 

content

="width=device-width, initial-scale=1, shrink-to-fit=no"

> 

   <

link 

rel

="stylesheet" 

href

="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 

         

integrity

="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 

crossorigin

="anonymous"

> 

   <

title

>6-laboratoriya ishi

title

> 

    <

link 

rel

="stylesheet" 

href

="css/styles.css"

> 

head

> 

<

body

> 

<

nav 

class

="navbar navbar-expand-md navbar-light bg-light"

> 

    <

div 

class

="container"

> 

        <

a 

class

="navbar-brand" 

href

="#"

>Navbar

a

> 

        <

button 

class

="navbar-toggler" 

type

="button" 

data-toggle

="collapse" 

data-target

="#navbarNav" 

aria-

controls

="navbarNav" 

aria-expanded

="false" 

aria-label

="Toggle navigation"

> 

            <

span 

class

="navbar-toggler-icon"

>

span

> 

        

button

> 

        <

div 

class

="collapse navbar-collapse" 

id

="navbarNav"

> 

            <

ul 

class

="navbar-nav ml-auto"

> 

                <

li 

class

="nav-item active"

> 

                    <

a 

class

="nav-link" 

href

="#"

>Home <

span 

class

="sr-only"

>(current)

span

>

a

> 

                

li

> 

                <

li 

class

="nav-item"

> 

                    <

a 

class

="nav-link" 

href

="#"

>Features

a

> 

                

li

> 

                <

li 

class

="nav-item"

> 

                    <

a 

class

="nav-link" 

href

="#"

>Pricing

a

> 

                

li

> 

                <

li 

class

="nav-item"

> 

                    <

a 

class

="nav-link btn btn-secondary text-white" 

href

="#" 

data-open

>SignIn

a

> 

                

li

> 

            

ul

> 

        

div

> 

    

div

> 

nav

> 

<

section 

class

="gallery"

> 

    <

div 

class

="container"

> 

        <

div 

class

="row pt-3"

>

div

> 

    

div

> 

section

> 

<

div 

class

="modal__layer hide-modal"

> 

    <

div 

class

="modal__content"

> 

        <

h3 

class

="modal__title pb-3"

>SIGN IN

h3

> 

        <

form 

action

="index.html"

> 

            <

label 

class

="mb-1" 

for

="email_input"

>Email

label

> 

            <

input 

class

="form-control mb-3 rounded-0" 

id

="email_input" 

type

="email" 

name

="email" 

placeholder

="Email" 

required

> 

            <

label 

class

="mb-1" 

for

="password_input"

>Password

label

> 

            <

input 

class

="form-control mb-3 rounded-0" 

id

="password_input" 

type

="password" 

name

="password" 

placeholder

="Password" 

required

> 

            <

button 

class

="btn btn-secondary rounded-0 btn-block" 

type

="submit"

>Submit

button

> 

        

form

> 

        <

span 

class

="close-modal" 

data-close

>

×

span

> 

    

div

> 

div

> 

<

script 

src

="scripts/script.js"

>

script

> 

body

> 



html

> 

CSS kodi: 

.

col-md-3 img 

{ 

    

width

: 

100

%; 

    

height

: 

230

px

; 

} 

.

modal__layer 

{ 

    

position

: 

fixed

; 

    

top

: 

0

; 

    

right

: 

0

; 

    

bottom

: 

0

; 

    

left

: 

0

; 

    

display

: 

flex

; 

    

align-items

: 

center

; 

    

justify-content

: 

center

; 

    

background-color

: 

rgba

(

0

, 

0

, 

0

, 

0.4

); 

    

transition

: 

0.4

s

; 

} 

.

modal__content 

{ 

    

position

: 

relative

; 

    

width

: 

400

px

; 

    

padding

: 

15

px

; 

    

background-color

: 

#ffffff

; 

    

box-shadow

: 

0 0 5

px 

0 

rgba

(

255

, 

255

, 

255

, 

0.5

); 

} 

.

modal__title 

{ 

    

border-bottom

: 

1

px solid 

#cccccc

; 

    

font-size

: 

20

px

; 

    

font-weight

: 

300

; 

} 

.

close-modal 

{ 

    

position

: 

absolute

; 

    

font-size

: 

30

px

; 

    

top

: 

3

px

; 

    

right

: 

11

px

; 

    

font-weight

: 

200

; 

    

cursor

: 

pointer

; 

} 

.

hide-modal 

{ 

    

display

: 

none

; 

} 

.

modal-open-animation 

{ 

    

animation-name

: 

modal-open

; 

    

animation-duration

: 

0.6

s

; 

} 

@keyframes modal-open 

{ 

    

from 

{ 

        

transform

: 

translateY

(-

100

px

); 

        

opacity

: 

0

; 

    } 

    

to 

{ 

        

transform

: 

none

; 

        

opacity

: 

1

; 

    } 

} 

JS kodi: 

"use strict"

; 

document

.

addEventListener

(

"DOMContentLoaded"

, () => { 

   

let 

rowElement 

= 

document

.

querySelector

(

".row"

), 

       

modalOpener 

= 

document

.

querySelector

(

"[data-open]"

), 

       

modalLayer 

= 

document

.

querySelector

(

".modal__layer"

), 

       

modalContent 

= 

modalLayer

.

querySelector

(

".modal__content"

), 

       

modalCloser 

= 

document

.

querySelector

(

"[data-close]"

); 

 

   

for 

(

let 

i 

= 

1

; 

i 

<= 

8

; 

i

++) { 

      

rowElement

.

innerHTML 

+= 

` 

             

                

${

i

}

" 

alt="image"> 

                

ID: 

${

Math

.

round

(

Math

.

random

() * 

10000

)}

 

            

 

      ` 

   

} 

   

function 

openModal

() { 

      

modalLayer

.

classList

.

remove

(

"hide-modal"

); 

      

modalContent

.

classList

.

add

(

"modal-open-animation"

); 

      

document

.

body

.

style

.

overflow 

= 

"hidden"

; 

   } 

   

modalOpener

.

addEventListener

(

"click"

, () => { 

      

openModal

(); 

      clearInterval(

modalTimerId

); 

   }); 

   

function 

closeModal

() { 

      

modalLayer

.

classList

.

add

(

"hide-modal"

); 

      

document

.

body

.

style

.

overflow 

= 

""

; 

   } 

   

modalCloser

.

addEventListener

(

"click"

, 

closeModal

); 

 

   

modalLayer

.

addEventListener

(

"click"

, event => { 

      

if 

(event.

target 

=== 

modalLayer

) { 

         

closeModal

(); 

      } 

   }) 

   

window

.

addEventListener

(

"keydown"

, event => { 

      

if 

(event.

code 

=== 

"Escape"

) { 

         

closeModal

(); 

      } 

   }) 

   

const 

modalTimerId 

= setTimeout(() => { 

      

openModal

() 

   }, 

5000

); 

}) 

Natijasi_:__2-toshiriq'>Natijasi: 

2-toshiriq: 

a)  tugmalar orqali qilish: 

HTML kodi: 

html

> 

<

html 

lang

="en"

> 

<

head

> 

   <

meta 

charset

="utf-8"

> 

   <

meta 

name

="viewport" 

content

="width=device-width, initial-scale=1, shrink-to-fit=no"

> 

   <

link 

rel

="stylesheet" 

href

="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 

         

integrity

="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 

crossorigin

="anonymous"

> 

   <

title

>6-laboratoriya ishi

title

> 

    <

link 

rel

="stylesheet" 

href

="css/styles.css"

> 

head

> 

<

body

> 

<

div 

class

="container pt-5"

>

div

> 

<

script 

src

="scripts/script.js"

>

script

> 

body

> 



html

> 

CSS kodi: 

CSS ishlatilmadi 

JS kodi: 

"use strict"

; 

document

.

addEventListener

(

"DOMContentLoaded"

, () => { 

   

let 

container 

= 

document

.

querySelector

(

".container"

) 

   

for 

(

let 

i 

= 

1

; 

i 

<= 

100

; 

i

++) { 

      

const 

btn 

= 

document

.

createElement

(

"button"

), 

          

color 

= 

Math

.

round

(

Math

.

random

() * 

100000

); 

      

if 

(

color 

<= 

999

) { 

         

btn

.

textContent 

= 

`#000

${

color

}

` 

      

} 

else if 

(

color 

<= 

9999

) { 

         

btn

.

textContent 

= 

`#00

${

color

}

` 

      

} 

else if 

(

color 

>= 

10000 

&& 

color 

<= 

99999

) { 

         

btn

.

textContent 

= 

`#0

${

color

}

` 

      

} 

else 

{ 

         

btn

.

textContent 

= 

`#

${

color

}

` 

      

} 

      

btn

.

classList

.

add

(

"btn"

, 

"mr-3"

, 

"mb-3"

); 

      

btn

.

style

.

cssText 

= 

`background-color: 

${

btn

.

textContent

}

`

; 

      

btn

.

addEventListener

(

"click"

, (event) => { 

         

document

.

body

.

style

.

backgroundColor 

= 

`

${event.

target

.textContent}

` 

      

}) 

      

container

.

append

(

btn

); 

   } 

}) 

 

Natijasi: 

b)  forma yordamida kun vat un effektini qilish 

HTML kodi: 

html

> 

<

html 

lang

="en"

> 

<

head

> 

   <

meta 

charset

="utf-8"

> 

   <

meta 

name

="viewport" 

content

="width=device-width, initial-scale=1, shrink-to-fit=no"

> 

   <

link 

rel

="stylesheet" 

href

="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 

         

integrity

="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 

crossorigin

="anonymous"

> 

   <

title

>6-laboratoriya ishi

title

> 

    <

link 

rel

="stylesheet" 

href

="css/styles.css"

> 

head

> 

<

body

> 

<

form

> 

    <

label 

for

="day"

> 

       <

img 

src

="img/sun.png" 

alt

="sun image"

> 

    

label

> 

    <

input 

id

="day" 

type

="radio" 

name

="theme"

> 

    <

label 

for

="night"

> 

       <

img 

src

="img/moon-removebg-preview.png" 

alt

="moon"

> 

    

label

> 

    <

input 

id

="night" 

type

="radio" 

name

="theme"

> 

form

> 

<

div 

class

="container pt-5"

> 

    <

div 

class

="row"

>

div

> 

div

> 

<

script 

src

="scripts/script.js"

>

script

> 

body

> 



html

> 

CSS kodi: 

.

col-md-3 img 

{ 

   

width

: 

100

%; 

   

height

: 

220

px

; 

   

border-radius

: 

10

px

; 

} 

input 

{ 

   

display

: 

none

; 

} 

.

dark 

{ 

   

background-color

: 

#212121

; 

} 

.

dark * 

{ 

   

color

: 

#ffffff!important

; 

} 

label img 

{ 

   

width

: 

80

px

; 

} 

form 

{ 

   

text-align

: 

center

; 

   

padding-top

: 

30

px

; 

} 

JS kodi: 

"use strict"

; 

document

.

addEventListener

(

"DOMContentLoaded"

, () => { 

   

const 

rowElement 

= 

document

.

querySelector

(

".row"

), 

       

form 

= 

document

.

querySelector

(

"form"

), 

       

day 

= 

form

.

querySelector

(

"#day"

), 

       

night 

= 

form

.

querySelector

(

"#night"

); 

   

for 

(

let 

i 

= 

1

; 

i 

<= 

8

; 

i

++) { 

      

rowElement

.

innerHTML 

+= 

` 

          

            

${

i

}

" alt="image 

${

i

}

"> 

            

ID: 

${

Math

.

round

(

Math

.

random

() * 

100000

)}

 

         

 

      ` 

   

} 

   

night

.

addEventListener

(

"input"

, () => { 

      

document

.

body

.

classList

.

add

(

"dark"

) 

   }) 

   

day

.

addEventListener

(

"input"

, () => { 

      

document

.

body

.

classList

.

remove

(

"dark"

) 

   }) 

}) 

Natija: 

 

 

1-topshiriq: 

HTML kodi: 

html

> 

<

html 

lang

="en"

> 

<

head

> 

   <

meta 

charset

="utf-8"

> 

   <

meta 

name

="viewport" 

content

="width=device-width, initial-scale=1, shrink-to-fit=no"

> 

   <

link 

rel

="stylesheet" 

href

="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 

         

integrity

="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 

crossorigin

="anonymous"

> 

   <

title

>6-laboratoriya ishi

title

> 

    <

link 

rel

="stylesheet" 

href

="css/styles.css"

> 

head

> 

<

body

> 

<

button 

class

="btn btn-info"

>KUN.UZ sahifasini ochish

button

> 

<

script 

src

="scripts/script.js"

>

script

> 

body

> 



html

> 

CSS kodi: 

CSS dan foydalanmadim 

JS kodi: 

"use strict"

; 

document

.

addEventListener

(

"DOMContentLoaded"

, () => { 

   

const 

btn 

= 

document

.

querySelector

(

".btn"

); 

   

btn

.

addEventListener

(

"click"

, () => { 

      

window

.

open

(

"https://kun.uz"

, 

"kun.uz"

, 

"width=500,height=600"

) 

   }) 

}) 

Natijasi: 

 

Laboratoriya ishida ishlatilgan rasmlar: