Javascript
- 프로그래밍 언어
- 웹을 움직이게 만드는 코드이다. → 정적인 웹을 동적으로 만들어 준다.
- <head></head> 안에 <script> </script>를 만들고 그 안에서 사용한다.
변수 만들기
- let이라는 키워드를 사용하여 변수를 만들고 실행한다.
<head>
<script>
let 변수이름 = 값;
</script>
</head>
리스트 만들기
<head>
<script>
let list_1 = [] // 빈 리스트 선언
let list_2 = [1,2,'hey',3] // 리스트 선언
list_2[1] // 2 를 출력
list_2[2] // 'hey'를 출력
// 리스트에 요소 넣기
list_2.push('헤이')
list_2 // [1, 2, "hey", 3, "헤이"] 를 출력
// 리스트의 길이 구하기
list_2.length // 5를 출력
</script>
</head>
딕셔너리 만들기
<head>
<script>
let dict_1 = {} // 빈 딕셔너리 선언
let dict_2 = {'name':'Bob','age':21} // 딕셔너리 선언
dict_2['name'] // 'Bob'을 출력
dict_2['age'] // 21을 출력
dict_2['height'] = 180 // 딕셔너리에 키:밸류 넣기
dict_2 // {name: "Bob", age: 21, height: 180}을 출력
</script>
</head>
리스트와 딕셔너리 같이 사용하기
- 딕셔너리로 데이터를 알아보기 쉽게 묶을 수 있다.
- 리스트로 정보의 순서를 표시 할 수 있다.
- 데이터를 다루기 쉬워진다.
- push함수를 이용하여 데이터를 쉽게 추가할 수 있다. → 여러가지 함수는 검색해보자.
<head>
<script>
names = [{'name':'bob','age':20},
{'name':'carry','age':38}]
// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'
new_name = {'name':'john','age':7}
names.push(new_name) // name에 값 추가하기
// names의 값은? [{'name':'bob','age':20},
{'name':'carry','age':38},
{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'
</script>
</head>
함수 만들기
- function이라는 키워드를 사용한다.
- 함수를 호출하려면 함수이름 뒤에 꼭 ()를 붙인다.
<head>
<script>
// 매개변수 없을 때
function 함수이름() {
let 변수이름 = 값
}
</script>
</head>
// 함수 호출 시
함수이름();
<head>
<script>
// 매개변수 있을 때
function 함수이름(parameter) {
let 변수이름 = 값
}
</script>
</head>
// 함수 호출 시
함수이름(parameter);참고한 사이트
-https://www.codestates.com/blog/content/javascript-%EA%B8%B0%EC%B4%88-%EB%B0%8F-%EB%AC%B8%EB%B2%95
JQuery
- html에서 뼈대를 쉽게 조작할 수 있다.
- Javascript를 미리 작성해둔 라이브러리
- CSS의 class를 선택자로 사용한것처럼 JQuery에서는 id의 값을 가르켜 사용할 수 있다.
- id는 class와는 다르게 값을 여러개 선택 할 수 없다.
- 문법은 $('#id값') 이다
// 사용 예시
// Jacascript
document.getElementById("element").style.display = "none";
// JQuery
$('#element').hide(); // id값은 element가 된다
// 사용 예시 2
// 아래와 같은 코드를 예시로 든다.
<div class="list-part">
<h2>2. 리스트</h2>
<div id="q1"></div> // id값을 사용한다.
</div>
// JQuery
$('#q1')
- 라이브러리라서 import 하여 사용해야한다.
- https://www.w3schools.com/jquery/jquery_get_started.asp 여기에서 import 주소를 가져올수 있다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
함수 만들기
- <script></script> 태그 안에 작성해야 한다.
<script>
function 함수명() {
// 코드 작성하기
alert('내용 작성') // 브라우저에서 경고 창을 띄워주는 자바 스크립트 함수
console.log('내용 작성') // 브라우저 개발자 도구를 통해 볼 수 있다.
}
</script>
조건문 만들기
// Javascript와 JQuery를 같이 사용할 수 있다.
// forEach문을 사용하여 반복하고
// if문에 조건식을 집어 넣어 활용 가능하다.
let ages = [20,15,12,25,33,40]
ages.forEach((a)=> {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})
Fetch
- API를 통해 데이터를 요청하고 받아올 수 있다.
- 사용하려면 반드시 JQuery를 import 해야한다.
- 웹 통신을 요청할 url을 적는다.
- JSON화 하기 위해 .json()을 사용한다.
- data을 개발자 도구로 확인하기 위해 console.log(data) 코드를 적는다.
// fetch의 기본 코드
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})
'스터디일지' 카테고리의 다른 글
| [WIL] Java Spring 1 주차 (0) | 2023.08.27 |
|---|---|
| [WIL] 알고리즘 주차 (0) | 2023.08.20 |
| [WIL] 미니 프로젝트 후 (0) | 2023.08.13 |
| [2023.07.24] 자료구조 / 알고리즘 (0) | 2023.07.24 |
| [1 주차]HTML, CSS 알아보기 (0) | 2023.07.01 |
