SMALL
변수,
배열오브젝트,
연산자,
if 조건문,
for 반복문
DOM
변수 : 데이터 저장장소 이름
let 변수명 = 데이터; ---- 일반변수 (값 변경 가능)
const 변수명 = 데이터; ---- 상수변수 (값 변경 불가능)
----------------------------------권장.
var 변수명 = 데이터;
연산자
+
-
*
/
% (나머지)
= (대입연산자)
좌변에서 우변으로 읽기
2 / 5
2를 5로 나눠라
2 * 10
2 곱학기 10
A = B (우변의 값을 좌변에 대입하라)
B를 A에 넣어라.
let 변수명 = 데이터;
데이터
숫자,
문자
불린
null
undefined
-------------------
function
object
Array
숫자 1,2,3,4
문자 "문자" , '문자' , `문자`
Boolean : True, False
Array : 배열
//변수이름작명법
영소,대문자,숫자,한글가능
특수문자는 _, $ 만 사용
숫자는 첫글자로 오면 안됨
camelCase 작명법 권장
자바스크립트 예약어 사용불가
의미있는 작명하기
+ : 사칙연산 더하기 , 연결연산자로 사용 (데이터 타입이 다를경우)
1+1 --> 2
'hello' + 'world' = helloworld (연결)
'1' + 1 = 11
//배열 Array (복수의 데이터의 저장, 관리)
ex > let 월, 화, 수 요일 저장할 경우
let day1 = "월요일";
let day2 = "화요일";
~
let day3 = "일요일";
let day = [데이터,데이터,데이터,데이터,데이터,데이터,데이터]; 배열데이터 (복수의 데이터를 저장)
let day = ['월','화','수','목','금','토','일']; // 배열변수명
전체데이터 갯수 : length
데이터 번호는 0번 부터 시작.(인덱스)
day[인덱스번호]
day[0]
day[1]
day[2]
day[3]
day[4]
day[5]
day[6]
DOM(HTML문서)요소 가져오기
getElementById('아이디명')
getElementsByClassName('클래스명')
getElementByTagName('태그명')
querySelector('선택자이름')
querySeletorAll('선택자이름')
/////////////////////// if 조건문
조건설정 -> 조건이 참일때, 조건이 거짓일때 판별 -> 실행.
////////// 비교 , 논리 연결연산자
> 크다
< 작다
>= 크거나 같다
<= 작거나 같다
== 같다
=== 같다 (값, 데이터 유형도 같을때) 권장
!= 다르다
!== 다르다 (값, 데이터유형 )
논리연산자
&& 두개의 조건이 둘다 참일때 참 (and) 하나라도 거짓이 있으면 거짓
|| 두개의 조건중 하나만 참이여도 참 (or)
! 부정연산자 (값이 참이면 거짓, 값이 거짓이면 참) (not)
if 조건문
if( 조건 ) {
참 일때 실행코드
}
if ~ else 조건문
if( 조건 ) {
참일때 실행코드
}else {
거짓일때 실행코드
}
if ~ else if 조건문 (다중조건문)
if( 조건1 ) {
조건1이 참일때
} else if {
조건2가 참일때
} else {
모든조건이 거짓일때
}
/////////////////////// for 조건문
for(값;조건;증감식) {
실행코드
}
for (let i = 0; i < 10; i++){
실행코드
}
1) 값을 초기화
2) i는 현재 0
3) i가 10보다 작은지 검사
4) 코드실행
5) i++ 실행
위 과정을 계속적으로 반복
(조건이 거짓일때 for문을 종료)
// 복합대입연산자
= , 사칙연산자를 같이 사용
+=
-=
*=
/=
let a = 10;
a += 1; -------------> a = a + 1;
현재값에 우변의 값을 연산 후 좌변에 다시 대입.
[자바스크립트 변수선언 및 배열변수선언]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//변수선언
let age = 10;
const txt = "hello world";
console.log(age);
console.log(txt);
console.log(1+1);
console.log(100/5);
console.log(10%2);
console.log(3+(4*10));
console.log('당신의 나이는 '+ age +' 입니다')
// "" , '' 문자열 안에는 변수 넣을수 없음
console.log(`당신의 나이는 ${age}살입니다.`);
// `` -> 문자열과 변수를 같이 사용가능 , 변수는 ${변수명}울 넣어준다.
//console.log(`사용자 ${userid}님이 로그인 하셨습니다.`)
//배열변수선언
let ar = [11,22,33,44,55];
console.log(ar);
console.log(ar[0]);
console.log(ar.length);
//데이터의 세부속성접근.
//홍길동.키
//홍길동.몸무게
</script>
</body>
</html>
[자바스크립트 DOM]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<h1 id="tit1">title1</h1>
<h2>title1</h2>
<h3 class="tit3">title3</h3>
<h4 class="tit3">title4</h4>
<ul class="list">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
<script>
//칼라변수선언
const colors = ['red','blue','green','yellow','pink'];
let uwerIndex = 4;
//DOM요소 변수에 저장
//document = HTML문서
//getElementById('아이디값')
const tit1 = document.getElementById('tit1'); //단수 데이터
const tit2 = document.getElementsByTagName('h2'); //복수 데이터 , 배열처럼 취급
const tit3 = document.getElementsByClassName('tit3');
const list = document.querySelectorAll('.list li');
console.log(tit1);
console.log(tit2);
console.log(tit3);
console.log(list);
// 스타일적용
// object.style.스타일속성 = 값;
// 스타일속성 = camelCase 작성
tit1.style.backgroundColor = '#ffcc00';
tit2[0].style.backgroundColor = '#ff1100';
tit3[1].style.fontSize = '100px';
list[3].style.backgroundColor = colors[3];
list[uwerIndex].style.backgroundColor = colors[uwerIndex];
</script>
</html>
LIST
'프론트엔드 개발자 > JS' 카테고리의 다른 글
| 자바스크립트 javascript 3. 함수, 함수선언 , 매개변수 를 활용하여 이벤트 사용하기(2) 이벤트사용하기 (0) | 2023.03.31 |
|---|---|
| 자바스크립트 javascript 3. 함수, 함수선언 , 매개변수 를 활용하여 이벤트 사용하기(1) (0) | 2023.03.31 |
| 자바스크립트 javascript 2. 변수,배열오브젝트,연산자,if 조건문,for 반복문DOM(2) 반복문 , list요소 가져오기 (0) | 2023.03.31 |
| 자바스크립트 javascript 1. 변수선언과 스타일변경 (0) | 2023.03.31 |
| js 자바스크립트 경고창 띄우기 (0) | 2023.03.09 |
댓글