본문 바로가기
반응형

전체 글160

자바스크립트 for each 문 , for in 문 , for of문 ● foreach 문 ▼ 내용 foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다. (ES6부터는 Map,Set 지원) 배열의 요소들을 반복하여 작업을 수행할수 있습니다. foreach구문의 인자로 callback함수를 등록할수 있고, 배열의 각 요소들이 반복될 떄 이 callback 함수가 호출됩니다. callback 함수에서 배열요소의 인덱스와 값에 접근할수 있습니다. 배열의 첫번쨰부터 마지막까지 반복하면서 item을 꺼낼수 있다. var arr = ['가','나','다','라']; arr.forEach(function(item,index,arr2){ console.log(item,index,arr2[index+1]); }) //첫번쨰 인수는 배열의 각각의 item //두번쨰 인.. 2023. 10. 18.
자바 스크립트, 배열, 배열함수 ※ 배열 ​ ● 배열 => 대괄호 1. 배열의 선언 let num = [] let arr = new Array() 2. 배열의 생성 num = [1,2,3] arr = new Array(1,2,3) 배열안에 있는 값을 저장, 접근 => 인덱스 번호 배열의 전체 길이 => 배열이름.length ​ ● 배열 : 여러 변수를 하나의 묶음으로 다루는 것 1. 배열의 선언 let arr = [] let arr2 = new Array(10) ※ new Array(배열길이) ** 배열 길이를 설정했어도, 초과 가능 => 공간이 동적, 가변적 ​ ★★ 중요! 무조건! 배열의 선언을 먼저 진행 ​ 2. 배열의 생성 arr = [1,2,3] arr2 = new Array(1,2,3,4,5) console.log(arr2).. 2023. 10. 18.
자바 스크립트 기초, 실행위치 ※ 실행위치 방식 ​ ​ · 내부 방식 head 혹은 body영역에 script 태그를 작성해서 그 안에 js 문법을 사용하는 방법 · 인라인 방식 태그 안에 직접 기능을 넣어줄 때 사용 마우스 올리기! ​ · 외부 방식 외부의 js파일 안에 js문법을 작성한 후 연결 마우스 클릭! //ex12외부.js 파일 function ck(){ alert('외부에서 가지고 온 기능입니다.') } ​ ● 만들어진 마우스 올리기(인라인), 클릭(외부) 버튼 =>마우스 올렸을 때(인라인 방식) =?마우스 클릭했을때(외부 방식) 2023. 10. 18.
자바 스크립트 기초, 조건문, 반복문 ※ 조건문 ※ 조건문 구조 단순 if문 if(조건문){실행명령} if-else문 if(조건문){실행명령} else{실행명령2} ​ 다중 if문 if (조건문){실행명령} else if(조건문){실행명령} ​ Switch문 switch (변수명){ case 값A : 값이 A일 때 실행할 명령문; break; case 값B : 값이 B일 때 실행할 명령문; break; case 값C : 값이 C일 때 실행할 명령문; break; default : 위의 값 A ~ C 모두 아닐때 실행할 명령문; } ​ ex) let num=11 1. num이 10보다 크다면? '10보다 큰 수' 출력 if (num>10){ console.log('10보다 큰 수') } else{ console.log('10보다 작은 수') .. 2023. 10. 18.
자바 스크립트 기초, 연산자, 형변환 ※ 자바 스크립트 연산자 1. '/'=> 실제 나누기 연산 결과 console.log(100/3) '%'=> 나머지 값 console.log(100%3) 2. 비교연산자(==) vs 일치연산자(===) console.log('6'==6) console.log('6'===6) 3. 삼항연산자 참, 거짓에 따라 선택적으로 실행되는 조건문 조건문 ? 선택문1 : 선택문2 조건문 => True => 선택문 1 실행 => False => 선택문 2 실행 let a = 10, b = 20 let res = a>b ? "a가 더 크다" : "b가 더 크다" console.log(res) 1. '/'=> 실제 나누기 연산 결과 console.log(100/3) '%'=> 나머지 값 console.log(100%3) 2.. 2023. 10. 18.
div 가운데 정렬 하는 방법 div 가운데 정렬 하는 방법 정렬 방향 div의 가로만 정렬 div의 세로만 정렬 div의 가로와 세로 모두 정렬 div의 가로만 정렬 가로로 정렬하는 세 가지 방법 text-align 속성 이용 flex 속성 이용 position과 transform 속성 이용 ​ ● text align 속성 이용하여 가로 정렬 HTML display: inline-block text-align: center CSS /* 백그라운드 색깔 및 크기 설정 */ html,body{background:#ddd} .outer{width:400px;height:150px;background:pink} .inner{width:150px;height:150px;background:black;color:white} /* 가운데 정렬 .. 2023. 10. 18.
반응형