Nerd
Nerd
Nerd
전체 방문자
오늘
어제
  • 분류 전체보기 (439)
    • Today I Learned (333)
    • 주간회고 (8)
    • FrontEnd (5)
    • ErrorNote (7)
    • 자바스크립트 (24)
    • 알고리즘 (13)
    • html과 css (21)
    • 토이프로젝트 (5)
    • React-Native (1)
    • React (13)
    • node (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 메타인지
  • 토이프로젝트
  • 코드숨
  • 리액트
  • 토이 프로젝트
  • pacakge.json
  • 주간회고
  • 자바스크립트
  • Redux
  • 선언적 프로그래밍
  • TIL
  • package-lcok.json
  • 절차지향적 프로그래밍
  • 파이썬 기초
  • 모던 자바스크립트
  • 에러노트
  • 값의 할당 및 재할당
  • npm i
  • 리덕스 툴킷
  • Today I Learned
  • React
  • 리액트 훅
  • wil
  • npm ci
  • 데이터 타입
  • 3FS
  • ErrorNote
  • 파이썬기초
  • 명령적 프로그래밍
  • JSX

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Nerd

Nerd

html과 css

TIL]자바스크립트 기초

2021. 4. 13. 17:39

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]

이런 작업을 거치게 된다.

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

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


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

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

아직 많이 부족하다.

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

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

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

'html과 css' 카테고리의 다른 글

TIL] innerHTML  (0) 2021.04.21
TIL] Math  (0) 2021.04.20
TIL] ajax와 api활용하기  (0) 2021.04.14
TIL]html 및 자바스크립트 기초  (0) 2021.04.12
TIL] html 기초 및 css  (0) 2021.04.10
    'html과 css' 카테고리의 다른 글
    • TIL] Math
    • TIL] ajax와 api활용하기
    • TIL]html 및 자바스크립트 기초
    • TIL] html 기초 및 css
    Nerd
    Nerd
    꾸준히 열심히 지속적으로 하겠습니다!

    티스토리툴바