형변환
parselnt(문자); // 문사를 정수형 숫자로 변환해줌
parseFloat(문자); // 문자를 실수형 숫자로 변환
Nember(문자); // 문자를 정수&실수형 숫자로 변환해줌
String(숫자); // 숫자를 문자로 변환해줌
숫자.toString(진법); // 숫자를 문자로 변환해줌 - 진법을 바꿀 수 있음
숫자.toFixed(소수자리수); // 숫자를 문자로 변환해줌 - 실수형의 소수점자리를 지정할 수 있음
숫자 + "문자열"; // 숫자와 문자열을 한 문자열로 더해줌
변수
var -> 함수 스코프 (지역변수로 사용이 가능함)
let
const
데이터를 저장하기위한 공간을 만듬
var, let / 변수를 선언한다.
할당하다 - 값을 넣어준다. '='할당연산자. 우항의 연산자를 좌항으로 넣어준다.
const
1. 변수를 선언할때 할당해주어야 한다.
선언만하게 되면 에러가 발생하기에 선언과 동시에 값을 넣어줘야함.
한번 값을 넣으면 값을 변경할 수 없다.
전역변수 / 블럭밖에서 선언한 변수를 블럭 내에서도 사용 가능함.
지역변수 / 블럭내에서 선언한 변수는 블럭 내에서만 사용이 가능함
자바스크립트는 순서대로 내려오면서 코드가 실행되지만 var로 변수 선언시
자바스크립트가 동작하는순간 var의 변수의 선언을 시행하고 동작된다.(값은 가져오지 않음)
자료형
숫자형 (number)
let num = 12;
문자형 (string)
let str = 'abc'; " " ' ' ` ` 다 사용가능
불린형 (boolean)
true / false
null 비어있는 값
undefined 값을 넣지않아 할당되지 않았다.
object 객체타입
typeof() / 어떤 타입인지 확인할 수 있다.
let num = '123'
typeof(num) -> string
Number("10") - > 문자열을 숫자열으로 변환시켜줌
Number("여러분") -> NaN
함수
add(10,5) // 위에 적어도 호이스팅되서 계산이 가능함
function add(a,b) {
let result = a + b ;
return result;
}
함수표현식
let myFunction = function(){
alert('abc');
}
myFunction();
화살표 함수
let myFunction = () => { alert('abc'); }
function printMsg(from, message = '안녕'){
consol.logo('메세지를 보낸사람은'+from+'이고 내용은'+message+'입니다.');
}
printMsg('영희','여러분');
* 호이스팅, 스코프, 매개변수, 변수, 함수, 지역변수, 전역변수, 함수선언문 ,함수표현식, 리턴, undefined, NaN, Number('10'), typeof x
innerHTML
선택한 요소의 내용을 반환하거나 변경
src
선택한 이미지 요소의 src속성값을 반환하거나 변경
자바스크립트를 이용해서 css스타일을 변경하기
object.style.color = 'red';
선택한 요소의 src속성값을 반환
1. style.속성명 ( 인라인 스타일로 작성 된 값만 반환)
2. window.getComputedStyle(선택한요소).getPropertyValue('스타일 속성명') 모든 값을 다가져온 후 필요한 속성을 확인가능
(내부스타일 속성값을 반환
<div class="on"></div>
자바스크립트에서 요소의 클래스를 붙이기 / 삭제하기
object.classList.add('클래스명')
object.classList.remove('클래스명')
object.classList.toggle('클래스명') 붙어있다면 제거 안붙어있다면 삽입
'프론트앤드 수업' 카테고리의 다른 글
자바스크립트 형변환, 비교,논리연산자 (0) | 2022.04.27 |
---|---|
자바스크립트 클릭이벤트로 class넣어서 호출하기 (0) | 2022.04.26 |
자바스크립트 기초 (0) | 2022.04.25 |
[SCSS] 사용방법 (0) | 2022.04.25 |
[CSS] position, flex, media (0) | 2022.04.25 |