Javascript를 쓰는 이유 : 웹을 동적으로 구현하기 위해 사용 -> 웹페이지에서 사용자의 입력에 따라 이벤트를 만들거나 특정 내용을 출력한다.
웹에서는 <head>안에 <script>를 넣어서 사용한다.
1. 변수선언 및 출력
var : 전역 또는 함수 지역변수로 선언한다.
let : 변수가 선언된 구역 또는 표현식에서만 유효한 변수를 선언한다.
let a = "hello"; -> a라는 변수 안에 hello라는 값을 담았다.
console.log(a) -> a라는 변수 안에 담긴 값을 출력한다.
2. 리스트와 딕셔너리
리스트
let b = ['사과', '배', '수박']; -> b라는 리스트에 사과, 배, 수박을 담았다.
console.log(b[0]); -> b라는 리스트의 0번째 값을 출력 -> 사과
딕셔너리
let c = ['name' : 'bob', 'age' : 30, 'height' : 180];
console.log(c['name']); -> c라는 딕셔너리에 name에 해당하는 값을 출력 -> bob
3. 조건문, 반복문, 함수
조건문
if(조건문) {형식1} -> 조건문이 참이면 형식1을 실행, 조건문이 거짓일 시 else로 넘어감
else {형식2} -> 조건문이 거짓이면 형식2 실행
반복문
array.foreach(element => {형식3}); -> array(리스트)의 요소 수에 따라 형식3을 반복한다. 이때 element는 임시 변수이다.
함수
function d(){형식4} -> d라는 함수에 형식4를 저장, 형식4가 필요할때 d를 호출해서 반복적으로 쓸 수 있다.
4. JQuery
JQuery : Javascript를 쉽게 쓸 수 있는 라이브러리
<head>에 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>를 붙여넣고 사용한다.
JQuery 사용
$('#q1').empty(); -> id값이 q1인 구역 값을 비운다.
let temp_html = `<p>감자</p>`; -> temp_html에 감자라는 값 선언
$('#q1').append(temp_html); -> id값이 q1인 구역에 temp_html값(감자)을 붙인다.
tip)`는 백틱으로 HTML요소를 통째로 넣을 때 사용한다, 문자와 변수 함께 쓸 수 있게 하는 특수기호
'HTML,CSS,Javascript' 카테고리의 다른 글
| CSS 기초 (1) | 2024.10.01 |
|---|---|
| HTML 기초 (1) | 2024.09.30 |