웹개발 종합_2주차

[수업 목표]

Javascript의 사용 방식에 대해 이해하고, 문법에 익숙해진다.
JQuery를 활용하여 HTML을 조작할 수 있다.

---

오늘은 어제에 이어서 1주차 강의를 완강하고 숙제를 제출했다. 그리고 2주차 강의를 진행하면서 말로만 들어보던 자바스크립트를 알아보는 과정을 배웠다. 자바스크립트와 파이썬은 더러 들어본 이름이지만, 어떤 개념이고 어떻게 작동하는지에 대해서는 잘 몰랐는데. 자바스크립트가 움직임을 잡는 큰 축이라는 것을 알게 되었다. 본격적으로 코딩을 배우는 것은 아니지만, 포괄적으로 웹개발 관련 프로그램을 다루어서 좋다. 

Javascript = 웹페이지에 움직임을 줄 때 사용. (색이 바꾸거나, 추가,삭제 등 움직이거나, 서버와 통신할 때 사용)
1.변수  /  2.자료형  /  3.함수  /  4.조건문  /  5.반복문 → 요 5가지만 알고 있어도 충분하다.

---

기초문법1 : 변수, 기본연산 // 이부분에 있어서는 참 쉽다고 생각했다. 단순 꾸러미를 묶고, 연산하는 내용으로.

<script>

let a = '대한';

let b = '민국';

console.log(a+b);

console.log(a+b+b);

console.log(a+b+b+b);

console.log(a+b+b+b+b);

</script>

<script>

let a = 5;

let b = 3;

console.log(a+b);

</script>

---

기초문법2(자료형) : 리스트, 딕셔너리

<script>

let a = ['사과', '배', '수박'];

console.log(a[1]);

</script>

<script>

let person = {'name':'bob', 'age':'30', 'height':180}

console.log(person)

</script>

<script>

let person = {'name':'bob', 'age':'30', 'height':180}

let name = person['name']

let age = person['age']

console.log(name,age)

</script>

---

기초문법3 : 반복문, 조건문

<script>

let ages = [15, 30, 28, 7, 40, 13];

ages.forEach(a => {

if (a < 20){

console.log('청소년 입니다.')

} else {

console.log('성인 입니다.')

}

});

</script>

완전 수학적인 개념이었다. 수학하고는 담을 쌓고 산지가 몇 십년 째인데, 좀 걱정이 되긴하지만. 계속 반복적으로 하면 익숙해질 것같다. 이 부분이 인상 깊었다. 익숙해져서 가져다쓰고 자동 완성하는 기능을 어서 마스터 하고 싶다.

오늘은 여기까지. 내일 이어서 제이쿼리를 배우면 웹상에서 자바스크립트를 써먹을 수 있는 방법을 알게 되겠지.

[24.02.22]
오늘은 어제에 이어서 Javascript 활용문법(DOM)을 수강한다. 웹페이지의 움직임을 더한다.
제이쿼리는 자바스크립트에서 긴 명령문을 쓰기 귀찮을때, 누군가가 만들어 놓은 부트스크랩이다.

<script>

function checkResult() {

let a = ['사과', '배', '감', '귤']

$('#q1').text(a[2]);

}

function checkResult() {

let b = { 'name': '영수', 'age': 30 }

$('#q1').text(b['name']);

}

function checkResult() {

let c = [

{ 'name': '영수', 'age': 30 },

{ 'name': '철수', 'age': 35 }

]

$('#q1').text(c[1]['name']);

}

</script>

1번 function의 답은 감, 2번 function의 답은 영수, 3번 function의 답은 철수이다. 이제 점점 복잡해지는 것같다.
제이쿼리를 불러오는 명령분은 다음과 같다. $('#아이디네임').text(리스트[몇번째]); 이 공식은 리스트 안에 있는 값을 불러올 때 사용한다.