본문 바로가기

JavaScript

 (26)
JavaScript canvas 함수 Javascript canvas 란? canvas를 사용하여 자바스크립트와 html 을 사용하여 그래픽을 그릴 수 있다. html 에서 canvas 태그를 사용하여 작성하고 javascript로 인터페이스를 그려서 조작할 수 있다. canvas 요소 사용하기 canvas 요소 활용해 보기 1. html 영역에 canvas 요소 생성한다. //canvas 요소의 참조값 const canvas=document.querySelector("#myCanvas"); // canvas 에 그림을 그릴 도구 (context) 객체 얻어내기 const context = canvas.getContext("2d"); 2. javascript 영역에 canvas 요소의 참조값을 지정하고 그림을 그릴 도구(context) 객체..
JavaScript setInterval, setTimeout 함수 JavaScript setInterval 함수란? 어떤 코드를 주기적으로 업데이트하거나 주기적으로 데이터를 받아야될때 사용한다. ex) setInterval( ()=>{console.log("1초 마다 반복실행됨")}, 1000); JavaScript setTimeout 함수란? 어떤 코드를 일정 시간 기다린 후 실행해야하는 경우에 사용한다. ex) setTimeout( ()=>{console.log("1초 후에 실행됨")}, 1000); setInterval 함수 활용 예제) 스탑워치 만들어보기 0: 0: 0 시작 재설정 기록 let min=0, sec=0, mSec=0; let isStarted = false; // 시작 버튼을 눌렀을때 실행되는 코드 document.querySelector("#st..
JavaScript map 함수 Javascript map 함수란? 배열의 값에다가 맵핑된 새로운 배열을 얻어낼때 사용한다. map 함수 사용법 let names = ["김구라", "해골", "원숭이"]; names.map((매개변수)=>{ return 매개변수 + 변경하고싶은 값; }); 매개변수가 하나인 경우 ( ) 소괄호 생략 가능하다. names.map(매개변수=>변경할값); 활용 예제) 배열 객체의 활용 배열의 .map() 함수를 이용해서 맵핑(하나하나 작업)된 새로운 배열 얻어내기 let names = ["김구라", "해골", "원숭이"]; // 배열의 map() 함수 호출하면서 화살표 함수 전달하기 let result = names.map((item)=>{ return item+"님"; }); // 매개변수가 하나인 경우 ..
JavaScript filter 함수 Javascript filter 함수란? 여러가지 데이터 중에서 원하는 데이터만 뽑고싶을때 사용한다. 어떤 데이터 집합에서 특정 조건을 만족하는 데이터만 뽑아낼수 있다. filter 사용법 1) let nums = [-10, 20, -15, 5, 30]; nums.filter((매개변수)=>{ return 매개변수 조건 }); 2) let nums = [-10, 20, -15, 5, 30]; nums.filter((매개변수)=>매개변수 조건); 활용 예제) 배열 객체의 활용 배열의 .filter() 함수를 이용해서 필터링된 새로운 배열 얻어내기 let nums = [-10, 20, -15, 5, 30]; // 배열의 filter 함수를 호출하면서 화살표 함수 전달하기 let result=nums.filt..
JavaScript EventListener EventListener 란? 동적인 웹 애플리케이션을 구동하기위해 사용되며 DOM에서 특정 이벤트가 발생되면 해당 이벤트 처리 함수를 추가할 수 있는 object 이다. 이벤트 리스너를 이용하여 특정 DOM에 javascript 이벤트가 발생할 때 특정 함수를 호출한다. EventListener 사용방법 DOM객체.addEventListener(이벤트명, 함수명) 전송2 // id 가 sendBtn 인 요소에 "click" 이벤트가 일어나면 호출될 callback 함수 document.querySelector("#sendBtn").addEventListener("click", ()=>{ alert("전송합니다"); }); sendBtn 의 id를 가진 객체가 클릭될때마다 alert 메세지로 "전송합니다..
JavaScript 조건문(if) 실습 예제 JavaScript 의 조건문은 조건식이 참일 경우 코드가 실행됩니다. if else 조건문은 조건식이 참/거짓일 경우 각각 실행코드를 설정할 수 있습니다. JavaScript if 조건문 자바스크립트 if 조건문은 if (조건식) 영역이 true이면 { } 영역의 코드를 1회 실행합니다. if (조건식) 영역이 false 이면 if 문을 탈출합니다. if (조건문) { 실행문 // 조건식이 참일경우에 실행 }; 활용 예제 ) 확인 버튼을 눌렀을 경우 p 요소에 "당신은 남성이군요" 를 출력하고 취소 버튼을 눌렀을 경우 p 요소에 "당신은 여성이군요" 를 출력시키기 let isMan=confirm("당신이 남성이면 확인을 누르고 여성이면 취소를 누르세요") // 만일 남성이면 위의 p 요소에 "당신은 남..
JavaScript 반복문(for) 실습 예제 for 문 for 문은 자체적으로 초기식, 표현식, 증감식을 포함하고 있는 반복문 입니다. 기본 형식 for (let i=0; i바꾸기 - p 열의 텍스트 내용 let change=()=>{ for(let i=0; i출력하기 - html 영역 let names=["김구라", "해골", "원숭이", "주뎅이", "덩어리"]; let print=()=> { for (let i=0; i출력하기 - html 영역 let nums=[10, 20, 30, 40, 50, 60]; let print=()=>{ nums.forEach(function(item, index) { document.querySelectorAll("p")[index].innerText = item }); } - 스크립트 영역 "출력하기" 버튼을..
JavaScript Document querySelector querySelector를 사용하면 javascript의 document 객체를 활용하여 html의 요소를 선택할 수 있다. querySelector(선택자) 해당 선택자로 요소를 선택함 HTML의 요소를 선택할 때 사용 Id, name, class, html 태그 등 다양한 요소를 선택 가능하다. 이름이 같으면 최상단 요소를 선택한다. 요소를 선택하여 value를 변경하거나 style을 변경하는 등 다양한 동작들을 수행할 때 사용한다. 1. h1요소의 innerText 를 특정 버튼을 눌렀을때 바꾸고 싶은 경우 document object 사용해 보기 영역 let change = function(){ document.querySelector("h1").innerText = "수정수정" }; 사용 예시)..

티스토리툴바