본문 바로가기

나의 FE피봇이야기/Javascript

(63)
Framework and Library framework : 도구를 사용하기 위한 환경 -설치 기본 코드를 작성하면 코드를 작성하면 브라우져가 변환 **convert, encoding => 컴파일러 by C or Java library : 이미 만들어진 기능 자바스크립트 라리브러리 참고 https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC_%EB%AA%A9%EB%A1%9D
[nodelist]for문을 통해서 childern 값 변경하기 for ( let item = 0 ; item < $navTexts.length; item +=1){ 조건식 } for문을 돌리는 것은 nodelist에 있는 것으로서 for( var item = 0; item
JavaScript 오류 JavaScript 오류 1. JavaScript는 오류가 발생하면 일반적으로 중지되고 오류 메시지 생성 2. 기술 용어 : JavaScript will throw an exception(thorw an error) 3. name & message 속성을 가진 Error 객체 생성 - 이름 : 오류 이름을 설정하거나 반환 - 메세지 : 오류 메시지(문자열)를 설정하거나 반환 오류 유형 1. ReferenceError(잘못된 참조) : 선언되지 않는 변수를 사용(참조)하는 경우 발생 let x = 5; x= y+1; 2. SyntaxError(구문 오류) : 구문 오류가 있는 코드를 평가하려고 할때 발생 eval("alert('Hello')") 3. TypeError(유형 오류) : 예상 유형 범위를 벗어..
[Javascript] 문자열 및 문자 추출 javascript 문자열 1. 텍스트를 저장하고 조작하기 위한 자료형 2. 따옴표 안에 쓰여진 0개 이상의 문자 ex. let txt = "Hong Gildong"; let txt = 'Hong Gildong'; 3. 문자열을 둘러싼 다옴표와 일치하지 않으면 문자열 내에서 따옴표 사용 가능 let txt1 = "lt's alright"; let txt2 = "He is called 'Robin Hood'"; let txt3 = 'He is called "Robin Hood"'; lenth: 문자열 길이 1. 문자열의 길이 - let txt = "ABCDEG" - let length = txt.length; escape 문자 1. 백슬러시(\) 사용 2. 특수 문자를 문자열 문자로 변환 Code \' :..
[splice] splice(index, how many, exchange) splice(1 ) index 뒤로 다 지워 splice(1, 0, "ee", "ff"); 중간에 요소 추가 splice(1, 1, "ee") 중간 요소 수정 splice(1, 2, "ee", "ff") 중간 요소 여러개 수정
객체 객체 1. 여러 개의 값을 가지는 자료구조 2. 값은 이름 : 값 쌍으로 기록 => {key, property, name etc : value} 3. 일반적으로 const로 선언 정의 1. 객체 리터럴을 사용하여 정의 - const person = {firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue"}; 2. 공백, 줄바꿈 무관 3. 여러 줄에 걸쳐 객체 정의 가능 - const person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue", }; 객체 생성자 1. 생성자 함수의 이름 첫 글자는 가급적 대문자 지정 (below the 'this' is to Pers..
[addEventListner] 특징 1. 1개 이상을 사용할 수 있다. 2. event.target 3. bubble event(phase) - capturing phase (html > body > grandparent > parent > child) : outside to in - bubbling phase (child > paraent >grandparent > body > html) : inside to out 4. removeEventListner => closet('') bc of working out the HTML hierarchy onclick vs addEventListner onclick : 마지막 등록된 핸들러만 실행 addEventListner: 1개 이상의 핸들러 '동시' 실행 가능 $button.addEve..
[Javascript] 변수선언, 함수, 생성자, 매서드 등 확인하는 방법 함수 작동 원리 hosting environmentRecord는 현재 실행될 컨텍스트의 대상 코드 내에 어떤 식별자들이 있는지에만 관심이 있고, 각 식별자에 어떤 값이 할당될 것인지 관심없음. (단 변수는 선언부와 할당부에서 선언부만 반면, 함수 선언은 함수 전체를) 1. 변수망 끌어올려 주솟값 배정(할당) 2. 할당 처리 X 함수 선언문은 함수명으로 선언한 변수에 함수를 할당 명칭 예시 변수 (var / let / const) aaa string, value "aaa" 함수 aaa( ) method(메소드) _____.write( ) (거의)객체 :생성자 함수 Aaa( ) property(속성) _____.scr = _____.scr = : property(속성) _____.write( ) : meth..
함수 정의 및 선언문 작성 그리고 event&event handler 1. 변수 선언문 => (var / let / const) aaa => 변수 2. 함수 선언문(명령어) => function Function'Name ( parameter ) Function'Name(Optinal) 이름은 구분을 위한 것이기 때문에 구분이 필요 없을시 삭제 가능 - 자동으로 실행 안됨(호출 시에만) 함수 1. 내장함수 : 만들어져 있는 명령어 => redefine HTML Tag 2. 사용자 정의 함수 : 만들어서 사용하는 명령어 함수 : aa( ) 메서드 : ____.aa( ) 2. 사용자 정의 함수 2-1) 사용자가 임의로 생성한 함수 2-2) 선언문 : function 2-3) function 함수명( 매개변수, 매개변수,...){ 선언문; 선언문; } let saveFunc = ..
HTML과 JavaScript 차이점 2개 1. 연산 능력이 있다. 2. 상호 작용이 있다. 단 조건이 필요 => 조건1 function (함수) => 조건2 event
[JS] 대입 연산자의 활용 '지역변수 -> 전역변수' 대입 연산자 += =>함수, for 등 안, 다시 말해 지역변수에 내용을 저장하여 전역변수에서 사용하고 싶을때, 대입 연산자를 활용하여 변수에 저장한다. 1. itemList를 선언 하지 않았을 때 2. itemList를 for { } '안'에 선언 했을 때 3. itemList를 for { } '밖'에 선언 했을 때
[Swiper]swiper 라이브러시 사용시 시행착오 이제 막 Front-End쪽으로 이동을 하다보니 너무나 당연한 사소한 것들부터 시행착오가 있었다. 그것은 바로 Javascript는 DOM이 완성되어야만 작동한다는 것 DOM => Javascript 실행 가능 상태 if Javascript 가 html에 중간에 있다면 DOM이 완성된 이후에 실행 할 수 있도록 설정을 변경 해줘야 한다. 1) 실행하고 하는 html tags 뒤 2) javascript에 DOM 완성 이후로 code 작성 https://swiperjs.com/get-started#use-swiper-from-cdn
[JS]if문 중첩 제거 from zeroCho 중첩 제거 1. if 문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다. 2. 분기점에서 짧은 절차부터 실행하기 if문을 작성한다. 3. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for문 내부의 경우)로 중단한다. 4. else 를 제거한다( 이때 중첩 하나가 제거된다.) 출처 https://www.youtube.com/watch?v=NUOPdY14JKo&list=PLcqDmjxt30RvEEN6eUCcSrrH-hKjCT4wt&index=45
[JS]변수 이야기 제로조 유트브님의 영상을 정리한 내용입니다. (업데이트 : 20223.09.23) https://www.youtube.com/watch?v=LgYyP1PmKR0 프로그램 정의 뜻 let, var 변수 어떤 관계나 범위 안에서 여러 가지 값으로 변할 수 있는 수. conts 상수 변하지 아니하는 일정한 값을 가진 수나 양. 변수 - 선언, 선언문, 선언과 동시에 초기화 했다. 역할 console.log( ) => 화면에 그리는 역할 >>> undefined 변수 선언문자 'sting' => 값을 돌려주는 역할 >>> 메모리에 저장된 값 반환 > let change = "바꿔 봐"; change = '바꿨다'; < "바꿨다" 이는 let 의 역할 때문에 차이가 난다. let이 없을 ..
[JS] class 상속과 super ※이 자료는 생활코딩 영상을 보고 개인의 생각과 가미하여 작성한 글입니다.(업데이트 : 2023.09.16) 상속 : extends 상속은 새로 만든 class에 extends '기존 class'를 불러는 과정이다. 사용하는 이유는 새로운 method를 추가하고 싶은데 활용한다. 물론 기존 class를 수정해도 되지만 1) 내가 접근할 수 없거나, 2) 라이브러리가 업데이트 되면 내가 수정한 코드가 사라질 수 있다. 부모 바라봐 : super super는 코드를 단순화 하기 위한 방법으로 사용되는 함수로써(?) 부모(기존 class)를 불러와 코드를 작성한다. 나아가 나만(새롭게 만든 class) 가지고 있는 method 등을 작성할 수 있게 된다. class PersonPlus extends Perso..
[JS]ES6에 들어간 Class : 이전엔 prototype ES6에 들어간 class 를 확인해 보려고 한다. ※이 자료는 생활코딩의 영상을 보고 개인이 작성한 글입니다.(업데이트 : 2023.09.16) ES6이전와 이후로 코딩 작성 방법을 비교해보면 좋을꺼 같다. ES6 이전 ES6 이후 prototype class ES6 이전 : prototype 역시나 tistoryd에서 제공하는 '코드블럭' 기능이 안되서 사진을 활용하겠다. A : console.log('kim.sum()', kim.sum()); 1. New를 통해 새로운 객체 및 속성값 기본 세팅(name, first, second)을 한다 2. kim.sum을 통해서 sum이라는 method를 호출 한다. 여기 있는 kim object에서 sum이라는 method를 호출할때, 제일 먼저 그 객체 자..
[JS]매개변수와 인수 매개변수(parameter)는 함수 안에서의 정의 및 사용에 나열되어 있는 변수들을 의미 전달 인자(argument)는 함수를 호출할 때 전달되는 실제 값을 의미
[JS]선언과 함수의 이해 이 글은 드림코딩 영상을 보고 작성된 글입니다. 선언과 함수에 대한 전체 과정 : 선언 -> 호출 1. 우리가 어떤 값을 반을 건지 인자들 정의 2. 코드 블록 작성 ( curly brackets 안에 내용을 코드 블록이라 지칭 => { '코드블록' }) 단, 선언만으로 한다고 함수호출이 자동적으로 되는 것은 아님) 3. 함수이름 옆 '( )' 안에 정의된 인자값(1 번에서 작성한 내용) 호출 (※ 함수의 이름 자체는 함수를 가르키는 (add)함수자체가 된다. 즉 ()를 쓰지 않고 함수이름만 다른 함수 인자로 전달 또는 다른 변수에 할당하게 되면 함수 자체를 가르키게 됨.) 코드 블럭 삽입이 안 먹어서 이미지로 활용 선언(1~2) 빨간 박스 : 인자들 함수 호출(3번) 다른 예시 1번 화살표의 방향은 "..
[JS]function 안 this의 History? JS에서 function이 타입인지를 확인하여 현 this.명사 사용에서 this가 가르치는 의미를 알아보려고 한다. 이와같은 자료는 '드림코딩' 채널을 통해서 작성해 보았다. ※이와 같은 function 회기 아이디어는 전적으로 개인적인 생각을 바탕으로 구성되었기 때문에 참고로만 활용하기 바란다. 초기 function const person = makePerson('ellie', 30) // 아마도 초기 ES의 function은 아래와 같지 않았을까? function makePerson(name, age){ return { name : name, age : age, }; } 중기 function - 초기에서 key와 value의 명칭이 동일하다면 shorthand 원칙에 따라 아래와 같이 축약 func..
[JS]data type 별 Memory 할당 그리고 reference의미 Primitive data type, Special data types and Non-Primitive data types (new in ECMAScript 2015) Primitive data types number, string, boolean, null, undefined, symbol Special data types undefined, null Non-Primitive data types array, object, function, data, regex etc 변수 = 담다 = Container 변수를 선언하면 computer's memory에 선언 변수 공간 생김(할당) -> Memory에 특정 양 bite 공간 확보 변수를 할당할 때 복사할 변수긔 값을 그대로 복사(Object의 경우 ref..