Front-End 64

[자바스크립트] 반복문(for in문, for of문, forEach문)

1) for in문 - 변수에 키를 저장 for(변수선언 in 객체){ 객체의 요소의 개수만큼 반복할 문장; ... } ▼실행결과▼ 2) for of문 - 변수에 값을 저장 for(변수선언 of 객체){ 객체의 요소의 개수만큼 반복할 문장; ... } ▼실행결과▼ 3) forEach문 - 오직 Array객체에서만 사용 배열.forEach(콜백함수(item, index, arr){ 배열의 요소의 개수만큼 반복할 문장; ... }); ** 각 변수에 실제로 들어오는 값 ** item : 값 index : 인덱스 arr : 현재배열 ▼실행결과▼

[자바스크립트] Array 객체의 메소드

1) Array 객체의 메소드 1. push( ) 배열의 요소를 추가한다. (맨 마지막 인덱스에 추가된다.) 2. pop( ) 배열의 마지막 주소에 있는 값을 제거한다. let popArr = [10,"hi",7.23,true,180]; console.log(popArr.pop()); //180 console.log(popArr); //[10, "hi", 7.23, true] 3. shift( ) 배열의 첫번째 주소에 있는 값을 제거한다. arr1.shift(); console.log("shift : "+arr1); //shift : 10,3.5,true,여자 4. concat( ) 두 개의 배열을 합친다. 통째로 새로운 배열 객체로 만들어진다. 배열명1.concat(배열명2); let arr2 = ['..

[자바스크립트] 배열(array)의 생성방법, 특징

1) 배열(Array) - 이름과 인덱스로 참조되는 정렬된 값의 집합이다. - 배열을 구성하는 각각의 값을 배열 요소라고 한다. - 배열에서의 위치를 가리키는 숫자를 인덱스라고 한다. 2) 배열 생성, 추가 방법 생성하기 1. let 배열명 = [요소1, 요소2, ...] ; 2. let 배열명 = Array( 요소1, 요소2, ... ) ; 3. let 배열명 = new Array( 요소1, 요소2, ... ) ; ** 변수는 var, const 도 된다. 추가하기 1. 배열명[인덱스] = 추가할값; 2. 배열명[배열명.length] = 추가할값; 3. 배열명.push(값); 3) 자바스크립트 배열의 특징 - 배열 요소의 타입이 고정되어 있지 않다. let arr = [1, 1.5, true, "김사과..

[HTML] HTML 특징, 구조, 속성

HTML(Hyper Text Markup Language) - 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 마크업 언어 - 마크업 언어란 태그방법 체계를 의미하며 태그를 이용해서 문서나 데이터의 구조를 기술(표현)하는 언어 1) HTML5 - HTML문서는 확장명을 .html로 저장합니다. - HTML문서는 문서를 작성할 수 있는 프로그램이라면 어디든지 작성이 가능합니다. - HTML은 대소문자를 구별하지 않습니다. 단 소문자로 작성하는 것을 권장합니다. - HTML은 띄어쓰기, 줄바꿈을 구별하지 않습니다. - HTML은 태그 형태로 괄호()를 사용하여 표현합니다. - HTML은 시작태그, 종료태그로 이루어져 있습니다. (* 모든 태그가 시작태그와 종료태그로 이루어진 것은 아님) - HTML문서의..

Front-End/HTML 2021.06.10

[자바스크립트] 제어문(조건문, 반복문)

1) 조건문 - 프로그램 내에서 주어진 조건문의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문 - if문 / if~else문 / if~else if문 / switch문 2) 조건문 - if문 / if~else문 / if~else if문 - 조건의 범위가 있을 때 - 조건식의 결과가 참일 때 수행함 1. if문 / if~else문 if(조건식){ 조건식의 결과가 참일 때 실행할 문장; ... }else{ 조건식의 결과가 거짓일 때 실행할 문장; } 2. if~else if문 if(조건식1){ 조건식1의 결과가 참일 때 실행할 문장; }else if(조건식2){ 조건식2의 결과가 참일 때 실행할 문장; }else if(조건식3){ 조건식3의 결과가 참일 때 실행할 문장; } ... else{ 모든 조..

[자바스크립트] 연산자(Operator)

1) 산술 연산자 - 사칙 연산 및 기본적인 연산을 하는 연산자 + : 덧셈 - : 뺄셈 * : 곱셈 / : 나눗셈 % : 나머지 ** : 거듭제곱 => 2**2 = 4 ▼10과 3을 입력했을 때▼ 2) 비교 연산자 - 피연산자 사이의 상대적인 크기를 판단하여 참 또는 거짓을 반환함 > : 크다 = : 크거나 같다 조건식이 참이면 결과1 실행, 조건식이 거짓이면 결과2 실행됨

[자바스크립트] 대화상자(alert, confirm, prompt)

1) 대화상자 1. alert( ) - 사용자에게 메시지를 보여주고 확인을 기다림 alert("메시지"); ▼실행결과▼ 2. confirm( ) - 사용자에게 메시지를 보여주고 확인이나 취소를 누르면 그 결과를 불린값으로 반환 const 상수명 = confirm("메시지"); // 상수에 true 또는 false가 저장 const result = confirm('확인 또는 취소를 눌러주세요'); console.log(result); 3. prompt( ) - 사용자에게 메시지를 보여주고 사용자가 입력한 문자열을 반환 const 상수명 = prompt("메시지"); // 상수에 입력한 문자열이 저장 ▼입력값 => 이름 : 채린 / 수1 : 10 / 수2 : 20▼

[자바스크립트] 타입(형) 변환

1) 타입 변환 - 변수는 타입이 고정되어있지 않다. - 변수에 다른 타입의 값을 대입해준다. let a = 10; // 숫자형 ... a = "자바스크립트"; // 문자열형 1. 자동 타입 변환(암시적) - 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용한다. const a = "20"; // 문자열형 const b = "10"; // 문자열형 let result = a+b; // 2010 => 여기서 + 는 연결연산자를 뜻한다. result = a-b; // 10 => 자동 타입 변환된다. result = a*b; // 200 => 자동 타입 변환된다. result = a/b; // 2 => 자동 타입 변환된다. const c = "자바스크립트"; result = c-..

[자바스크립트] 데이터 타입(형)

1) 데이터 타입 프로그램에서 다룰 수 있는 값의 종류를 의미한다. 1. 숫자형(number) - 다른 언어와 달리 정수와 실수를 따로 구분하지 않는다. - 모든 수를 실수 하나로만 표현한다. 2. 문자열형(string) - 문자열형은 따옴표로 둘러싸인 문자의 집합을 뜻한다. ** ` (백쿼트) 사용법 ** (`${변수}`); //10+5=15 을 출력하는 두가지 방법 console.log(num1 + "+" + num2 + "=" + (num1+num2)); console.log(`${num1}+${num2}=${num1+num2}`); 3. 불린형(boolean) - 참(true) 또는 거짓(false)으로 표현되는 값이다. const b1 = true; // 값이 있으면 true const b2 =..

반응형