비전공자의 개발 도전기

this?   객체를 가리키는참조 변수   호출되는 위치에 따라 다른 값 출력 1. 호출한 객체 없이 단독 호출 경우 : window 객체 2. 매서드 내부 : 메서드를 호출한 객체 3. 일반 함수(전역범위에서의 함수) 호출 : window 객체 4. 화살표 함수 호출 시 상위 스코프 객체 5. 생성자 함수 내부 : 생성자 함수가 생성할 인스턴스 6. 예시     1) function a() { console.log(this) }         a();                                              ➡️ 함수 호출 : window     2) let myObj = {              val1: 100,              func1: function () { ..

객체(Object)?여러개의 데이터를 한 변수에 저장할 수 있는 자료형앞의 배열과의 차이점 : 특별한 키를 통해 원하는 값(value)에 접근 가능한key-value의 쌍 으로 구성 - 특징   객체는 데이터를 구조화해 저장 할 수 있는 기본 자료형 중 하나객체 리터럴을 이용한 생성 (가장 간단)const person = {    name: "John",    age: 30,    job: "developer"   };생성자 함수를 사용한 생성function Person(name, age, job) {   this.name = name;   this.age = age;   this.job = job;   }const person1 = new Person("John", 30, "developer");con..

type?변수의 타입은 다양한 데이터를 용도에 맞게 쓰기 위해 사용- 원시타입 : 단순한 데이터 저장- 참조타입 : 객체로서 저장 1. 원시타입 (Primitive Types)    - 값 변경 불가능     - string, number, bigint, boolean, undefined, symbol, null..     - 이스케이프 표현       문자열에서 줄바꿈을 하고 싶을 때 : \n       나머진 검색    - boolean : ture, false    - null : 값이 없는 상태 (값을 할당하고 싶지 않을때 사용 가능 const username = null;)    - nusdefined : 값을 할당 하지 않은 상태 (대표적으로 함수를 입력하고 나면 뜬다.) 2. 객체타입 (Ob..

prompt()  : 사용자가 텍스트를 입력할 수 있도록 안내하는 선택적 메세지를 보유한 대화상자 오픈    보여줄 문자열, 프롬프트 창에 표시할 메세지가 없으면 생략 가능  - 반환 값 : 문자열 or null   - window.prompt() = prompt() : 빈 대화 상자 오픈  - window.prompt('입력하라') : 안내 문구 '입력하라'가 보이는 창 오픈   - prompt('입력하라', '알겠다') : 안내 문구 '입력하라'가 보이는 창 오픈 + 기본 입력 값은 '알겠다' confirm()   : 확인과 취소 두버튼을 보유한 메세지 지정 대화 상자 오픈   - window.confirm() = confirm()  - 확인(true) or 취소(false) 중 사용자가 취소(fla..

조건문조건식이 true or false인 값을 반환하는지 1. if & if-else- 형태 :   if (조건식) {                     ture일때 실행될 코드                 } - 중괄호 내의 코드가 한줄이라면 중괄호 생략 가능   : if (조건식) console.log('중괄호를 생략했습니다.'); -  조건이 false인 경우 형태     if (조건식) {           true일때 실행될 코드        } else {           foalse일때 실행될 코드        }  - 삼항연산자 = if-else를 간단하게 표현한 형태      조건식 ? 조건식이 참일 때 실행될 코드 : 조건식이 거짓일 때 실행될 코드      (하지만, 삼항연산자는 ..

구조 [함수 선언식] - 호이스팅function 함수이름(parameter1, parameter2....) {      return 반환값} 함수이름(argument1, argument2...) ➡️argument가 parameter값에 매치 되고 내부의 값들에 들어가게 된다.     그리고 return값으로 값이 나온다. 만약 return값이 없다면 함수가 동작은 하지만 값은 안나온다.     굳이 따지자면 parameter이 let과 같은 변수 이고 argument는 그에 입력되는 값이다. 구조 [함수 표현식] - 호이스팅에 영향Xlet 함수이름 = function () {         return 반환값  } 화살표 함수선언한 함수를 짧게 표현 가능 하다. function 함수(x, y) {   ..

변수?변할 수 있는 수/정보 변수는 선언, 할당, 사용 가능 하고 '변할 수 있는 수' 이므로 재할당 가능BUT! const는 상수로 한번 할당한 값을 바꿀 수 없어 변수 이름당 한번만 사용 가능var은 초기화 필요 없이 계속 재할당 가능let, const 블록레벨선언으로 코드 블록 밖에서 접근 불가, 재정의 불가 (const는 초기화 해야 재정의 가능)즉, var은 var a = 10;을 선언했어도 var a = 20;으로 바로 값을 바꿀 수가 있는데 그 과정중 var 변수가 필요 없다.하지만 let은 let이라는 블록이 있어야 할당 가능, const는 값을 아예 바꿀 수가 없으므로 이름을 새로 짓던지 아예 초기화 후 다시 할당 해야한다.+let name = '홍길동', name = '김세찌' ➡️ 로..

HTML, CSS를 프로그래밍적으로 제어할 수 있어 동적인 웹으로 변형가능하다.이를 위해 자바스크립트가 할 수 있는 것들은 1. 데이터 저장2. 값 계산3. 결과 반영 이러한 자바스크립트를 연결시키는 방법은 CSS와 비슷하다. 1. HTML 태그 내 삽입    hello2. script 태그 이용해 삽입    태그 제일 아래  또한 브라우저를 이용해 간단하게 프로그램 없이 연습해 볼 수 있다.브라우저 내에서 ctrl + shift + i/j 를 누르면 마우스 오른쪽 버튼의 검사창을 바로 띄울 수 있다.

코드잇이라는 사이트에도 무료 강의가 있길래 한번 들어보았다.초보강의까지는 다른 사이트처럼  무료인줄 알았는데 맛보기만 있어 아쉬웠지만 굉장히 쉽게 이해가 가능했다! 사실 진짜 어영부영 하고 수업도 제대로 못들어서 if에서 멈췄는데..if문 return까지 다른 사람에게 똑같이 설명 가능할 정도로 알았다! 정말 처음 접하고 쉬이입게 설명을 듣고 싶다면 좋은 강의인것 같다.숫자열(number) 정수 소수 문자열(string) "", '' 불린(boolean) ture/false 구체적인 정보 -> 필요한 해심 ; 추상화 책의 제목이나 줄거리 등 복잡한것을 목적에 맞게 단순화 하는 것 핵심은 확실히! 값의 이름 = 변수 활용 변수 : 값을 담기위한 상자 변수 선언 let 변수이름 = 3000; 오른 쪽의 값의..

Transform : 요소에 특정한 변형 효과를 제공                   요소를 2D또는 3D 공간에서 변형시키는데 사용                   주로 애니메이션과 인터랙티브 디자인에서 많이 사용 1. translate : X축과 Y축 방향으로 이동시키는데 사용 (기본적으로 X축은 오른쪽으로 Y축은 아래로 움직인다)                     -> 원래 위치를 기준으로 지정한 거리만큼 이동 가능                     + 2D 변형 : translate, 3D 변형 : translate3d or translatez.... translate(x, y): 요소를 X축과 Y축 방향으로 이동translateX(x): 요소를 X축 방향으로 이동translateY(y): 요..