javascript
- cinfirm 문
사용자에게 두가지 중 하나를 선택하게 하는 조건문
confirm으로 쓸 수 있음. (확인, 취소)
confirm의 결과 값은 기본적으로 true라서
if문 쓸 때 ==true 등을 안써줘도 됨
예) let gender = confirm(); if(gender) {}
- 속성변경(숫자로)
Number() 함수는 ()안의 속성을 문자가 아닌 숫자로 바꿈
형변환 예시
let value = +prompt()하면 문자가 아닌 숫자로 인식한다
- 반올림 함수
Math.round() 소숫점을 반올림 해주는 함수
함수의 이름을 부를 때
Math.round()와 그냥 round()는 다른함수다.
- 반복문, for문
for(초기값; 조건; 증감) {반복코드}
break는 반복문을 멈춤
continue는 특정단계를 건너뛴다
- return
return 0;
return은 함수가 끝났다는 뜻이지만 써도되고 안써도 된다. return;만 써도된다.
- 문자를 나누는 태그
예).split('@') //문자를 @기준으로 나눠라
- 배열
배열은 []를 사용하고 인덱스(순서)는 0부터 시작한다.
함수는() {} 사용
- use 관련
'use script'; / 새로운 문법에 맞춰서 해석하겠다는 뜻.
script안에 적어주고 시작하기
'use strict'; / 변수 관계등을 엄격하게 확인하겠다는 뜻.
다른 사람이 쓰던거 수정해야 할때 등 사용
- javascript 기본 내용
자바스크립트를 사용할 때 마지막 문장끝에는 ';'를 붙여준다. 그래야 문장의 마지막이라는 표시다 (요즘은 안붙여도 되긴하는데 기본은 붙이기로 되어 있다.)
변수를 만들 때 규칙이 있다. 변수명의 첫자는 문자로 시작해야 하고 숫자를 사용할 수 있으며 '_'를 사용할 수 있다. 그 외의 특수문자는 사용하지 않는다.($는 다른 용도로 사용되는 경우가 있다)
- var, let, const 차이점★
변수에는 var, let, const가 사용되며 var, let에는 변경될 수 있는 값을 선언하고
const에는 변경되지 않는 값을 선언한다.
var은 변수를 중복해서 선언해도 문제가 없이 출력된다.
var name="aa";
var name="bb"; 등으로 해도 문제 없이 출력이 되는데
이런경우 코드량이 많아졌을 때 찾기 어렵고 오류 발생가능성이 크다.
따라서 let과 const 방식이 생겼다.
let과 const 방식은 기본적으로 var처럼 중복해서 선언할 수 없다.
단, let의 경우 name="cc";와 같이 재설정해줄 수 있고, const는 이러한 재설정도 할 수 없다.
- 호이스팅
hoisting // 변수의 선언을 최상단에 끌어올리는 것
var, let, const 모두 호이스팅은 된다
var나 let보단 const의 사용이 제일 낫다.
왜냐면 변수가 바뀔지도 모른다는 생각으로 코드를 읽기 어려워지기 때문이다.
- while 문★
while(조건){ 반복해야 하는 코드 if(거짓)break;}
while문 계속 반복하다가 break로 나감
- 전역변수와 지역변수★
전역변수에 let쓰고 지역변수에도 let쓰고
break로 나가주면 지역변수 변수값 소멸
함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다.
즉, 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다.
- javascript 적용 태그
body에 <script type="text/javascript"></script>
이거 써주면 단독으로 자바스크립트 사용가능
하지만 굳이 type="text/javascript를 전부 적어줄 필요는 없어보인다. 기본값으로 설정되어 있기 때문.
- 파라미터와 아규먼트
둘은 똑같아야 한다
let name = '홍길동';
function sayHello(demo) {
console.log(Hello ${demo})
}
sayHello(name);마지막 name의 값이 홍길동이고. 홍길동이 파라미터에 들어가니까 아규먼트값인 홍길동이 나와서 홍길동으로 출력되는 것
만약 마지막 sayHello('name'); 이거면 name이 출력된다
- 함수를 변수에 넣기
function sum() { console.log('hello world') }
let result = sum; //함수 sum을 변수에 넣는건데 이때는 sum()을 안줘도 됨
result(); //단 이때는 함수를 부르는거라서 ()적어줘야 한다
- 사용자 지정 함수★
()=>{} 사용자 지정 함수 만드는 방법
let age = prompt('연령을 입력하세요');
let welcome = (age>18)?
()=>{console.log('성인')} : //한줄이라 {}빼도 됨
()=>{console.log('미성년')}
welcome();- 삼항연산자
(조건)? 만족 : 불만족 //조건이 맞느냐? 맞으면 만족 함수, 틀리면 불만족 함수출력
- in, of ★
let fun = ['❤', '😊', '💕', '✌', '🙌', '🐱💻', '💋', '🎁', '🤦♀️', '🤷♂️', '😁'];
for(x in fun){
console.log(fun[x])
}x in fun // 변수 fun에서 하나씩 가져오라는 뜻 순서를 가지고 있음
x of fun//변수 fun에 있는거 전부 가져옴 fun안에 있는 값을 x가 가지고 있는것 이때 console.log(x)로 해줘야함
for in , for of의 차이
fot in은 객체 순환, for of은 배열 값 순환에 쓰인다.
따라서 {} 로 묶인 객체의 경우 for in만 사용가능
[]로 묶인 배열의 형태는 for of 사용 가능, for in도 사용 가능은 하다
왜냐면 배열도 객체기 때문, 단, 값은 인덱스의 형태로 나온다
- getElelment ★
getElementById()
요소를 가져오는데 id를 가지고 가져온다 (id는 유일해서 Element)
getElementsByTagName() getElementsByClassName()
TagName, ClassName여러개일 수 있어서 Elements
이름적을 때 대소문자 구분필요함(첫글자는 소문자, 단어처음 대문자)
- querySelector★
querySelector()
getElementById()
이 둘의 차이
전자는 ()안에 ul > li등 정확히 입력해야한다.
후자는 id 명만 치면 된다.
querySelector() //()안에 해당하는 것들중 첫번째 것 하나만 가져옴
querySelectorAll() // ()안에 해당하는 모든 것을 가져옴
()안에 들어갈 것 예).class 명
- getElementsByClassName()★
document.getElementsByClassName() 은 배열을 가지고 온다.
따라서 이것에 addEventListener를 해주려면 배열의 형태로 줘야지 적용이 된다.
예) acc[0].addEventListener('click', myF)
내가 원했던 부분은 acc.addEventListener('click', myF) 를 하고 밑에서 for of로 적용해보려고 한것이었는데
document.getElementsByClassName()의 경우 배열로 써야 하기 때문에 어려움이 있었다
- .innerHTML 의미 ★
예)<div id="demo">내용</div>
document.getElementById('demo').innerHTML;
//id가 demo인것의 내부내용까지 불러와라라는 의미. 즉 '내용'을 불러오라는 것. 만약에 내용이라고 적은곳이 빈칸이면 아무런 내용이 없는 채로 불러오는것 그 안의 내용을 다른것으로 채울 수 있음
예)document.getElementById('demo').innerHTML= '내용' (문자, 배열 등등등)
단, 이를 출력하라는 말은 없어서 별다른 내용은 없음
.innerHTML은 태그까지 인식하고 .innerText는 문자만 인식한다
- javascript 적용 위치관련★
html 아래에서 적용 시키는 경우 로딩이 느려질 가능성이 있다.
따라서 head안에서 적용을 시키는데 script안에 defer혹은 async을 넣어준다.
예)<script>내용 </script>이 head안에 쓰인 경우 js내용을 다 하고나서 body내용 등이 진행이 된다. 만약에 js내용중에 body내용을 이용한 것이 있으면 문제가 생길 수 있다. 이경우 <script>내용 </script>를 맨 밑으로 내리는 방법을 쓸 수도 있긴 하다. 그러나 느려질 수 있기 때문에 defer와 async 등의 내용을 <script>내용 </script>에 적어주는 것이다
- prompt태그
let userName=prompt('성함을 입력하세요', '홍길동')
//사용자가 적으라는 창을 띄움, 예시 홍길동을 넣어줌
- 검색 태그
lastindexOf('a') 인경우 마지막 'a'를 오른쪽부터 검색해서 일치하는 index번호를 반환하라는 뜻 주의 index번호는 여전히 왼쪽부터 계산해야 한다. 다만 오른쪽에서 더 가깝거나 할 때 사용하는 것이다.
- css와 javascript 차이
<style>에서는 background-color <script> 에서는 backgroundColor
- 배열을 만드는 함수
let arr2 = new Array(); 이렇게 되면 arr2는 일단 배열이 된거임
new Array()가 배열을 만드는 함수
- 각종 함수★
window.onload = function() {} 이 순서 구조를 익힐 것
getBoundingClient() 하기전에 document.getElementById('')를 먼저할 것
addEventListener()순서 함수선언 하는 순서 익힐 것
예) function myF() {함수 내용}
이때 ()안에 event를 넣고 함수내용에 this를 써도 동작하였음
getBoundingClientRect() // 엘리먼트의 위치 알아내는 함수
getBoundingClientRect().x // 위치 중에서 x값만 나옴 함수
offsetTop 위에서부터 얼마나 떨어져있는지 알려달라는 함수
addEventListener('동작',함수이름) // 다양한 이벤트(동작)을 하면 어떤 함수를 실행하라는 함수
- switch문★
switch() {case 내용 : ~~ break; default : } 등 순서 익힐 것
switch(조건) {case 값A : 값이 A일 때 명령문 break; ... dafault : 위의 값이 모두 아닐 때 명령문} // A가 맞으면 나감.
- 스크롤
스크롤은 document가 아닌 window에 붙는다.
(안쪽이 아닌 바깥쪽에 스크롤이 붙는다고 생각하면 됨)
예)window.addEventListener('scroll',function(){console.log('scrolled')})
.scrollX , .scrollY 화면 스크롤을 얼마나 했는지 알려주는 함수
.scrollLeft , .scrollTop //스크롤이 얼마나 되는지 알고싶을 때 사용
- documentElement
document.documentElement // '문서'안에 있는 documentElement(body) body의~ 라는 뜻
- 인접한 코드에 변경
.nextElementSibling // css에서의 +와 비슷한 기능, 바로 인접한 코드에 변경을 가할 때 사용
- target과 currentTarget
target은 event 대상을, currentTarget은 eventListener를 가리킴
- 배열을 문자열로 변환하는 부분
.replace(/,/g,"")
/,/,g,"" 뜻 ,를 찾아서 공백으로 바꾸라는 뜻
- 이벤트 버블링
자바스크립트에는 이벤트 전파라는 것이 있다. 이름에서 알 수 있듯이 이벤트가 그 부모요소까지 계속 발생한다는 것이다. html은 계층적 구조를 따르기 때문에 자식요소에서 발생한 이벤트가 연속해서 부모요소의 이벤트로 이어지는 것이다.
자식들 각각에 이벤트를 부여하기 어려우니 부모에 적용한다.
