Tsim Koj Thawj Lub Vev Xaib: 10 Kauj Ruam

2024 Tus sau: John Day | [email protected]. Kawg hloov kho: 2024-01-30 09:26

Hauv qhov kev qhia no koj yuav kawm tsim lub vev xaib yooj yim uas muaj cov ntawv sib txuas ua ke thiab cov ntaub ntawv sib tham sib javascript.

Kauj ruam 1: Tsim Koj Cov Ntawv

Tsim daim nplaub tshev rau cov ntawv peb yuav tsim los khaws cia. Xav tias dawb rau nws lub npe txawm li cas los xij koj thov, tsuas yog nco ntsoov nws nyob qhov twg vim tias peb yuav khaws cov ntaub ntawv rau nws tom qab.

Kauj Ruam 2: Tsim Koj Cov Ntaub Ntawv Thawj

Qhib koj cov ntawv nyeem uas koj nyiam. Hauv kuv qhov xwm txheej kuv yuav yooj yim siv qhov tsim hauv notepad ntawm Windows 10. Thaum koj muaj cov ntawv tshiab sau hom hauv qab no:

Nov yog kuv thawj nplooj ntawv web, coj tuaj rau koj los ntawm kev qhia paub

Nov yog qhov uas paub tias yog HTML cim npe. Nws sawv rau Lub Npe 1. Cov ntawv peb muab tso rau hauv daim ntawv no yuav tshwm raws li kab lus ntawm nplooj ntawv. Nws tau qhib thiab kaw zoo li no. Cov ntawv nyob nruab nrab ntawm ob lub cim npe yog dab tsi yuav tshwm sim hauv koj lub vev xaib. Feem uas hais tias yog muab cov ntawv ntawd tus yam ntxwv uas peb yuav siv rau hauv qib x. Thaum uas ua tiav mus tom ntej thiab khaws cov ntaub ntawv hauv daim nplaub tshev uas peb tau ua hauv theem 1 raws li index.html.

Kauj ruam 3: Qhib Cov Ntaub Ntawv

Tam sim no peb tau ua tiav kev mus rau cov ntawv hauv daim nplaub tshev peb tsim, nyem rau cov ntawv thiab xaiv qhov "qhib nrog" xaiv thiab xaiv lub vev xaib uas koj siv. Hauv kuv qhov no yog google chrome. Tam sim no saib kev ua haujlwm ntawm koj txoj haujlwm nyuaj txog tam sim no!

Kauj ruam 4: Styling Koj Nplooj Ntawv

Raws li yog, peb lub vev xaib zoo nkauj heev. Peb tab tom yuav ntxiv qhov uas paub tias yog daim ntawv cascading style rau txuj lom yam me ntsis. Tsim cov ntawv sau tshiab thiab ntaus cov hauv qab no:

h1 {xim: xiav; text-align: chaw;}

Dab tsi peb tab tom qhia tus browser ntawm no yog txhawm rau nrhiav ib lub ntsiab lus hauv h1 lossis (uas peb tau kawm txog hauv qib 2) thiab muab nws xim xiav thiab kho nws nyob hauv nruab nrab ntawm nplooj ntawv. Txuag cov ntawv no hauv daim nplaub tshev peb tsim hauv qib 1 raws li style.css.

Kauj ruam 5: Txuas Style.css rau Koj Index.html

Txij ntawm no peb muaj ob daim ntawv cais uas tsis paub txog ib leeg. Peb yuav tsum qhia peb cov ntaub ntawv index.html uas peb muaj cov ntaub ntawv style.css uas peb xav kom nws hais txog thiab khaws qee qhov zoo los ntawm. Txhawm rau ua qhov no peb yuav qhib peb cov ntawv index.html hauv peb cov ntawv sau, thiab saum toj no peb cov ntawv h1 peb yuav ntxiv qhov uas paub tias yog daim ntawv txuas. Qhov txuas txuas tsuas yog raws li nws lub npe cuam tshuam, nws txuas rau qee yam. Nyob rau hauv peb cov ntaub ntawv ib tug styleheet. Mus tom ntej thiab ntaus ntawv. Cov ntawv txuas yog tus lej kaw tus kheej yog li daim ntawv xaus tsis tas yuav tsum muaj. Cov sawv sawv cev rau kev sib raug zoo thiab href yog qhia cov ntaub ntawv ntsuas qhov twg peb cov ntaub ntawv sab nraud peb tau hais txog nyob. Tam sim no khaws cov ntawv index.html.

Kauj Ruam 6: Saib Koj Nplooj Ntawv Tshiab Styled

Rov mus saib kauj ruam 3 thiab rov qhib koj lub vev xaib thiab saib seb qhov kev hloov pauv cuam tshuam li cas.

Kauj Ruam 7: Tsim Khawm

Rov qhib koj cov ntawv index.html hauv koj cov ntawv sau thiab ntaus cov hauv qab no:

Nyem kuv!

thiab khaws cov ntawv. Qhov no tsim lub khawm khawm ntawm nplooj ntawv. Thaum tau txais kev cawmdim, rov qhib cov ntaub ntawv raws li qhia hauv qib 3 thiab xyuas kom lub pob nyob hauv qab sab laug sab tes ntawm koj nplooj ntawv.

Kauj Ruam 8: Tsim Koj Cov Ntaub Ntawv Javascript

Thaum kawg peb yuav tsim peb cov ntaub ntawv javascript. Nov yog qhov uas yuav ua rau peb lub xaib sib tham sib. Qhib tus ntawv sau thiab ntaus cov hauv qab no:

document.querySelector ("#khawm"). addEventListener ("nyem", muaj nuj nqi () {

document.querySelector ("#nqe lus"). innerText = "Hloov nqe lus ntawm ya"

})

Dab tsi peb tab tom ua yog nug cov ntawv kom pom peb lub ntsiab lus nrog tus lej ID, thiab peb yuav muaj lub pob teb rau qhov tshwm sim nyem los ntawm kev hloov cov ntsiab lus nrog tus lej ntawm nqe lus rau "Hloov kab lus ntawm ya ". Txuag cov ntaub ntawv raws li button.js hauv daim nplaub tshev peb tsim hauv Kauj Ruam 1.

Kauj Ruam 9: Txuas Koj Li Javascript thiab Cov Ntaub Ntawv Index

Raws li peb tau ua nrog cov ntawv style.css, peb yuav tsum qhia peb cov ntawv index.html txog peb cov ntaub ntawv javascript. Hauv qab hauv qab txhua yam peb tau ua txog tam sim no ntaus cov hauv qab no:

Cov ntawv sau tso cai rau peb ntxiv cov ntawv sau (hauv peb kis, javascript) los muab kev ua haujlwm rau peb nplooj ntawv. Peb tab tom qhia nws kom nrhiav cov ntaub ntawv hu ua button.js thiab ntxiv txhua tus lej muaj nyob hauv nws rau peb cov ntaub ntawv ntsuas. Thaum koj tau ntaus qhov ntawd, khaws cov ntawv thiab qhib cov ntawv dua raws li qhia hauv qib 3.

Kauj Ruam 10: Kuaj Lub Khawm Tshiab Tsim

Tam sim no mus tom ntej thiab nyem lub pob thiab saib cov lus hloov pauv!

Nrog koj zoo siab !! Tam sim no koj tau tsim koj thawj nplooj ntawv sib tham sib tham! Kuv xav paub ntau ntxiv koj tuaj yeem coj nws paub qhov koj paub tam sim no ??