CLASS/HTLML,CSS,JS

#6-2 / HTML + Javascript(video,input value(로그인))

hingu 2024. 4. 25. 12:37
⚡Video tag
 
<!-- 
    embed,object : 동영상,pdf,doc 
    video : html5 동영상
    audio : html5 동영상

    autoplay : 자동재생(muted와 함께 사용해야만 자동재생)
    muted : 음소거
    crontrols : video

    track태그 : 자막기능 추가 (.vtt 파일 사용)
    srclang : 자막에 대한 각 나라별 언어
--> 
<!-- 영상을 로드하는 태그 -->
<video autoplay muted controls>
    <source src="./videotest1.mp4" type="video/mp4"> 

    <!-- 자막기능 / defaul : 한국어 -->
    <track kind="subtitles" src="" srclang="한국어" default> 
    <track kind="subtitles" src="" srclang="En">
    <track kind="subtitles" src="" srclang="Jp">
</video>
⚡ input + Javascirpt 활용
 
<script>
    function abc(){
    	//document.getElementById('아이디이름') : 현재페이지에서의 아이디명
        // 그 외의 함수 : value, style, readOnly, setattribute, getattribute....등
        var a = document.getElementById('mid');

		/*
        value 속성 : 값을 해당 태그에 미리 입력시킬 때
        onclick 속성으로 javascript 함수를 실행
        */
        if( a.value == "" ){
            alert("아이디를 입력하셔야합니다")
        }else{
            a.readOnly=true; //input readonly 처리
            a.style.backgroundColor = "gray"; //css의 -부분이 대문자가 된다고 생각하쟈~
        }
    }
</script>
<body>
    <input type="text" id="mid" placeholder="아이디를 입력하세요">
    <input type="button" value="클릭" onclick="abc()">
</body>
⚡ 로그인 페이지 활성화
- 유일하게 submit과 reset에 onclick 작성X => submit은 상위 form태그에 onSubmit="return 함수명()"에 작성
- 작동 실패 조건에 return false; 해야 action이 작동하지 않는다
 
<script>
    function login(){
        var id = document.getElementById('mid');
        var pw = document.getElementById('mpw');

        if(id.value == ""){
            alert('아이디를 입력하세욘')
        }else if(pw.value == ""){
            alert('비밀번호를 입력하세욘')
        }else{
            location.href = "http://google.com"
        }
    }

    function member(){
        var aa = document.getElementById('userid');
        var bb = document.getElementById('userpw');

        if(aa.value == ""){
            alert("아이디를 입력하세요~");
            return false; //강제로 해당 코드 실패
        }else if(bb.value == ""){
            alert("패스워드를 입력하세요~")
            return false; //강제로 해당 코드 실패
        }else{ //form 데이터 action,method 활성화
            memberform.submit();
            /*
                document 사용하지 않는 이유
                : form태그의 특징 중 자동으로 id를 입력시 코드를 인식하게 된다
                왜? 브라우저가 걍 그러케 만듬ㅋ
                id지정 안해줘도 댐 
                근데 폼이 여러개가 될 경우 script가 헷갈릴수 있기 때문에 적어주는게 좋다
            */

            // return true; => 이렇게 적어도 됨 1 
            // return; => 이렇게 적어도 됨 2
        }

    }
</script>
<body>
    <!-- button으로 로그인 -->
    아이디 : <input type="text" id="mid"><br>
    패스워드 : <input type="password" id="mpw"><br>
    <input type="button" value="로그인" onclick="login()">

    <br><br><br><br><br><br>


    <!----------------------submit 으로 로그인---------------------------->
    
    <!-- 
        모바일 전용으로 제작할 경우 submit필요 없음 - 어차피 다 터치로 하니까 

        유일하게 submit과 reset에 onclick 작성시 100% 버그납니다..
        -> 상위 form태그에 onSubmit=""에 작성

        return을 활용하여 method와 action을 컨트롤함
        기본적으로 return; 또는 return true; form 이름을 활용한 submit() 사용시 데이터는 전송된다.
    -->

    <!--return member() : member()안에 return false; 등장시 실행되지 않는다.-->
    <form onsubmit="return member()" id="memberform" method="post" action="http://nate.com">
        아이디 : <input type="text" id="userid"><br>
        패스워드 : <input type="password" id="userpw"><br>
        <input type="submit" value="로그인"> <!--여기에 onclick 작성 절대x-->
    </form>

</body>