반응형 💻 1. 웹개발_Front end/1-4 Javascript18 [Javascript] 05-5 자바스크립트 내장 함수 내장함수 1. 의미 : 자바스크립트 엔진에 내장된 함수를 말함 내장 함수는 개발자가 함수를 직접 선언하지 않아도 이미 자바스크립트에 내장된 함수이므로 바로 호출이 가능하다. 2. 종류 2021. 9. 19. [Javascript] 05-4 객체 생성자 함수의 활용 객체 생성자 함수 1. 의미 : 내장 객체를 생성할 때는 이미 자바스크립트 엔진에 내장되어 있는 객체 생성자 함수(Object Constructor Function)를 사용하여 객체를 생성 2. 기본형 3. 예제 - 몸무게 정상 여부 출력 메모리 절약을 위한 프로토타입 사용하기 1. 의미 : 앞에서 배운 대로 객체를 생성하면 객체를 생성한 만큼 함수가 등록되어 메모리 낭비를 하게 된다. 객체 생성자 함수에 프로토타입을 사용하여 함수를 등록하면 메모리 낭비를 줄일 수 있음 2. 기본형 3. 예제 - 객체를 생성할 때 프로토타입으로 함수를 등록하기 * 위 예제의 결과와 달리 함수들은 console에 찍히지않은 것을 알 수 있다. 2021. 9. 12. [Javascript] 05-3 함수 스코프 개념 이해 함수 스코프란? 1. 의미 : 스코프의 사전적 의미는 '범위'이다. 변수 또는 유효 범위를 말한다. 2. 기본형 3. 지역 변수란 ? - 스코프 영역에서 선언한 변수, 스코프 영역에서만 사용 가능 4. 지역 함수란? - 스코프 영역에서 선언한 함수, 스코프 영역에서만 사용 가능 전역변수와 지역변수의 개념과 차이 1. 의미 : 전역변수는 자바스크립트 어디에서든 사용할 수 있는 변수이고, 지역변수는 함수 스코프에서만 사용할 수 있는 변수이다. 2. 기본형 3. 예제 - 전역변수와 지역변수 전역함수와 지역함수의 차이 1. 의미 : 전역함수는 자바스크립트 어디에서든 사용할 수 있는 함수이고, 지역함수는 함수 스코프에서만 사용할 수 있는 함수이다. 2. 기본형 3. 예제 - 전역함수와 지역함수 전역과 지역을 나누.. 2021. 9. 12. [Javascript] 05-2 함수에서 return 문의 역할 return문 1. 의미 : return문은 함수에서 결괏값을 반환할 때 사용 + 반복문의 break문처럼 return문이 실행되면 코드가 강제로 종료됨 2. 기본형 function 함수명() { 자바스크립트 코드1; return 데이터(값); 자바스크립트 코드2; } var 변수 = 함수명(); 3. 예제 - 각 과목들의 평균 점수 반환 4. 예제 - 이미지 파일을 이용해 갤러리 만들기 이전 다음 재귀함수 호출 1. 의미 : 함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 재귀 함수 호출이라고 함 + 재귀함수 호출은 함수를 반복문처럼 여러 번 호출하기 위해 사용함 2. 기본형 function myFnc() { 자바스크립트 코드; myFnc(); } myFnc(); 3. 예제 - 재귀 함수 .. 2021. 9. 12. [Javascript] 05-1 함수 함수란? - 함수를 사용하여 자바스크립트 코드를 메모리에 저장했다가 필요할 때마다 호출하여 사용할 수 있음 변수와 함수의 차이 1. 변수 - 1개의 데이터만 저장 - var 키워드 사용하여 선언 - 문자형, 숫자형, 논리형 데이터를 보관 - 객체를 참조함 2. 함수 - 코드를 저장 - function 키워드 사용하여 선언 - 출력문, 제어문 등의 코드를 저장하고 데이터를 반환 기본 함수 정의문 1. 함수 정의문 : 함수를 사용하여 코드를 저장한 것 2. 기본형 function 함수명() { 코드; } 3. 익명함수 기본형 참조 변수 = function() { 코드; } 4. 함수 호출 - 함수 정의문 안에 작성된 코드는 바로 실행되는 것이 아니라 함수가 호출되면 실행됨 - 함수는 메모리에 할당되어 대기중.. 2021. 9. 12. [Javascript] 04-3 브라우저 객체 모델 브라우저 객체란? - 브라우저에 내장된 객체를 브라우저 객체라고 한다 - window는 브라우저 객체의 최상위 객체이며, window 객체에는 하위 객체가 포함되어 있음 - 계층적 구조로 이루어져있으며, 이를 브라우저 객체 모델(BOM)이라고 함 window 객체 1. 의미 : 브라우저 객체의 최상위 객체 2. window 객체의 메서드 종류 3. open() 메서드 이용해 팝업창 나타내기 4. alert()- 경고창, prompt() - 질의응답창, confirm() - 확인/취소창 일정한 시간 간격으로 코드 실행 - setInterval() / clearInterval() 1. 의미 : setInterval() 메서드는 코드를 일정 시간 간격으로 반복 실행하고, clearInterval() 메서드는 .. 2021. 9. 12. [Javascript] 04-2 내장 객체 내장 객체 - 내장 객체란, 브라우저의 자바스크립트 엔진에 내장된 객체를 말함 - 필요한 경우 객체를 생성해서 사용할 수 있음 - 내장 객체로는 문자, 날짜, 배열, 수학, 정규 표현 객체 등이 있음 내장 객체 생성하기 1. 내장 객체를 생성하는 기본형 : 참조변수(인스턴스 이름) = new 생성 함수() 2. 문법 이해 - 객체를 생성할 때는 new라는 키워드와 생성 함수( 예. Object( ) )를 사용 - 생성된 객체는 변수 tv가 참조하고 있고 이를 이용해서 객체의 속성과 메서드를 생성한다 - 생성된 객체를 이용할 때는 앞으로 참조 변수를 사용하겠다는 의미 3. 예제 - tv와 car 객체 생성 객체 속성 관련 메서드 1. 종류 2. 예제 - 이미지 변경하기 이미지 변경 이미지 변경 3. 예제 .. 2021. 9. 12. [Javascript] 04-1 객체 객체란? - 자바스크립트는 객체(Object) 기반 언어 - 객체는 기능과 속성을 가지고 있음 예) TV(객체)의 속성(Property)에는 너비, 높이, 색상, 무게 등이 있고 기능(메소드)에는 전원키다, 볼륨높이다 등이 있다. - 우리는 앞에서 document.write()을 사용해봄 -> 여기서 document가 객체고 write()가 메서드임 객체의 종류 - 종류 : 내장 객체, 브라우저 객체 모델(BOM), 문서 객체 모델(DOM) 1. 내장 객체 - 자바스크립트 엔진에 내장되어 있어서 필요한 경우에 생성해서 사용할 수 있음 - 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있음 - 예) 오늘 날자를 알고 싶다면 Date 객체를 생성하여 getDate() .. 2021. 9. 12. [Javascript] 03-4 반복문 while 문 1. 의미 : 조건식을 만족하는 동안 코드를 계속 반복 실행, 증간식은 while문 안에 존재 2. 예제 1 - 안녕하세요 10번 실행 3. 예제 2 - 30이하의 2의 배수이면서 6의 배수인 자연수 출력 4. 예제 3 - 10~20사이의 수 중 짝수는 파랑색, 홀수는 빨강색으로 스타일 지정하여 내림차순으로 출력 do while 문 1. 의미 : do-while문은 반드시 한 번은 코드를 실행하고 조건식을 검사한다. 2. 기본형 : 3. do-while문 예제 for 문 1. 의미 : 조건식을 만족할때까지 특정 코드를 반복하여 실행 2. 특징 : while문 보다 사용하기 편해 사용 빈도가 높은 편 3. 예제 - 5의 배수는 빨강, 7의 배수는 초록, 5와 7의 공배수는 아쿠아색으로 출력 .. 2021. 9. 7. [Javascript] 03-3 선택문 switch문 변수값과 case 값을 비교하여 일치하는게 있으면 해당 코드 실행 - if문과 차이점 : if문은 데이터가 여러 개일 경우 사용, switch문은 여러 경우의 값 중 일치하는 데이터를 찾을 때 사용 1. \ (역슬래시) : 문자열에서 줄 바꿈할 경우 사용 2. break : switch문을 바로 빠져나가게 해줌 3. default : switch문의 구조는 여러 case문과 맨 마지막에 나머지 모든 경우를 실행해주는 default문으로 이루어짐 4. alert() 메소드 : 알림창을 띄움 5. location.reload() 메소드 : 현재 창을 다시 road 시킴 6. location.href = "링크주소" : 주소 이동 메소드 2021. 9. 6. [Javascript] 03-2 조건문 if 문 1. 조건식에 조건(true, false)가 들어오는 경우 2. 조건식에 논리형이 아닌 다른 형이 오는 경우 - 0, null, "", undefined 는 모두 false를 반환한다. - 그 밖의 값은 true로 인식한다. else 문 1. If-else문 예제 (+삼항 연산자로도 표현이 가능) 2. confirm 메서드 사용한 예제 else if 문 1. 계절 출력 예제 중첩 if 문 1. 아이디, 비밀번호 오류 예제 2021. 9. 5. [Javascript] 03-1 제어문이란? 제어문 - 프로그램의 흐름을 제어할 수 있도록 도와주는 문장 제어문 종류 - 조건을 만족하는지의 여부에 따라 코드를 제어할 수 있는 조건문 - 변수에 일치하는 경우의 값에 따라 코드를 제어할 수 있는 선택문 - 특정 코드를 여러 번 반복해서 실행할 수 있도록 하는 반복문 조건문 - 조건에 따라 특정 코드를 실행시킬 수 있다. ex) if문, else문, else if 문 선택문 - 일치하는 경우의 값이 있을 경우에만 특정 코드를 실행시킬 수 있다. ex) switch문 반복문 - 코드를 지정한 횟수만큼 반복해서 실행시킬 수 있다. ex) while문, for문 2021. 9. 5. [Javascript] 02-3 연산자 연산자란 ? - 종류 : 산술, 문자 결합, 대입, 복합대입, 증감, 비교, 논리, 삼항 조건 연산자 -우리가 아는 사칙연산의 +, -, ×, ÷ 를 할 수 있게 해줌 산술 연산자 문자 결합 연산자 - 더하기 연산에 문자형 데이터가 한 개라도 들어있으면 다른 데이터들은 자동으로 문자형 데이터로 형변환된다. 대입 연산자 - 연산된 데이터를 변수에 저장할 때 사용 복합 대입 연산자 - 산술 연산자와 대입 연산자가 복합적으로 적용 증감 연산자 비교 연산자 - 두 데이터를 크다, 작다, 같다와 같이 비교할 때 사용하는 연산자 - 결과값은 true 또는 false로 반환한다. 논리 연산자 연산자 우선순위 삼항 조건 연산자 총정리 실습 - 적정 체중 구하는 테스트기 만들기 2021. 9. 5. [Javascript] 02-2 변수 변수란? - 변수는 변하는 데이터를 저장할 수 있는 메모리 공간 - 데이터를 담을 수 있는 그릇으로 오직 한개의 데이터만 저장할 수 있음 - 새로운 데이터가 들어오면 기존의 데이터는 메모리 공간에서 지워진다. - 변수에 저장할 수 있는 데이터의 종류로는 문자형, 숫자형, 논리형, Null 데이터가 있음 변수 선언 - 기본형과 같이 var 키워드를 변수명 앞에 붙임 - 한글 사용이 불가능하고 영문과 숫자, 그리고 _ , $ 만 쓸 수 있음 - 단어와 단어의 조합이라면 두 번째 글자의 첫 글자는 대문자로 표기 (Camel 표기법) 변수에 저장할 수 있는 자료형 1. 문자형 ( String ) - 문자형은 큰따옴표나 작은따옴표로 감싸고 있음 - 문자형 데이터에 HTML 태그를 포함하여 출력하면 태그로 인식이 .. 2021. 9. 5. [Javascript] 02-1 자바스크립트 기초 문법 자바스크립트 선언문 - 선언문 : 자바스크립트 코드를 작성할 영역을 선언하는 것 - 선언문은 자바스크립트 주석 처리 내부 스크립트 외부로 분리하기 - 장점 1. 소스 찾기가 쉬워지고 소스를 손상시킬 염려가 사라짐 - 장점 2. 외부로 분리함으로써 프로젝트 관리를 원활하게 할 수 있음 document.write("환영합니다."); 코드 입력 시 주의 사항 1. 대소문자 구분할 것 // 날짜 객체 생성 : New date(); --> X new Date(); --> O 2. 세미콜론 꼭 쓰기 (되도록 한 줄에 한 문장만 작성할 것) // javascript에서는 세미콜론 생략가능하다. 하지만 헷갈리지 않도록 항상 써줄것 document.write("Hi") document.write("Bye"); --> X.. 2021. 9. 5. 이전 1 2 다음 반응형
