본문 바로가기

COA Lab's JS

자바스크립트 22 - for 정리 자바스크립트에서는 여러가지 형태의 for문이 있다. 1. 일반적 for문 : 일반적으로 가장 많이 사용한는 for문의 형태 for(let i=0; i 더보기
자바스크립트 21 - class 관련 정리 className : 특정 엘리먼트의 클래스 속성값을 가져오거나 설정하기 위한 속성 clasList : className 을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 방법 clasList.add(class) : 엘리먼트에 클래스 속성값을 추가하기 위한 메서드 clasList.remove(class) : 엘리먼트에 클래스 속성값을 제거하기 위한 메서드 clasList.toggle(class, true|false) : 엘리먼트에 클래스 속성값을 추가/제거하기 위한 메서드 let elem = document.querySelector('#item'); if(elem.className ==='on'){ elem.className = 'off'; }else{ elem.className ='on'; }.. 더보기
자바스크립트 20 - 데이터유효성검사 3 함수를 만들어 dom요소에 이벤트를 인라인 방식으로 연결 각 하수에서는 이름, 연락처, 메일을 확인하고 정규표현식에 테그트하여 결과값을 보=여준다. function submitCheck(mform){ let reg1 = /^[가-힣]{2,5}$/; let reg2 = /^(010|070|02|031|011)\d{3,4}\d{4}$/; let reg3 = /^\w{5,12}@[a-z]{2,10}[\.][a-z]{2,3}[\.]?[a-z]{0,2}$/; let name = mform.name; let tel = mform.tel; let mail = mform.mail; if(!(reg1.test(name.value))){ alert('이름을 확인하세요'); name.value = ''; name.focus.. 더보기
자바스크립트 19 - 데이터유효성검사 2 정규표현식 만들고, 적용하기 let reg1 = /^[가-힣]{2,5}$/; let name = prompt('이름을 입력하세요', ''); while(true){ if(reg1.test(name)) break; alert('이름을 다시 확인하세요'); name = prompt('이름을 입력하세요', ''); } let reg2 = /^(010|070|02|031|011)\d{3,4}\d{4}$/; let phone = prompt('연락처를 입력하세요',''); while(true){ if(reg2.test(phone)) break; alert('연락처를 다시 입력하세요'); phone = prompt('연락처를 입력하세요',''); } // admin@naver.com // admin@daum.net.. 더보기
자바스크립트 18 - 데이터유효성검사 1 1. 이름 입력값없으면 : '이름을 입력하세요' 2. 비번 입력값없으면 : '비번을 입력하세요' 3. 비번과 비번확인 값이 다르면 : '비번을 확인하세요' 4. 비번과 비번확인 값이 같으면 : '이름님 환영합니다' window.onload = function(){ let mform = document.querySelector('#mform'); mform.onsubmit = function(){ let name =document.querySelector('#name').value; let pass =document.querySelector('#pass').value; let passCheck =document.querySelector('#pass-check').value; if(name == ""){ a.. 더보기
자바스크립트 17 - 객체 추가 아래 메서드는 요소를 만드는 메서드이다. createElement() => 새로운 요소를 만든다. appendChild() => 요소를 end tag 바로 앞에 추가한다 . append() let param = document.querySelector('p'); let span = document.createElement('span');//요소를 만든다. span.innerText = "실행"; let timer = setInterval(function(){ // param.innerHTML='실행'; param.appendChild(span);//요소를 추가한다. console.log('실행'); },1000); let btn1 = document.querySelector('#btn1'); let bt.. 더보기
자바스크립트 16 - 객체와 이벤트 연결하는 방법 4가지 이벤트 연결방식에는 크게 아래와 같이 4가지로 분류 해서 정리 할 수 있다. 1. 인라인이벤트모델 : 태그요소에 바로 연결하는 방법 2. 기본이벤트모델 : 객체.onclick = function{} 3. IE이벤트모델 : 객체.atttchEvent('onclick', function(){}); 4. 표준이벤트모델 : 객체.addEventListener('click', function(){}); 현재, 기본이나 표준 방식으로 두로 사용하고 있다. 아래는 이미지 태그의 이벤트의 종류(mousenter, mouseout)에 따라 src속성을 변경하는 코드이다. let img = document.querySelector('#imgChange'); img.onmouseenter = function(){ //이미지.. 더보기
자바스크립트 15 - 주기함수로 시간 호출 setInterval(실행함수, 시간) 을 활용해 주기적으로 실행문을 실행하게 만들 수 있다. 내장객체 Date()를 사용하여, 1초에 한번씩, 시간정보를 갱신할 수 있다. window.onload = function(){ setInterval(function(){ let tdate = new Date(); document.querySelector('#clock').innerHTML = tdate; }, 1000); } 더보기
자바스크립트 14 - 객체 조작하기 BOM()객체 연습 1. window.open() : 새창 열기 첫번째 인자 : 주소값, 두번째 인자 : 새창 이름 세번째 인자 : 크기, 위치 등 기타 정보 window.open('https://www.naver.com/','pop1','width=450, height=550'); 2. 새창을 열고, screen 객체의 width, height 정보를 담아, 새창의 size를 재지정하고, 위치를 이동시킬 수 있다 screen.width : 화면의 가로크기값을 반환 screen.height : 화면의 세로크기값을 반환 moveTop(0,0) : 새창의 위치를 지정 resizeBy(w,h) : width, height를 재지정할 수 있다. let child = window.open('','','width=.. 더보기
자바스크립트 13 - 게임 : 조건문으로 묵찌빠 맞추기 vs 대결하기 조건문의 종류에는 switch와 if문이 있다. 미션 1. 컴이 무엇을 냈는지 맞추기 미션 2. 컴과 묵찌빠 대결하기 [미션1] 1. 나 => 컴이 무엇을 냈는지 알아맞추세요. 가위바위보 중에서 입력 prompt() 2. 컴 => 난수로 가위바위보 중에서 ???출력 3. 컴==나 => 같다 || 같지않다 4. 컴이 낸 것을 이미지로 출력 5. switch문, if문 document.write('묵찌빠 맞추기'); let choice = prompt('컴은 묵찌빠 중에서 무엇을 냈을까요?', ''); let num; switch(choice){ case "묵": num =1; break; case "찌": num =2; break; case "빠": num =3; break; default : alert(.. 더보기
자바스크립트 12 - 내장객체 Date(), Math() 1. 내장객체 Date()는 년월일시분초 의 정보를 가지고 있는 개체이다. 이 날자와 시간정보를 가지고 있는 Date()객체는 문서에서 사용하려면, new 키워드로 생성 한 후, 사용할 수 있다. 아래 코드는 Date()객체를 생성하여 today 변수에 담아두고, 이 today변수에 담긴 날자와 시간정보를 불러오는 방법이다. [Tip] 1. getMonth() : 월 정보는 0~11까지이므로 반환되는 값에 1을 더해줘야, 현재 월 정보를 가져올 수 있다. 2. getDay() : 요일정보는 0~6까지 일요일부터 토요일이 나오게 된다. 3. getTime() : 1970.1.1 부터 경과한 시간을 밀리초 단위로 반환해 준다 . 4. 참고 : Math.round() 는 반올림하는 math객체이다. let t.. 더보기
자바스크립트 11 - 내장객체 : Date, Math, Array 내장객체 종류 확인~! //Date 객체 document.write('날자와 시간정보'); var today = new Date(); var nowMonth = today.getMonth()+1; //현재 월(0~11 +1) var nowDate = today.getDate(); //현재 일 var nowDay = today.getDay(); //현재 요일(0:일요일 ~ 6:토요일) var nowHours = today.getHours(); //현재 시간 var nowMinutes = today.getMinutes(); //현재 분 var nowSeconds = today.getSeconds(); //현재 초 var nowTime = today.getTime(); //1970년 1월 1일부터 밀리초 경과.. 더보기
자바스크립트 10 - 객체 (배열과 객체 생성비교) 1. 배열선언방법 자바스크립트의 기본 자료형 : 숫자, 문자, 불, 함수, object, undefined var array1 = [123, '고구마', function(){}, {}]; var array2 = [{},{},{},{},{}]; 인덱스와 요소로 구성됨 array1[0]=>123, array1[1]=>'고구마' 배열은 객체를 기반으로 한다. 2. 배열 객체 선언방법 크기를 지정하지 않고 선언 var array1 = new Array(); 값을 넣는 법 array1[0] = "지수"; 크기를 지정하고 선언 var array1 = new Array(5); 5개만 값이 들어올 수 있음 var array1 = new Array('지수', 183, 67); 기타 배열 메서드 활용법 (이 외에 다양한 .. 더보기
자바스크립트 9 - 함수연습 연습 꼭~! //삼각형의 넓이 function shape(w,h){ function tri(){ return (w*h)/2; } function quad(){ return w*h; } document.write('삼각형의 넓이 : '+ tri() +' '+ '사각형의 넓이 : ' + quad()); } shape(10,20); function fun(){ return function(x){ //리턴으로 반환하는데, 익명함수로 반환할수있다. for(let i=0; i 더보기
자바스크립트 8 - 화살표 함수 화살표 함수는 익명함수를 만들때 사용하기 좋다. let fun2 = ()=>{ let call =prompt('이름이 뭐니~?',''); return alert(call + '~! 반갑다~!'); } fun2(); let callBack = ()=>{ return document.write('콜백함수 호출 '); } callBack(); let alert1 = ()=>{ return alert('함수호출1 - 리턴전실행문'); } alert1(); 더보기
자바스크립트 7 - 함수 종류와 작성방법 함수연습 필수~! 1. 함수 종류에는 익명함수와 선언적 함수가 있다. 함수는 선언부와 호출부가 있다. 즉, 함수선언 -> 함수실행문작성 -> 리턴으로 반환하는 식으로 작동한다. 익명함수는 선언하고 난 이후에 호출한다. 선언적 함수는 어디에 선언해도 자스에서 이미 가장 먼저 읽어주기 때문에, 선언부를 어디에 적어도 호출이 된다. fun1(); let functionName = function(){ alert('좋은아침입니다.-functionName함수호출'); }; functionName(); function fun1(){ alert('좋은아침입니다.-fun1함수호출'); }; let fun2 = function(){ let call =prompt('이름이 뭐니~?',''); alert(call + '~!.. 더보기
자바스크립트 6 - 반복문 for, while, do while 연습문제 꼭 풀기~! See the Pen 반복문연습 by LimsUIUX (@LimsUIUX) on CodePen. 더보기
자바스크립트 5 - 연습문제 ( if | switch | 삼항연산자) 아래 문제를 풀어보면서 연습~! 문제1. 1주일에 7000보이상 걸으면, 건강한 습관을 가지셨군요, 그렇지않으면, 운동을 좀 하세요~! let walkNum = Number(prompt('1주일에 몇보 이상 걷나요?', '')); if(walkNum >= 7000){ document.write('건강한 습관을 가지셨군요 '); }else{ document.write('운동을 좀 하세요~! '); } 문제2. 1주일에 음주를 몇회 하시나요? 3회 이상 : 경고~! let drinkNum = Number(prompt('1주일에 음주를 몇회 하시나요?', '')); if(drinkNum >= 3){ document.write('음주를 줄여야 겠네요~! '); } document.write('좋은 습관을 가졌네.. 더보기
자바스크립트 4 -연산자 종류와 연습 연산자의 종류 복습 -산술연산자(사칙) : + - * / %, + 연결, / 몫, % 나머지 -대입연산자 : A=B : A에 B를 대입(할당)한다. -복합대입연산자 : +=, -=, *=, /=, %= -증감연산자 : ++, -- (전치, 후치) -비교연산자 : true/false를 반환 -논리연산자 : &&(AND) ||(OR) !(NOT) : true/false를 반환 -삼항연산자 : 질문 ? true문 : false문; See the Pen 연산자연습 by LimsUIUX (@LimsUIUX) on CodePen. 더보기
브라우저 이슈 최초의 브라우저 언어인 html은 팀버너스리가 만들고 알렸지만, 사용자들이 먼저 접했던 브라우저 애플리케이션은 네스케이프이다. 네스케이프는 자사의 경쟁력을 높이기 위해 만든 언어가 자바스크립트이다. 네스케이프 이후, 마이크로소프트가 브라우저의 경쟁력을 예견하고, MS의 운영체제에 익스플로러를 넣어 배포하게 되면서, 유료인 브라우저(네스케이프) 사용자들이 무료인(IE)로 갈아타는 현상이 보편화 되면서 브라우저 전쟁이 일게 되었다. 기능적인 면에서 경쟁을 하면서 무질서해지고, 예를 들어 이벤트를 추가하는 메소드도 다른데 넷:addEventListener, IE:attatchEvent라는 이벤트를 써야 하면서 개발자들의 불만이 많아지게 되어, 다년간 그 불만이 축적되어 니즈를 맞춰 나온게 [웹표준(web st.. 더보기
자바스크립트3-데이터타입 자바스크립트의 식별자 : 변수, 함수, 속성, 메서드가 있다. [개념] 변수 : 변수의 규칙을 이전 문서 참고, 변수는 메모리에 값이 들어올 공간을 준비 하는 것. 변수에는 모든 자료형이 들어 갈 수 있다. 속성 => 객체.속성 = 값; 으로 표현한다. 함수 : 실행문의 집합체()들로, 기능을 수행할 수 있는 실행문을 넣는다. 메서드 => 객체.메서드() 으로 표현한다. 객체가 가지고 있는 함수라고 보면 된다. [자료형의 종류] 자료형 : 숫자, 문자, boolean, undefined, object, function(); [연산자의 종류] -산술연산자 : + 연결, / 몫, % 나머지 -대입연산자 : A=B : A에 B를 대입(할당)한다. -비교연산자 : true/false를 반환 -논리연산자 : &&.. 더보기
자바스크립트 2 - 변수선언 변수선언 방법 1. var 로 선언 => 일반적인 변수 선언 방법 var num; //변수를 선언 num = 10; //변수에 값을 할당 let num1 = 20; //변수를 초기화 num = "자바스크립트";//변수에 값을 재할당 num1 = 30; console.log('변수 num의 값은 : ' + num + '입니다.'); /*ES6에서 권하는 선언방법*/ 변수선언 방법 2. let 로 선언, 재할당이 가능하다. 그러나, 중복선언(초기화를 두번할수 없다. ) 안된다. let cm = 200; cm = 300; 변수선언 방법 3. const 로 선언 =>상수의 경우 const 로 선언한다. 재할당이 안된다. const val = 100; cm = 400; let m = cm/val; document.. 더보기
자바스크립트1-실행문 작성방법 1. 안에 실행문을 넣는다. 2. defer vs async 1) defer 속성은 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행된다. 아래와 같이 작성. 2) async 속성이 명시된 경우 : 브라우저가 페이지를 파싱되는 동안에도 스크립트가 실행된다. 아래와 같이 작성. ================================= 3. 실행문은 ; 으로 마친다. 4. 입출력함수 작성하는 방법 See the Pen javascript_basic1 by LimsUIUX (@LimsUIUX) on CodePen. 더보기