221109 JavaScript - form을 이용한 이벤트활용

오늘 내가 배운 것 1. script 태그 2. 이벤트 3. Element 생성 1. script 태그 javascript 파일을 외부 파일로 적용시켜서 사용하게 된다면 를 넣어주여야 하는데 첨부하는 위치에 따라서 자바스크립트를 읽는 시간과 렌더 영역에 보이는 시간이 달라진다. 에 넣는 경우 웹페이지를 열어 html파일을 읽을 때 제일 위에서 코드가 실행되면서 내려오다가 `script` 태그를 만나게 되면 실행되던 html이 멈추고 javascript 파일을 다운받은 뒤 실행시키고 나서 그 뒤 남은 html을 실행시키게 된다. js 파일을 다운받기 위해서 멈춰 있는 시간 때문에 사용자가 그 사이트를 이탈할 수 있다. 사용자가 웹사이트가 열리기까지 3초가 넘으면 그 사이트의 이탈자가 많다는 통계가 있다. ..

• format_list_bulleted TIL(Today I Learned)
• · 2022. 11. 10.
• textsms

JavaScript - 배열 기초

배열 같은 성향의 변수를 한 곳에 몰아 놓고 필요한 데이터를 쓴다. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수 있다. 배열 생성하기 "변수 변수명 = [] " 으로 대괄호로 요소들을 감싼다. ex ) let arr = [1,2,3,4 ] 배열 요소 호출 하기 "변수명[인덱스번호]"로 호출한다. 배열의 인덱스는 0부터 시작한다. (인덱스는 배열의 요소가 들어 있는 데이터 박스의 번호라고 생각하면 좋다..) ex) 위 예시를 그대로 사용했을 때, arr[1] .... 2 배열의 총 길이 (배열 안에 요소의 개수) 구하기 " 변수명.length " 로 구할 수 있다. length를 사용하면 유동적인 배열(변화가 있을 경우)에도 대처가 쉽다. ex ) a..

• format_list_bulleted JavaScript
• · 2022. 10. 31.
• textsms

JavaScript - 조건문 if문 와 반복문 for문

자바스크립트 조건문 if문 조건문은 "조건이 참이면 ~을 하고, 거짓이면 ~을 한다. "이다. 그래서 True와 False을 바탕으로 한다. // 기본 문법 // if(bloolean 타입){ //true일 때 실행되는 영역 } else { //false일 때 실행되는 영역 (생략가능, 생략할 때 결과 값이 false 시 출력 값 없음.) } ( ) 부분 안에 조건식을 정확하게 판단하고 작성해야 if 조건문을 잘 활용할 수 있다. 조건식은 boolean 타입으로 참인지 거짓인지 결과가 나올 수 있도록 작성해야 한다. 자바스크립트 반복문 for문 반복문은 조건문 if문과 비슷한 형태를 이루고, if 대신 for 을 사용한다. 조건문의 조건식이 들어간 괄호 '( )' 안에는 3가지의 값이 들어간다. 1. 초..

• format_list_bulleted JavaScript
• · 2022. 10. 30.
• textsms

JavaScript - 변수와 상수, 호이스팅

예약어 : 이미 쓰임이 정해져 있는 키워드를 의미한다. 이 예약어는 변수명으로 사용할 수 없고 변수의 예약어는 var, let가 있고, 상수의 예약어로는 const가 있다. 변수의 var는 hoisting (호이스팅) 이라는 이슈가 있어서 쓰이지 않는다.. (호이스팅은 밑에..!) 그러므로 let(변수) 과 const(상수)를 사용한다. 선언 방법 예약어[let, const] 변수명[개발자 임의] = [데이터 값] 예약어와 변수명 사이는 띄어쓰기로 구분한다. 변수 : let 재선언 X , 재할당 O let number //선언 number = 1 //할당 console.log(number) //출력 //let number // 불가 number = 10 //재할당 console.log(number) 상수..

• format_list_bulleted JavaScript
• · 2022. 10. 28.
• textsms

[유튜브 '드림코딩'] 자바스크립트(JavaScript ES6) 9강 (1)

배열 함수, Array APIs, join, split, reverse, slice 오늘 내가 배운 것 .join() //join(separator?) 배열에 있는 모든 데이터를 더해서 string으로 리턴해준다. 기본은 쉼표(,)로 구분된다. (선택) separator : string Ex ) .join(’|’); .split() //split(separator, limit?) string을 배열로 바꿔 준다. limit 는 string이 여러 개로 있을 때 지정한 값까지만 배열로 바꿔 준다. (필수) separator : string (선택) limit : number .reverse() //reverse() 배열의 순서를 거꾸로 한다. 리턴 값만 순서가 바뀌는 게 아니라 배열 자체도 순서가 바뀐다...

• format_list_bulleted TIL(Today I Learned)
• · 2022. 10. 10.
• textsms

[유튜브 '드림코딩'] 자바스크립트(JavaScript ES6) 8강 (1)

배열 Array 오늘 내가 배운 것 배열의 선언 방법 1. new 키워드를 이용하는 방법 2. 대괄호 [ ]안에 데이터를 넣는 방법 배열에서 대괄호를 이용해서 데이터로 접근이 가능하다. fruits[ ] 오브젝트에서도 [‘key’] 를 쓰면 그 key에 상응하는 value 의 값을 얻을 수 있었다. 비슷하게 배열에서는 fruits[index] 를 사용하면 그 index에 해당하는 value를 얻을 수 있다. 할당되어 있지 않은 index를 이용하여 접근하게 되면 undefined 으로 출력된다. 보통 배열의 처음은 0으로 작성하고 배열의 마지막은 [배열.length - 1] 로 작성한다. Ex) console.log(fruits[0]); console.log(fruits[fruits.length - 1 ..

• format_list_bulleted TIL(Today I Learned)
• · 2022. 10. 7.
• textsms