TIL]자바스크립트 기초

alert

<script>
    function info() {
    $('#input-info').val()
    if($('#input-info').val() == ''){
    alert('입력하세요!');
    } else{
    alert($('#input-info').val());
    }
   }
</script>

위의 코드를 살펴보면 html 코드가 input-info라는 정보가 없지만

간단히 설명하면 해당 빈칸에 아무 정보도 기입되지 않았다면

경고창 "입력하세요!"가 나타나고 정보를 기입한다면

경고창 "입력된 정보"가 나타나게 된다.

위의 코드는 변수명을 따로 지정하지 않았지만 지정이 가능하다.

let info = $('#input-info').val() <- 이런 식으로 지정이 가능하고

변수명을 지정해주었다면 더욱 깔끔한 코딩이 가능하였을 것이다!

앞으로는 코드를 더욱 보기 좋게 만들기 위하여 노력해야겠다!

---

split활용

<script>
    function mail_info() {
    $('#input-mail_dm').val()
    if($('#mail_dm').val().includes('@') == false){
    	alert('이메일이 아닙니다.');
    } else{
    	alert($('#mail_dm').val().split('@')[1].split('.')[0]);
    }
   }

 위의 코드의 결과 값은 만약 내가  tistory@gmail.com 을 입력하게 된다면

경고창 "gmail"이 나올 것이다.

만약 이메일이 아닌 nerd를 입력한다면

경고창 "이메일이 아닙니다."가 나올 것이다.

코드를 살펴본다면 if문에 있는 includes('@')가 @의 포함여부를 판단하여

@가 없다면(false) 이메일이 아닙니다라는 경고창이 나오고

@가 포함되어있는경우(true)

tistory@gmail.com이라면 ->

1. ["tistory", "gmail.com"]
2. ["gmail.com"]
3. ["gmail", "com"]
4. [gmail]

이런 작업을 거치게 된다.

위의 코드도 더욱 보기 좋게 변수명을 지정할 수 있기 때문에

다음부터 코드를 짤 때 누가 봐도 알아볼 수 있는 코드를 짜야겠다!

---

자바스크립트는 아직 익숙하지 않다.

그래서 자잘한 실수와 가시성이 좋은 코딩을 짜는 연습이 필요할 것 같다.

아직 많이 부족하다.

하지만 기초가 튼튼하다면 응용을 할 때에도 분명 도움이 되고

새로운 것을 받아들일 때 이해도도 상승할 것 같다!

더욱 공부에 매진해야겠다!