[Basic] JS - Intro (JS소개)

목차 (= JS 역할)

1. HTML 문서 내용 변경
2. HTML 문서의 HTML 속성 변경
3. HTML 문서의 CSS 스타일 속성 변경
4. HTML 문서 폼 양식의 유효성 검사

HTML 문서 내용 변경

[예제] - 현재 보여지는 문서 내용과 다른 문서 내용 출력

 <script>

function homzzang() {

    document.getElementById("hz").innerHTML = "변경 후 문서 내용";

}

</script>

<p id="hz">변경 전 문서 내용</p>

<button type="button" onclick="homzzang()">클릭</button>

결과보기

HTML 문서의 HTML 속성 변경

[예제] -  클릭 시, 이미지 주소 변경해 이미지 교체

<img id="homzzang" onclick="changeImage()" src="변경 전 이미지 주소">

<script>

function changeImage() {

    var image = document.getElementById('homzzang');

    if (image.src.match("bulbon")) {

        image.src = "변경 전 이미지 주소";

    } else {

        image.src = "변경 후 이미지 주소";

    }

}

</script>

HTML 문서의 CSS 스타일 속성 변경

[예제] - 현재 보여지는 문서 내용의 css 스타일을 변경

<p id="homzzang">
    홈짱닷컴 (homzzang.com) - HTML CSS JavaScript JQuery PHP SQL 무료 학습
</p>

<script>

function hz() {

    var x = document.getElementById("homzzang");

    x.style.fontSize = "25px";           

    x.style.color = "red"; 
    x.style.background = "yellow";

}

</script>

<button type="button" onclick="hz()">클릭하면 스타일이 바뀌지롱.</button>

결과 보기

HTML 문서 폼 양식의 유효성 검사

[예제] - 숫자만 입력 경우에 숫자면 OK, 숫자 아니면 에러 메세지 출력

<p>1~10사이 숫자만 유효</p>

<input id="numb" type="number">

<button type="button" onclick="hz()">확인</button>

<p id="homzzang"></p>

<script>

function hz() {

    var x, text;

    // id="numb" 인 곳의 값을 변수 x에 할당

    x = document.getElementById("numb").value;

    // x가 숫자가 아니거나 1보다 작거나 10보다 크다면

    if (isNaN(x) || x < 1 || x > 10) {

        text = "Input 유효 X";

    } else {

        text = "Input 유효 O";

    }

    document.getElementById("homzzang").innerHTML = text;

}

</script>

결과 보기

 

mdn script 강의

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

 

엘리 님 (async・defer 속성 강의)

https://youtu.be/tJieVCgGzhs