자바스크립트 썸네일형 리스트형 javascript 프롬프트 대화 상자 보이기(prompt) 자바스크립트를 이용한 대화 상자 3종 셋트의 마지막인 프롬프트 대화상자 기능입니다.프롬프트 대화상자란 alert창의 기능에서 사용자로부터 입력을 받을 수 있는 팝업을 띄울 수 있는 기능입니다.사용자는 입력할 내용을 작성하고 클릭하면 스크립트의 변수로 값을 리턴 받을 수 있습니다.사용되는 메서드명이 prompt입니다.dos시절에 컴퓨터를 사용해보신 분들께는 익숙한 단어인 프롬프트는 콘솔창에서 껌뻑껌뻑이는 녀석을 말합니다. 프롬프트 대화상자에도 확인 및 취소 버튼이 존재하고 확인 버튼을 클릭 시 입력 된 값을 반환하고, 취소를 클릭 시 null을 반환하는 구조입니다. 다음은 프롬프트 대화 상자의 간단한 사용 예제입니다. 버튼을 클릭해보세요 더보기 javascript 확인 대화 상자 보이기(confirm) 지난 썰에서 살펴본 alert은 사용자에게 경고창을 띄어주는 기능이었다.이번에 알아볼 confirm창은 사용자에게 확인 및 취소라는 두 가지 버튼을 제공하여 사용자에게 동의 및 거절이라는 확인을 얻을 때 사용할 수 있는 대화창입니다. alert창과 마찬가지로 브라우저마다 모양이 다르기 때문에 css를 이용해서 모양을 꾸며주거나 bootstrap을 활용하면 조금 더 멋진 대화창을 만들 수 있습니다. confirm 대화창에는 [확인], [취소]라는 버튼이 같이 생성이 되는데 [확인]버튼을 클릭하면 참(true)이 반환되고, [취소]를 클릭하면 거짓(false)가 반환이 되는 구조입니다. 기존의 전통적인 웹의 구현에서는 확인이 왼쪽, 취소를 오른쪽에 구현했었습니다.안드로이드를 접하신 분이나 스마트폰 사용자분들.. 더보기 javascript 경고 대화 상자 보이기(alert) Javascript의 대화 상자 중 사용자에게 경고창을 띄어주는 기능을 alert이라고 한다. javascript에서 가장 많이 사용되는 기능이 아닐까 싶을 정도로 자주 이용하는 기능이다. browser별로 모양이 다르게 보이기 때문에 css를 이용해서 모양을 바꿔주거나 bootstrap을 이용해서 좀 더 멋진 경고창을 보여줄 수도 있다. alert창은 주로 사용자에게 경고 메시지를 띄울 때 사용되는데 예를 들어서 입력 필드(input type="text")에서 사용자가 값을 입력해야하지만 입력하지 않고 전송 버튼을 눌렀다던가 email을 작성해야하는 부분에 email형식이 아닌 다른 형식을 작성했을 떄 사용자에게 경고창을 띄어서 메시지를 보여줄 수 있는 창이다. 다음은 alert의 간단한 예제 코드이다.. 더보기 Object의 모든 속성(Attribute)값 출력하기 썰 javascript에서 말하는 Object는 javascript 자체이며 속성 또는 메서드라고 하는 명명 된 값의 컨테이너이다.JavaScript objects are containers for named values called properties or methods. Object안에 담겨있는 모든 속성을 출력해보고 싶을 때 사용할 수 있는 예제코드이다. 1) iframe에서 http://www.naver.com을 Load한다. 2) Load가 완료되면 자기 자신을 인자로 하여 showAttribute() 함수를 호출한다. 3) 다음의 메서드(showAttribute 함수에서는 전달된 object의 모든 attribute에 대해서 name, value, type을 작성한 뒤 TextArea에 출력한다... 더보기 자바스크립트썰 blur blur란 흐림이라는 뜻을 가진 영어 단어로 자바스크립트에서는 엘리멘트가 포커스를 잃어버렸을 때 발생하는 이벤트이다. 한마디로 선택되었다가 떠나면 그 시점에서 발생하는 이벤트로 focusout이라는 이벤트와 동일한데 둘의 차이점은 용어도 어려운 버블링이 발생하는가의 차이를 가진다. (버블링의 개념을 더 알고 싶으신 분들은 구글링을 해보시면 좋습니다.) Enter your name: When you leave the input field, a function is triggered which transforms the input text to upper case. 입력 필드를 떠날 때 입력 텍스트를 대문자로 변환하는 함수가 트리거됩니다.입력 필드를 떠날 때 입력 텍스트를 대문자로 변환하는 함수가 트리거됩니.. 더보기 자바스크립트 변수를 활용한 카운팅 썰 페이지 내에서 버튼 클릭 시 마다 변수를 1씩 증가시키는 예제 버튼 카운팅 예제 버튼을 누를때마다 카운팅됩니다. 버튼클릭 코드는 다음과 같습니다. - 페이지 내에서 카운팅에 사용할 변수를 하나 선언해주고 - 버튼이 클릭될 때마다 이 변수의 값을 1씩 증가시켜줍니다. - 응용하면 빼는 것도 가능하겠죠? var overlap_cnt = 0; //페이지 변수 설정 function setCnt() { overlap_cnt++; document.getElementById("cnt_result").innerHTML = overlap_cnt; } 버튼 카운팅 예제 버튼을 누를때마다 카운팅됩니다. 버튼클릭 더보기 제이쿼리 유용한 셀렉터 썰~ 이 포스팅은 쓰다가 유용한 셀렉터가 있으면 계속 추가가 되는 진화되는 포스팅입니다. 1. jQuery로 선택된 값 읽기 $("#selectBox option:selected").val(); $("select[name=name]").val(); 2. jQuery로 선택된 내용 읽기 $("#selectBox option:selected").text(); 3. 선택된 위치 var index = $("#test option").index($("#test option:selected")); 4. Addoptions to the end of a select $("#selectBox").append("Apples"); $("#selectBox").append("After Apples"); 5. Addoptions t.. 더보기 이전 1 다음
