코딩애플 JavaScript 입문과 웹 UI개발 Lv1(b)

 

전송 버튼은 type="submit"
일반 버튼 type="button"

form 쓰는 이유 : 서버로 유저정보 전송하려고 쓰는 것임
전송하려면 form action="url" 을 써주면 된다.

success.html 파일 만들기. 
form action="success.html" 

<script> 전송버튼 누를 때 input에 입력 없으면 alelrt 창 띄우기 </script>

if (조건) {
  실행할 코드 console.log('hi')
} else { }

form 전송시 submit 이벤트도 작성함 그래서 onclick 말고
폼태그를 찾고 
$('form').on('submit', function(){ 이렇게 작성해도 그 전과 똑같음

*나의 오류 : input의 값을 가져와야 하는데 그저 input태그를 가져옴!

jqeury input값 : $(' a ').val() 
오잉.. 여전한
<해결> null 대신 ' '

$('#subBtn').on('click',function(){
     if($('#firstBox').val()==' '){
     alert('아이디를 입력하세요.');

 

폼 전송 막으려면
function(e) {
e.preventDefault( ) 
위의 경우 alert와 함께 적어주고 중괄호 닫으면 되는 부분이다.
** function 파라미터에 e 넣어줘야한다.

if ( ) { } else if ( ) { }

input에서만 발생하는 특별한 이벤트 2
 'click' 자리에 
'input' : 유저 입력한 값이 변할 때 실행됨 = 'change'
차이점은 change는 커서를 다른데 한 번 눌렀을 때 변화를 확인하고 실행된다.
input값이 바뀌고 focus를 잃을 때 작동되는 event다. change는!

엄격한 비교 === (왼쪽과 오른쪽이 타입까지 같아야 같다.) !==
느슨한 비교 ==
ex) 1 =='1' true / 1 === '1' false

&& || and or

실력향상 과제 가보자구!

function 삼육구게임(a){
 if(a%3==0){
   print('봑쑤!')
   }else{ print('통과')}
}

function 업글-삼육구게임(a){
 if(a%9==0){
   print('봑쑤!*2')
   }else if(a%3==0){print('봑쑤!')}else{print('통과')}
}

- 함수 이름 작명시 맨 처음 단어는 숫자를 사용하면 안된다.

function 합격여부(a,b) {
	if(a,b>=40 && a+b>=120){
      print('합격'); 
    }else if(a,b>100 || a,b<0){print('don't kidding')}else{print('불합격')}
}

졍답
function 합격했냐(a, b){
  if ( a < 40 || b < 40 ) {
    console.log('불합격')
  } else if (a + b >= 120) {
    console.log('합격')
  } else {
    console.log('불합격')
  }
}

function 응용369(a){
  if(a[a.length-1]=3 || a[a.length-1]=6 || a[a.length-1]=9){
    print('박수')
  }
}

var 변수명 = 넣을자료 ;

1. 길고 복잡한 자료들 저장하고 싶을 때
2. 특정 값 기억하게 만들고 싶을 때 

var 변수 = document.getElemenetById() 도 가능

var count=0;
$('.badge).on('click', function(){
  count+=1; //count++;
})

오늘의 숙제 :

다크모드 버튼 눌렀을 때 

버튼 누른 횟수가 홀수면 버튼 내부 글자를 Light로 변경해주세요~

버튼 누른 횟수가 짝수면 버튼 내부 글자를 Dark로 변경해주세요~

라고 코드짜오면 됩니다.  

 var count =0;

        $('.badge').on('click', function(){
            count++;
            if(count%2==1){
                $('.badge').html('Light 🔄');
            }else{$('.badge').html('Dark 🔄');}
        })

진짜 다크모드는 클래스 미리 만들어 놓으면 된다. 누르면 다크클래스 추가로 만들면 된다. 

변수 선언, 할당, 범위
선언 : 변수 만들겠습니다. ( 자료형을 알려줘서 공간 확보라고 이해했던 기억이 있다. )
할당 : 변수에 자료 넣기 

var
let : 재선언 불가능 에러남. 실수 방지
const : 재선언 불가능. 재할당 불가능. 상수

아래는 풀지 못한 부분. js로는 2번째와 같이 쓸 수 있는데, jquery로 쓸땐 어떻게 해야하나?

}else if($('secondBox').val().length<6){
            alert('비밀번호를 여섯자리이상입력하세요.');
            e.preventDefault();

}else if(document.querySelector('#secondBox').value.length<6){
            alert('비밀번호를 여섯자리이상입력하세요.');
            e.preventDefault();