2023.09.06.<HTML,CSS>웹개발종합반 2_제이쿼리,부트스트랩
2023. 9. 6. 19:01ㆍ콛/Til
배울 내용 : HTML, CSS 복습 → 스파르타플릭스 만들기
자바스크립트~!
1. [스파르타 플릭스] 프로젝트
- 네모난 틀 만드는 법
- 1px 굵기, solid선 white
border: 1px solid white;
padding 20px;
- 무언가를 수정하려면 vscode에서 하지 말고 홈페이지에서 우클릭 후 검사 누르고 안에서 작업해보고 style에서 수정 하려해야한다.
2. Javascript
- 자바스크립트는 '움직임' 을 위해서 사용한다!
- 자바스크립트는 브라우저에 명령을 내리는 '표준'이라고 할 수 있다.
- 자바스크립트 시작하기
- 다섯가지만 기억하면 된다. <변수/자료형/함수/조건문/반복문>
2-1 변수
- 변수는 직관적으로 지정하는 게 좋다. 그래야 나중에 덜 헷갈린다.
- a, b가 변수
- 아래와 같이 작성 후 홈페이지에 들어가 console창을 보면 대한민국이 찍힌다.
<script>
let a ='대한';
let b ='민국'
console.log(a+b);
</script>2-2 자료형
- 리스트 : 말그대로 순서를 가짐
- 딕셔너리 : key와 value 값의 묶음
리스트형
let a = ['사과','수박','딸기','감']
console.log(a[1]) // 수박
console.log(a[0]) // 사과
딕셔너리형
let person = {'name':'영수','age':27}
console.log(a) // {name :'영수', age : 27}
console.log(a['name']) // 영수
변수 지정 후 리스트
let name = persone['name']
let name = persone['age']
console.log(name, age) //영수 272-3. 반복문, 조건문
- 조건문
let age = 24
if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}- 반복문
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a)
})- 조건문 + 반복문
let ages = [12,15,20,25,17,37,24]
ages.forEach((a)=> {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})2-4. function
- 기본 사용법
1. hey라는 function 정의
<script>
function hey() {
alert('안녕하세요');
}
</script>
2. oneclick시 hey() 실행
<button onclick ="hey()" type="button" class="btn btn-outline-light">영화 기록하기</button>
<button type="button" class="btn btn-outline-light">상세정보</button>3 JQuery
- bootstrap처럼 javascript를 더 쉽게 사용하기 위한 라이브러리, bootstrap과 동일하게 import 이후 사용해야 한다.
- <head> 와 </head> 사이에 jQuery CDN import
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- 이름표 달고 사용해야 함
- 리스트형 예시
<script>
function checkResult() {
let fruits = ['사과', '배', '감', '귤', '수박']
$('#q1').empty(); // id=q1 모두 지우기
fruits.forEach(a => { //반복문
let temp_html = `<p>${a}</p>`;
$('#q1').append(temp_html)
});
}
</script>
- 딕셔너리형 예시
<script>
function checkResult() {
let people = [
{ 'name': '서영', 'age': 24 },
{ 'name': '현아', 'age': 30 },
{ 'name': '영환', 'age': 12 },
{ 'name': '서연', 'age': 15 },
{ 'name': '지용', 'age': 18 },
{ 'name': '예지', 'age': 36 }
] //딕셔너리형 변수
$('#q2').empty(); // 모두 지우기
people.forEach((a) => {
let name = a['name']
let age = a['age']
let temp_html = `<p>${name}는 ${age}살입니다.</p>`
$('#q2').append(temp_html); //추가하기
})
}
</script>
후기 : 회독 짱짱! 늦게 시작한만큼 본캠프까지 10일 홧팅!
'콛 > Til' 카테고리의 다른 글
| 2023.09.12<SQL>MySQL 1_Select, Where (0) | 2023.09.12 |
|---|---|
| 2023.09.08.<HTML,CSS>웹개발 종합반 5_배포,깃허브 기초 (0) | 2023.09.08 |
| 2023.09.07.<HTML,CSS>웹개발 종합반 4_Firebase (0) | 2023.09.07 |
| 2023.09.07.<HTML,CSS>웹개발 종합반 3_Fetch (0) | 2023.09.07 |
| 2023.09.05.<HTML,CSS>웹개발 종합반 1 (0) | 2023.09.05 |