JS๋ก ํ ์คํธ ๊ฐ์ ๋ฐ๊พธ๋ 2๊ฐ์ง ๋ฐฉ๋ฒ
HTMLํ์ผ์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฐ๊ฒฐํ๊ธฐ (inline/script)
html์ js ํ์ผ์ ์ฐ๊ฒฐํ๋ ๋ค ๊ฐ์ง ๋ฐฉ๋ฒ(async, defer)
cs html๋ฌธ์๊ฐ ๋ก๋๋๋ ์์ ์ ์คํ๋๋ ํจ์์ ๋๋ค ๋ชจ๋ ์๋ฆฌ๋จผํธ๋ค์ ๋ถ๋ฌ์ต๋๋ค Array.
getElementById 'hw' ; hw.
.
2 inline์ Script์ฐ๊ฒฐํ๊ธฐ getElementById, addEventListener onclick์ ์ฌ์ฉํ์ง ์๊ณ script๋ฅผ ๋ฃ๋๋ค๋ฉด ๋ค์๊ณผ ๊ฐ์ด ์ธ ์ ์๋ค.
.
์๋ฅผ ๋ค์ด ์ผ๋ก ์ธ์๋ ๋ก ์ธ์๋ ์์ผ๋๊น ๊ทธ๋ฐ๊ฒ ๊ฐ์ต๋๋ค ๐ฅ ๋ง๋ฌด๋ฆฌ ์ด๋ ๊ฒ ์๋ฐ์คํฌ๋ฆฝํธ AJAX๋ก html ๋ ธ๊ฐ๋ค ์์ ์์ ์ ์ข ์ค์ผ ์ ์๊ฒ๋์์ต๋๋ค! 4 Script for Head window.
๊ฐ๋จํ ์์๋ก ์๋์ ๊ฐ์ด html ํ์ผ์ ์์ฑํ๊ณ ๋ฒํผ์ ๋ง๋ค์ด์ฃผ์๋ค.
๊ฒ์ ์์ง์ ๋ฑ๋ก์ ํ๋ ์์ ๋ฟ๋ง ์๋๋ผ ๋ฉ๋ด์ฉ, ์ฝํ ์ธ ์ฉ ํ์ด์ง๋ค๊น์ง ํจ๊ป ํฌ๋กค๋ง์ด ๋๋๋ฐ, ๊ฒฝ๋ก๋ก ๋ค์ด๊ฐ๋ฉด ํ๋ ์์ ๋ฃ์ด์ ํ์ํ๋๋ก ๋ง๋ ํ์ด์ง๋ง ๋จ๊ฒ๋ฉ๋๋ค.
getElementById 'hw' ; hw.
์ฌ์ค ์ฝ๋ฉ ํ ์คํธ๋ผ๊ณ ํ๊ธฐ์ ์ข ์ฌ์ด ๋ฌธ์ ์๋๋ฐ, ๊ธด์ฅ์ ํด์์ธ์ง ์ด๊ฒ์กฐ์ฐจ ๋ชปํ๊ณ ์จ๊ฒ ์ฐ์ฐํด์ ์ ๋ฆฌํด๋ณธ๋ค.
์ด๊ฒ ๋ฒํผ! ๊ทธ๋์ js ํ์ผ์ ์ฐ๊ฒฐํ DOM์ด๋ ๋ค๋ฅธ ์คํฌ๋ฆฝํธ์์ ์ฐ๊ด ์์กด์ฑ์ด ์๊ณ , ์คํ๋๋ ์์๊ฐ ์๊ด์๋ ๊ฒฝ์ฐ์๋ async ์์ฑ์ ์ฌ์ฉํฉ๋๋ค.
๋ฒํผ์ ๋๋ฅด๋ฉด Hello world๋ฅผ ์ธ์น๋ค.