Javascript는 객체 기반의 스크립트 프로그래밍 언어로, 웹 브라우저 내에서 주로 사용된다.
객체? 어떠한 대상의 속성을 나타내는 데이터이다.
회원 = {'이름': '김민수', '나이': 35, '직업': '백엔드 개발자'}
회원은 객체이고 객체는 속성을 나타내는 요소를 가지고 있다.
- HTML(Hypertext markup language) - 콘텐츠를 작성하는 역할, 구조를 잡는 역할
- CSS(Cascading style sheets) - HTML에 디자인을 주는 역할(폰트 색상, 크기 등)
- Javascript - 사용자와 상호작용 기능 구현
F12(개발자도구) - Console 창에서 순서대로 해 보기.
let num → 변수 선언
num = 28 → 변수에 데이터 저장하기
let num = 28 → 선언과 동시에 데이터 저장하기
num → 변수에 있는 데이터 불러오기
console.log(num) → 저장된 값 출력하기
● 데이터 유형
- 숫자: 예) 10, 20, 30...
- 문자열: 예) '회원', 'number', '10', '28'
- Boolean형: True/False
- 배열: 여러 개의 데이터를 변수와 순서로 관리하는 데이터 유형. []를 사용하여 배열 표현. 예) let names = ['Kim', 'Lee', 'Park'] → 배열 선언
- let names = ['Kim', 'Lee', 'Park'] → 배열 선언
- names.push('Han') → 배열 요소 추가
- names[0] → 인덱스 0의 요소 값 가져오기
- names.length → 배열의 길이(개수) 가져오기
- 객체: key: value로 이루어진 데이터. {}를 사용하여 객체를 표현.
- let member = {'name': 'Kim', 'age': 25, 'city': 'Seoul'} → 객체 선언 및 저장
- member['job'] = 'student' → 객체 요소 추가
- member['city'] 입력 시 'Seoul' 값 반환 → 객체 요소 값 불러오기
- 배열과 객체 함께 쓰기
let member = [{'name': 'Kim', 'age': 25, 'city': 'Seoul'}, {'name': 'Park', 'age': 30, 'city': 'Icheon'}]
- 배열에 객체 요소 추가하기
member.push({'name': 'Woo', 'age': 33, 'city': 'Anyang'})
● 함수 만들기
function 함수이름(변수){
명령문
return;
}
*이렇게 만든 함수를 실행하는 것 → "함수를 호출한다"고 함.
● 함수 예약어
function 함수이름(){
명령문
return;
}
● 외부에서 데이터 받기
함수 내부로 외부의 데이터를 받고 싶을 때 사용.
function test(a){
console.log(a);
return;
}
test("hello, world")로 실행하면 "hello, world"가 변수 a에 저장돼서 출력된다.
--> hello, world
● 외부로 데이터 주기
함수 내부에서 외부로 데이터를 주고 싶을 때 사용.
function test(a){
return a*2
}
let result = test(1)
--> 최종적으로 result에 2가 저장됨
● 조건문
if(a>5){ <-----------조건문. 조건이 성립하면(true) 아래 명령 실행
명령문
}
if(a>5){ <-------------조건문. 조건이 성립하면(true) 아래 명령 실행
명령문
} else{ <--------------위의 조건이 성립하지 않으면(false) 아래 명령 실행
명령문
}
● 조건문에는 &&(and)와 ||(or)조건을 작성할 수 있다.
ex) function BGrade(person){
if(person['score'] >= 80 && person['score']< 90){
return true;
} else{
return false;
}
}
let person = {'name': 'Park', 'score': 82}
result = BGrade(person)
console.log(result) --> 조건에 부합하므로 True가 반환된다.
● 조건문에 else if 쓰기
ex) function checkGrade(){
if(score > 90){
alert('A')
} else if(score >=80){
alert('B')
} else if(score >=70){
alert('C')
} else {
alert('F')
}
}
let score = 95;
checkGrade(score); --> A 알림창 뜸.
● 반복문
ex) for (let i = 0; i<100; i++){ <---- () 안에 반복 조건을 넣고
console.log(i); <------{}안에 명령문을 넣는다
}
이제 HTML 파일 안에 자바스크립트를 써 보자. HTML에서 <body> 안에서 가장 아래 부분에 <script> 태그를 열어서 자바스크립트를 작성한다.
CSS와 마찬가지로 파일로 분리시켜서 <script src="파일이름.js"></script>로 넣어줄 수도 있다.
● HTML 요소 불러오기
자바스크립트에 HTML 요소를 불러오기 위해서는 요소들을 변수 안에 넣어야 한다.
<body>
<h1>Nice to meet you</h1>
<p class="clas">This is blog</p>
<p class="clas">awesome</p>
<script>
let h1Elements = document.getElementsByTagName('h1')
let pElements = document.getElementsByClassName('clas')
---> 모든 h1을 불러와서 배열 형태로 저장한다.
클래스나 아이디로 불러올 수도 있다. 출력시 다음과 같이 인덱스 값을 써 준다.
console.log(h1Elements[0], pElements[1])
</script>
● HTML 요소 값 출력하기
<body>
<h1>Nice to meet you</h1>
<p class="clas">This is blog</p>
<p class="clas">awesome</p>
<script>
let h1Elements = document.getElementsByTagName('h1')
let pElements = document.getElementsByClassName('clas')
console.log(h1Elements.innerHTML)
console.log(getComputedStyle(h1Elements).color)
</script>
</body>
● HTML 요소 값 변경하기
<body>
<h1>Nice to meet you</h1>
<p class="clas">This is blog</p>
<p class="clas">awesome</p>
<script>
let h1Elements = document.getElementsByTagName('h1')
h1Elements.innerText = "만나서 반갑습니다"
</script>
</body>
● HTML 요소 CSS 변경하기
<body>
<h1>Nice to meet you</h1>
<p class="clas">This is blog</p>
<p class="clas">awesome</p>
<script>
let h1Elements = document.getElementsByTagName('h1')
h1Elements.style.color = 'green'
h1Elements.style.cssText = 'background-color:green; font-size:20px;'
</script>
</body>
● HTML 요소 추가하기
<body>
<h1>Nice to meet you</h1>
<p class="clas">This is blog</p>
<p class="clas">awesome</p>
<script>
let h1Elements = document.getElementsByTagName('h1')
h1Elements.inerHTML = <p>안녕하세요</p>
</script>
</body>
● HTML 요소 삭제하기
<body>
<h1>Nice to meet you</h1>
<p class="clas">This is blog</p>
<p class="clas">awesome</p>
<script>
let h1Elements = document.getElementsByTagName('h1')
h1Elements.remove()
</script>
</body>
자, 이제 자바스크립트를 사용해서 HTML과 CSS를 다룰 수 있게 됐다. 짝짝
'MS AI School' 카테고리의 다른 글
| Day 7 - JQUERY 사용하기(1) (0) | 2022.10.20 |
|---|---|
| DAY 6 - JAVASCRIPT 자바스크립트 이벤트 다루기(click, resize) (0) | 2022.10.13 |
| DAY 4 - CSS 심화 공부(레이아웃, 반응형) (0) | 2022.10.11 |
| DAY 3 - CSS기초 박스모델 공부 (0) | 2022.10.11 |
| DAY 2 - CSS를 배워보자 (0) | 2022.10.09 |