설 연수
하하호홓
설 연수
전체 방문자
오늘
어제
  • 분류 전체보기 (231)
    • Back-End (2)
      • Java (20)
      • JSP (13)
      • Spring (18)
      • Kotlin (0)
      • node.js (0)
    • Front-End (68)
      • JavaScript (19)
      • jQuery (39)
      • Angular (4)
      • HTML (5)
    • Dev-Ops (12)
      • Linux, Cloud (5)
      • docker, k8s (5)
      • ElasticSeach (2)
    • Other (33)
      • OOP (3)
      • 알고리즘 (2)
      • DB (12)
      • Git (1)
      • Swift (4)
    • Backup (65)

블로그 메뉴

    공지사항

    인기 글

    태그

    • angular callback
    • 404 error
    • 크로스도메인
    • RESTful
    • docker
    • CORS
    • Redis
    • INVALID
    • Angular
    • 패스트캠퍼스
    • angular2
    • mongodb
    • angular4
    • angular 콜백
    • Kafka
    • jquery invalid
    • flex
    • MYSQL
    • jOOQ
    • page not found

    최근 댓글

    최근 글

    티스토리

    hELLO · Designed By 정상우.
    설 연수

    하하호홓

    Front-End/JavaScript

    기초

    2012. 2. 20. 11:21
    자바스크립트
    변수선언 - var 변수명=초기값; 
    상수선언 - const 변수명=값;

    문자를 숫자로변환
    문자->정수 - parseInt("12");
    문자->실수 - parseFloat("12.34");

    데이터 잡아내기
    document.getElementById("ID명");
    document.getElementById("ID명").value;  // focus...
    클라이언트 높이,길이값받기
    document.body.clientWidth
    document.body.clientHeight
    이미지 넓이,높이변경
    <img id="rockImg" src="rock.png">
    document.getElementById("rockImg").style.height 높이값 접근
    document.getElementById("rockImg").style.width="100px";
    document.getElementById("rockImg").style.height = (document.body.clientHeight-100)*0.9;
    (하지만 브라우저크기가 변해도 이미지크기는 변하지않음. 로드될때 이미 정해짐, onResize사용해야함)

    폼데이터 접근
    폼이름["필드이름"].value;
    document.폼이름.필드이름.value;
    document.폼이름.필드이름.value.length;
    팝업메세지
    alert("메세지"+변수);

    **이벤트
    onLoad="" - 페이지를 열때 로딩
    onClick="" - 클릭햇을때
    onResize="" - 브라우저 크기바꿀때
    onBlur="" - 벗어날때 (데이터검증)
    onChange="" - 값이 바꼇을때
    onFocus="" - 선택됫을때

    isNaN(체크할값); - 값이 숫자인지 아닌지 체크
    숫자일경우 false, 숫자가 아닐경우 true

    setTimeout(타이머코드,타이머시간); 
    타이머시간 600,000일경우, 600,000밀리세컨드 = 600초 = 10분
    Refresh() - 그냥 캐쉬에 저장되었던 지난 내용을 다시 보여줌
    Reload() - 서버에 다시 접속하여 새로운 내용을 다시 보여줌.



    조건문
    if(조건){
    ~~~;
    }else if(조건){
    ~~~;
    }else{
    ~~~;
    }

    switch(변수){
    case:조건
    ~~~~~;
    break;
    }
    반복문
    for(초기화;조건;증감){
    }

    while(조건){
    }


    함수
    function 함수명(){
    //return 리턴할값;
    }


    alert없이 데이터 검증하기
    <input id="phone" name="phone" type="text" size="12" onblur="validateNonEmpty(this,document.getElementById('phone_help'));"/>
    <span id="phone_help" class="help"></span>

    function validateNonEmpty(inputField, helpText){
    //입력값에 택스트가 포함되어있는지 먼저 체크한다.
    if(inputField.value.length==0){
    if(helpText != null)    //데이터에 문제가 있으면 도움말메세지를 설정
    helpText.innerHTML = "Please enter a value.";//메세지
    return false;
    }
    }else{
    //데이터가 이상없으면 도움말 메세지를 지움
    if(helpText != null)
    helpText.innerHTML = "";
    return true;
    }
    }

    'Front-End > JavaScript' 카테고리의 다른 글

    앞,뒤 공백제거하기(trim)  (0) 2012.02.28
    AJAX request생성 & 기본 프로퍼티,메소드  (0) 2012.02.27
    정규식 & 수량한정자 & 패턴 정량화  (0) 2012.02.20
    alert없이 데이터 검증하기(innerHTML)  (0) 2012.02.20
    쿠키  (0) 2012.02.20
      'Front-End/JavaScript' 카테고리의 다른 글
      • AJAX request생성 & 기본 프로퍼티,메소드
      • 정규식 & 수량한정자 & 패턴 정량화
      • alert없이 데이터 검증하기(innerHTML)
      • 쿠키
      설 연수
      설 연수

      티스토리툴바