본문 바로가기

JavaScript228

[Javascript] 버튼클릭으로 팝업창 만들기 안녕하세요 이번시간에는 버튼클릭으로 팝업창을 만들어보겠습니다. *결과 1. getElementsByTagName var height=document.getElementsByTagName("body")[0].scrollHeight; getElementsByTagName()는 특정 태그를 가진 모든 요소를 선택합니다. 선택된 요소는 배열 객체로 반환됩니다. 2. jquery.css( propertyName, value ) $("#lay_pop").css("z-index","555"); .css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가합니다. 예제에서는 #lay_pop 요소에 스타일 속성을 추가하여 설정하였습니다. 3. 달러 기호 $ $("#all_body").css("displa.. 2022. 6. 8.
[Javascript] 스크롤에 따른 웹페이지 배경색 변경하기 안녕하세요 오늘은 스크롤에 따라 웹페이지지 배경 색깔이 변경되는 기능을 만들어 보겠습니다. *결과 1. $(window).scroll(function() { } scoll 함수를 사용하여 화면이 스크롤 될 때 실행되었으면 하는 함수를 괄호 안에 정의합니다. $(window).scroll(function() { } 2. each 함수 .each()는 선택한 요소가 여러 개일 때 각각에 대하여 반복하여 함수를 실행시킵니다. $panel.each(function () { } 3. $this.position().top 이 코드는 부모 요소의 상단 값을 기준으로 this 요소가 위치한 상대적 거리값입니다. if ($this.position().top scroll) { } 4. removeClass 선택한 요소에서.. 2022. 5. 27.
[Javascript] 무지개 터널 효과 만들기 안녕하세요 오늘은 자바스크립트로 무지개 효과를 만들어 보겠습니다. *결과 1. getContext 이 함수는 어떤 도형을 그리고 싶을 때 사용됩니다. 예제에서는 2d 타입의 인자를 받아옵니다. var c = document.getElementById("c"); var ctx = c.getContext("2d"); 2. stroke 이 함수를 사용하면 실질적으로 화면에 그림이 그려집니다. function drawParticle(o){ ctx.fillStyle = "hsla("+o.a+", 90%,60%,"+o.alpha+")"; ctx.strokeStyle = "hsla("+o.a+", 100%,50%,"+o.alpha+")"; ctx.beginPath(); ctx.arc(o.x,o.y, o.r,0,2*M.. 2022. 5. 15.
[Javascript] 공기방울 효과 만들기 안녕하세요 이번시간에는 공기방울 파티클 효과를 만들어 보겠습니다. *결과 1. push함수 배열에 요소를 추가 할 때 사용하는 함수입니다. Cicle 객체를 생성하여 circleArray에 추가하고 maxCount 만큼 만들어냅니다. function createCircle(max) { for (var i = 0; i < max; i++) { var circleObject = new Circle; circleObject.id = i; circleArray.push(circleObject); } //After creation of circle attributes, the animations begin moveCircle(); } *참고 - push 메서드 : 배열의 마지막에 새로운 요소를 추가한 후, 변경된.. 2022. 5. 2.
[Javascript] 알림창 종류알아보기 (Alert , Confirm, Prompt) 알림을 나타내는 스크립트는 Alert , Confirm, Prompt 가 존재합니다. 이번 시간은, Alert , Confirm, Prompt를 알아보겠습니다. alert()은 사용자가 확인 버튼을 누르면 메시지를 표출합니다. 1. HTML 2. JavaScript function bt_OnClick() { alert('alert!'); } confirm()은 사용자에게 확인/취소 중 하나를 선택할 수 있도록 합니다. 각 버튼의 리턴 값이 존재합니다. 1.HTML 2.JavaScript function bt_OnClick() { let text= confirm("confirm?"); document.getElementById('result').innerText = text; } prompt()는 사용자에.. 2022. 4. 30.
[Javascript] Kakao 지도 Javascript API 를 사용해서 지도 표시 및 마커 찍기 안녕하세요 오늘은 카카오 지도 api 를 사용해서 지도를 띄우고 마커를 찍어보겠습니다. https://apis.map.kakao.com/web/guide/ Kakao 지도 API 페이지에 들어가서 안드로이드, 웹, iOS 중 웹을 선택합니다. Kakao 지도 Javscript API 는 키 발급을 받아야 사용할 수 있습니다. 그리고 키를 발급받기 위해서는 카카오 계정이 필요합니다. 카카오 개발자사이트 (https://developers.kakao.com/) 에 접속해서 로그인 또는 회원가입을 합니다. '내 어플리케이션' 메뉴에 들어가서 '애플리케이션 추가하기'를 선택합니다. 앱 아이콘(선택), 앱 이름(필수), 사업자명(필수) 를 설정하고 저장을 누릅니다. 이렇게 어플리케이션이 추가된 것을 확인하실 수.. 2022. 4. 29.
[Javascript] OpenWeather API를 사용하여 현재 날씨 가져오기 const API_KEY = ""; function onGeoOk(position){ const lat = position.coords.latitude; const lng = position.coords.longitude; console.log("You live in", lat, lng); const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`; fetch(url) .then(response => response.json()) .then(data => { const weather = document.querySelector("#weather span:firs.. 2022. 4. 22.
[Javascript] 마우스 이벤트 자바스크립트를 이용하여 마우스 이벤트들이 언제 어떻게 동작하는지 알아보겠습니다. 마우스 이벤트의 종류 mouseover 마우스 포인터를 올렸을 때 입니다. mouseout 마우스 포인터가 떠날 때 mousedown 마우스 누르는 순간 mouseup 마우스 떼는 순간 mousemove 마우스를 움직였을 때 예제를 작성해 보겠습니다. 1. html 2 .css #container { background: green; height: 100px; width: 100px; } 3. js consts container = document.querySelector('.container'); //마우스 진입 이벤트 mouseover container.addEventListener('mouseover',e=>{ cons.. 2022. 4. 18.
[Javascript] 정규식으로 전화번호 형식 확인하기 이번 포스팅에서는 정규식을 활용해 '-'이 있는 전화번호 형식이 맞는지 확인하는 기능을 만들어보겠습니다. 사용할 정규식은 다음과 같습니다. /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/ 아래는 전체 코드입니다. textarea에 전화번호 형식(010-0000-0000)에 맞게 입력하고, 버튼을 누르면 형식에 맞는지 확인해줍니다. 전화번호 입력 형식 확인하기 2022. 4. 13.

티스토리툴바