반응형
변수 선언
- var : 변수(생략 가능)
- 함수 내에서 var를 하지 않으면 전역변수가 되지 않는다.(전체 사용 가능한 변수)
텍스트
- 문자열 텍스트는 " "와 ' '둘 다 가능
숫자
- 자바스크립트는 정수와 유리수의 구분 없이 숫자 자료형을 가짐
- 사칙연산자( + - * / )사용 가능
출력 방법
- alert("값") : 경고창을 띄우는 것(사용자가 볼 수 있음)
- document.write("값"); 브라우저에 값을 출력하는 것
- consol.log("값"); 개발자 도구에서 확인 가능한 콘솔에서 확인 가능
입력 방법
prompt( ) : 입력 창이 뜨는 것
- 입력해서 반환 받는 값 = prompt("안내문구", "기본 default");
- 문자열만 입력 가능, 숫자를 써도 문자열로 리턴 된다.
<script type="text/javascript">
var name = prompt("안내문구", "기본 default");
alert(name+", Hi");
</script>
confirm( ) : 확인 창 뜨는 것
- 확인 / 취소 버튼과 함께 확인을 받기 위할 때 사용. 삭제 안내 등
- 입력해서 반환 받는 값 = confirm("안내 문구");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var del = function() {
var re = confirm("삭제하시겠어요?");
alert(re);
}
</script>
</head>
<body>
<button onclick="del()">삭제</button>
</body>
</html>
typeof( "변수명" )
- 변수의 타입을 알기 위한 함수
- NaN(Not a Number) : 숫자인지 판별할 때 사용 가능, 일반 문자열은 숫자로 표시할 수 없지만, 강제로 자료형을 바꿨으므로 NaN으로 출력
var person = {
name:"홍길동",
age:20
};
alert(typeof(person));
객체 정보 추가 방법
- person.tel="010-1234-1234"
객체 정보 삭제 방법
- delete(person.addr);
undefined 자료형
- 존재하지 않는 것을 표현하는 자료형
- 변수 선언했지만 초기화 하지 않은 경우 해당 자료형 값이 나온다.
- 해당 자료형은 false
자료형 변경
- 숫자로 자료형 바꾸기 : Number( )
- 문자로 자료형 바꾸기 : String( )
배열 자료형
- 배열을 선언하는 방법
- 배열 안에는 어떠한 종류의 자료형을 요소로 가질 수 있다. 섞어서 사용도 가능
- 배열 사용방법
var text = ['홍길동','강감찬','이순신'];
var number = [10,20,30];
var number2 = [10.5, 20.1, 30.123];배열에 데이터를 추가하는 변수
- 배열명.push( 값);
- 값에는 모든 자료형 가능 / 객체도 넣을 수 있다.
HTML 태그 값
- document.getElementById("n1").value : n1의 값을 가져오라는 것
- document.getElementById("resultSum").innerHTML = r
- document.getElementById("resultSum").value= r
코드 실행 : String을 계산, 활용 가능한 형태로 만들기
- eval( ) : 계산 가능한 함수로 만드는 것
- number( ) : 숫자로 변경해 주는 것, eval과 비슷하게 사용 가능
조건식
- if 와 if / else
if / if else 조건문
if( 조건식) {
문장1
} else{
문장2
}
삼항 연산자
- (조건식)?(참일 때 실행하는 문자) : (거짓일 때 실행하는 문자)
짧은 조건문
- (조건문) || (불리언 표현식이 거짓일 때 실행 할 문장)
반복문 : for문
자바의 foreach와 다르게 x는 인덱스를 준다.
for( var x in arr)
{
str += "<li>"+arr[x]+"</li>";
}
문서 객체 모델
1) 정의
- HTML을 조작 하기 위한 객체
2) 객체 종류
- HTML Tag 하나를 노드(Node) 또는 객체 라고 합니다.
| 분류 | 메소드 | 설명 |
| document 객체의 노드 생성 | createElement(tagNmae) | 요소 노드를 생성 합니다. |
| createTextNode(text) | Text 노드를 생성합니다. | |
| 문서 객체의 연결 | appendChild(node) | 객에에 node를 연결 합니다. |
| 문서 객체의 속성 | setAttribute(name, value) | 객체에속성을 지정합니다. name : 속성명 value : 속석 값 |
| getAttribute(name) | 객체의 속성을 가져옵니다. | |
| document 객체의 문서 객체 선택 | getElementById(id) | 태그의 id 속성이 id 매개변수와 일치하는 문서 객체를 가져옵니다. |
| getElementByName(name) | 태그의 name 속성이 name 매개벼수와일치하는 문서 객체를 배열로 가져옵니다. | |
| getElementByTagName(tagName) | tagName 매개변수와 일치하는 문서 객체를 배열로 가져옵니다. | |
| querySelector(선택자) | 선택자로 가장 처음 선택되는 문서 객체를 가져옵니다. | |
| querySelectorAll(선택자) | 선택자를 통해 선택되는 문서 객체를 배열로 가져 옵니다. | |
| 문서 객체 제거 | removeChild(child) | 문서 객체의 자식 노드를 제거합니다 |
| 분류 | 속성 | 설명 |
| 문서 객체의 속성 | innerHTML | HTML코드를 삽입 합니다. |
객체
Object.create(): 새로운 객체를 생성하기 위해 사용 존재하는 객체의 프로토타입과 연결한다. programmer는 프로토타입을 이용해서 job이 가지고 있는 프로퍼티에 접근이 가능하다.
const job = { position: 'engineer', salary: 20000, isAvailable: true, showDetails() { ... } }
const programmer = Object.create(job);
programmer.position = 'engineer'; programmer.showDetails();
Object.keys(): 객체의 키 값을 가지고 있는 배열을 생성한다.
const company = { boss: 'Mike', secretary: 'Ryan', accountant: 'Michael' };
const keys = object.keys(company);
// 특정한 값 제거하기 const result = Object.keys(company).reduce((acc, key) => key === 'boss' ? acc : ({ ...acc, [key]:company[key] }),{});
Object.entries(): 객체의 key/value 쌍을 배열로 묶은 배열을 반환한다.
const windowSystem = { name: 'Window', version: 95, license: 'Microsoft' };
const entries = Object.entries(windowSystem);
// forEach 사용가능
entries.forEach(entry => {
let key = entry[0];
let value = entry[1];
console.log(`${key}: ${value}`);
})
Object.assign(): 다른 객체로부터 value값을 복사한다.
const person1 = { job: 'Delivery Man', employer: 'Korea Express' };
const person2 = { job: 'Delivery Girl', employer: 'China Express' };
//두 객체를 합침 const people = Object.assign(person1, person2);
// spread operator(...) 사용 const people = {...person1, ...person2};
배열
splice(): 지정된 범위 안의 요소들을 제거하고 그 자리에 새로운 값을 넣을 수 있다.
var a = [0, 1, 2, 3, 4, 5];
var b = a.splice(2, 3);
console.log(a); // 결과 : [0, 1, 5]
console.log(b); // 결과 : [2, 3, 4] // 두 번째 파라미터가 0 이면, 제거없이 추가 함
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
// 2개를 제거하고 그 자리에 세 번째 값이 들어옴
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
slice(): 제거한 값을 가진 새로운 배열을 리턴 한다.
var fruits = ["Banana", "Apple", "Mango", "Orange", "Lemon"];
var citrus = fruits.slice(2);
concat(): 두 배열을 합친 새로운 배열을 리턴 한다.
var array1 = ["Cecilie", "Lone"];
var array2 = ["Emil", "Tobias", "Linus"];
var array3 = ["Robin", "Morgan"];
var myKids1 = array1.concat(array2);
var myKids2 = array1.concat(array2, array3);
sort(): 문자열을 기준으로 정렬을 진행 한다.
var points = [50, 100, 2, 6, 22, 11];
points.sort(function(a, b){return a - b});
points.sort(function(a, b){return 0.5 - Math.random()});
// Sorting Object Arrays
var cars = [ {type:"Benz", year:2012}, {type:"Volvo", year:2009}, {type:"BMW", year:2017} ];
cars.sort(function(a, b){ var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;} return 0; });
toString(): 배열을 문자열로 반환/ join()과 차이점이 있다면 구분자를 파라미터로 전달할 수 없음.
var fruits = ["Orange", "Banana", "Mango", "Apple"];
fruits.toString();
// "Orange,Banana,Mango,Apple
fruits.join('-');
// "Orange-Banana-Mango-Apple"
forEach(): 각각 배열 요소에 대한 콜백함수를 호출한다.
var numbers = [35, 5, 10, 12, 29];
numbers.forEach(myFunction);
function myFunction(value, index)
{ console.log(value, index) };
map(): 각각 배열 요소에 대한 콜백함수를 실행하고 새로운 배열을 생성한다.
var numbers = [35, 5, 10, 12, 29];
var numbers = numbers.map(myFunction);
function myFunction(value, index)
{ return value * 2; }
filter(): 테스트를 통과한 엘리먼트로 새로운 배열을 생성한다.
var numbers = [55, 2, 10, 19, 25, 89, 1, 23, 68];
var over10 = numbers.filter(myFunction);
function myFunction(value, index, array)
{ return value > 10; }
reduce(): 배열 엘리먼트에 대해 함수를 실행하며, 하나의 결과값을 생성한다.
var numbers = [42, 6, 10, 12, 15, 33, 54];
var sum = numbers.reduce(myFunction, 100);
function myFunction(total, value, index, array)
{ return total + value; }
find(): 테스트를 통과하는 배열에서 첫 번째 엘리먼트 값을 리턴한다.
var numbers = [2, 9, 11, 12, 16, 25, 34];
var first = numbers.find(myFunction);
function myFunction(value, index, array)
{ return value > 10; }
문자열
substring(): 시작 인덱스 부터 종료 인덱스 전까지 문자열의 부분문자를 반환한다. 음수를 입력시 0으로 판단함.
var str = 'google';
str.substring(1,3);
str.substring(2);
substr(): 특정 위치로부터 포함하고자하는 수 만큼의 문자열 반환.
var str = 'google';
str.substr(1,3);
str.substr(2);
indexOf(): 값과 일치하는 첫 번째 인덱스를 반환하며 대/소문자를 구분한다.
var paragraph = 'A cookie associated with a cross-site resource';
var searchTerm = 'cookie';
var indexOfFirst = paragraph.indexOf(searchTerm);
split(): 문자열을 분리하여 배열로 변환한다.
var str = 'A cookie associated with a cross-site resource';
str.split(' ')
["A", "cookie", "associated", "with", "a", "cross-site", "resource"]
slice(): 문자열읠 일부를 추출하여 새로운 문자열로 반환한다. 음수를 사용할 수 있다는 점이 substring()가 다른 점이다.
var numbers="0123456789";
console.log(numbers.slice(3,5));
console.log(numbers.slice(-7,-3));
trim(): 문자열 양 끝의 공백을 제거한다.
var goal = ' American Dream! ';
console.log(goal.trim());
// expected output: "American Dream!";
자바스크립트 배열 메소드
| 메소드(Method) | 설명 |
| concat() | 두 개 혹은 그 이상의 배열을 결합하고 결합된 배열 사본을 리턴 |
| copyWithin() | 배열 요소를 배열의 특정 위치에 복사 |
| entries() | 배열 반복 객체의 키/값을 리턴 |
| every() | 배열의 모든 요소가 테스트를 통과하는지 확인 |
| fill() | 배열의 요소를 고정된 값으로 채움 |
| filter() | 테스트를 통과하는 요소로 새로운 배열을 생성 |
| find() | 테스트를 통과하는 배열의 첫 번째 요소를 리턴 |
| findIndex() | 테스트를 통과하는 배열의 첫 번째 인덱스 리턴 |
| forEach() | 각 배열 요소에 대한 함수 호출 |
| from() | 객체로부터 배열 생성 |
| includes() | 배열이 특정 요소를 포함하고 있는지 확인 |
| indexOf() | 배열 내 요소를 검색하고 해당 위치를 리턴 |
| isArray() | 객체가 배열인지 확인 |
| join() | 배열의 모든 요소를 문자열로 연결 |
| keys() | 배열 반복 객체를 리턴. 본래 배열의 키 포함 |
| lastIndexOf() | 배열 내 요소를 뒤에서부터 검색하여 해당 포지션을 리턴 |
| map() | 각 배열 요소에 대한 함수 호출의 결과로 새로운 배열을 생성(*어떤 요소든 배열로 바꿔주는 역할) |
| pop() | 배열의 마지막 요소를 제거 |
| push() | 배열의 마지막에 새로운 요소를 추가 |
| reduce() | Reduce the values of an array to a single value (going left-to-right) |
| reduceRight() | Reduce the values of an array to a single value (going right-to-left) |
| reverse() | 배열의 요소 순서를 뒤바꿈 |
| shift() | 배열의 첫 번째 요소를 제거 |
| slice() | 배열의 일부를 선택하여 새로운 배열을 리턴 |
| some() | 배열의 요소 중 테스트를 통과하는 것이 있는지 확인 |
| sort() | 배열 내 요소를 정렬 |
| splice() | 배열 내 요소 추가 및 제거 |
| toString() | 배열을 문자열로 변환하고 해당 결과를 리턴 |
| unshift() | 배열의 처음에 새로운 요소를 추가 |
| valueOf() | 배열의 초기 값(primitive value) 리턴 |
반응형
'프로그래밍_기타 언어' 카테고리의 다른 글
| jquery 노드 메서드 정리 (0) | 2024.09.22 |
|---|---|
| jquery 이벤트 메서드 (1) | 2024.09.22 |
| CSS에서 사용하는 속성 모음 (0) | 2024.09.22 |
| Django 설치와 기본적인 설정 방법 (1) | 2024.09.22 |
| 파이썬(python) init.py 파일 용도 (0) | 2024.08.29 |
