본문 바로가기

분류 전체보기

(45)
[Web] 웹 기초 (19) - JavaScript #12 navigator.userAgent 모바일 장치 구분 let userAgent = navigator.userAgent; console.log('agent : ', userAgent); let userAgent = navigator.userAgent; console.log('agent : ', userAgent); let btn = document.getElementById('btn'); // id가 'btn'인 요소 btn.onclick = function(){ let sp = ['iphone', 'ipad', 'android']; for( i in sp ){ if(userAgent.toLowerCase().match(new RegExp(sp[i]))){ alert('모바일 페이지로 이동...'); location.href='m.naver..
[Web] 웹 기초 (18) - JavaScript #11 배열 (Array), 정렬 (sort) Array 객체 자바스크립트 배열선언 배열의 길이는 가변적이다. 생성 방법 1: let a = new Array() 생성 방법 2 : let a = new Array(1,2,3); 생성 방법 3 : let a = [] 생성 방법 4 : let a = [1,2,3]; 다차원 배열은 1차원 배열의 요소를 다시 1차원 배열로 선언 let a = new Array(); a[0] = new Array(); (a의 첫번째 요소를 다시 배열로 만들기) // 기본형------------------------ let a = [1,2,3,4,5]; console.log(a[0]); // 1 console.log(a); // 배열 정보, 값 출력 //map형 --------------------------- let b = ..
[Web] 웹 기초 (17) - JavaScript #10 String 객체 (length, charAt, indexOf, replace, split, substring) String 객체 String length : 문자열의 길이 charAt(index) : index 위치의 문자 indexOf(str) | lastIndexOf(str) : str의 위치 replace(regExp, replacement) : 문자열 변경 (정규식 사용) split(seperator, limit) : 문자열을 limit의 개수만큼 분해 substring(start [, end]) : 문자열추출 // str.length : 공백 포함한 문자의 개수 let str = "abc 가나다 123 다나가"; console.log(str + ' : ', str.length); // charAt(index) 문자가 어디에 있는지 반환. 제로베이스 let c = str.charAt(1); console...
[Web] 웹 기초 (16) - JavaScript #9 객체 (생성자함수) 객체를 생성하는 방법 객체 리터럴을 사용하여 객체를 생성 : let obj={ ... } function을 사용하여 객체를 생성 : function ABC { ... } (자바의 static과 같은 개념) prototype을 사용하여 객체를 생성 (메소드를 생성) ⇒ 객체 생성할때마다 메소드도 새로 생성되는 것이 아니라 prototype으로 공유하는 것 class를 사용하여 객체를 생성 (자바의 class와 유사함. ECMAScript 6 이상) 리터럴 사용하여 객체 생성하기 기본형 리터럴 객체 리터럴로 만든 obj1은 재사용할 수 없다. 일회성이 아니면 잘 사용하지 않는다. 기본형 + 메소드가 있는 리터럴 객체 리터럴 객체를 map으로 생성 (리터럴 안에 key와 value값이 있다) function을..
[Web] 웹 기초 (15) - JavaScript #8 JSON JSON (형태, 사용법) 1) [ ] : 일반적인 배열 2) { key : value, key : value, ... } : map 구조 (key, value 한쌍으로 / key, value는 모두 큰 따옴표 "" 로 감싸주어야함 = > script에서는 문제없지만 자바에서 오류) 3) 2차원 배열 [ {... }, { ... } ] ⇒ 대괄호 안에 대괄호 4) { key : [ ], key : value } value값이 배열 (혼합해서 사용 가능) id, irum : 속성 (attribute) getter, setter : 함수 or 메소드
[Web] 웹 기초 (14) - JavaScript #7 함수 (function) 함수 자바스크립트에서 함수는 클래스역할과 메소드 역할을 둘 다 함. 익명함수 function에 이름이 없음 frm.btn.onclick = function() { ... } callback함수 frm.btn.onclick = abc; // function abc( ) { ... } 를 의미함. // "btn을 클릭하면 abc라는 함수를 실행하라." // 여기서는 abc() 로 쓸 수 없다. 이름만 써야함 h4.onmouseover = abc; ⇒ h4에 마우스를 올리면 abc 함수가 실행됨 선언적 함수 (+ 함수적 선언) function abc ( 매개변수 ) { ... } ※ 국비지원으로 학원에서 배울 때 강사님이 hoisting -> hoising으로 가르쳐주셔서 계속 "hoising" 으로 나오지만..
[Web] 웹 기초 (13) - JavaScript #6 switch, for in / for of switch 예제 1 : prompt를 사용하여 정수 하나를 입력받아 짝수, 홀수를 구분하여 출력하고, 만약 숫자가 아니라면 '숫자를 입력하세요' 메시지를 div창에 출력하시오. 예제 2 : 성적을 입력받아 학점을 구하여 성적과 학점을 div에 출력. 예제 3 : 점수 60 이상이면 배경색 파란색, 미만이면 빨간색으로 소스코드 switch prompt를 사용하여 정수 하나를 입력받아 짝수, 홀수를 구분하여 출력하고, 만약 숫자가 아니라면 '숫자를 입력하세요' 메시지를 div창에 출력하시오. for in for in : array의 [인덱스] 번째가 찍힌다 x : 배열의 인덱스값 예시 let p = ['javascript', 'java', 'python', 'kotlin']; for (x in p) { /..
[Web] 웹 기초 (12) - JavaScript #5 var, let 자바스크립트 변수 - var, let * 참고 const : 변수가 재할당되지 않는 상수. 변경하지 않는 값이라면 let보다는 const 사용 권장 var는 전역변수 : for 블럭에서 사용하고 console에 출력해도 값을 가지고 있다. let은 for블럭에서 사용하고 버려지기 때문에 블럭밖에서 출력하려고 하면 undefined 오류가 뜬다. var는 항상 재선언할 수 있다. (let은 에러남) 이미 선언된 변수라서 다시 선언할 수 없다는 오류 함수가 달라지면 영역이 달라져서 쓰이지 못 함. var, let 제외하고 변수명만 쓰면 undefined가 뜨지 않음. var는 hoisting 처리가 돼서 변수가 먼저 메모리에 올라간 뒤에 처리됨 let은 hoisting 처리가 되지 않아서 사용전에 선언을 꼭..
[Web] 웹 기초 (11) - JavaScript #4 alert, comfirm, prompt 입력상자, backtic alert, comfirm, prompt 입력상자 alert : 윈도우 경고창. 말 그대로 경고창만 띄워주고 '확인' 버튼만 누르면 이벤트 종료. confirm : '확인' '취소' 버튼에 따라 true, false 리턴. prompt : 값을 입력받아서 리턴한다. "확인" 누르면 return값 true backtick 입력한 그대로 출력하고 싶을 때 사용! 작은 따옴표(')가 아니라, 키보드 숫자 1 왼쪽에 있는 backtick 기호(`) backtick 문장 안에 ${ } 를 쓰면 변수를 삽입할 수 있다. 문자열 + 변수 + 문자열 이 번거로울 때 유용함 백틱 변수 사용 예시 let animal = 'monkey'; let food = 'banana'; console.log(`${animal} lov..
[Web] 웹 기초 (10) - JavaScript #3 checkbox, selectbox 제어 checkbox 제어하기 예제 : 가고싶은 산, 살고싶은 지역, 가봤던 나라 복수선택하여 선택값 출력하기 return 하는 이유 : alert가 계속 나오지 않고, 하나만 나오면 return 시켜 밑에 for문 실행되지 않도록 하기 위해서. (밑으로 흘러가지 않도록 끊어주는 역할) 소스코드 checkbox 가고싶은 산을 고르시오. 백두산 한라산 금강산 설악산 치악산 살고싶은 지역을 선택 강원도 경기도 전라도 경상도 충청도 제주도 가봤던 나라를 선택 미국 중국 일본 태국 베트남 호주 selectbox 제어하기 예제 : selectbox로 과정명을 하나만 선택하고 신청 과정을 복수로 선택할 수 있도록 구현 multiple = 'multiple' 여러개 선택할 수 있는 select 상자 frm이 가지고 있는 ..