티스토리 뷰

비개발자의 웹개발

[스파르타 코딩 클럽] 비개발자를 위한 웹개발 1주차 개발일지 (2)

쳶 2022. 12. 24. 16:22

 

 

[스파르타 코딩 클럽] 비개발자를 위한 웹개발 1주차 개발일지 (1)

수강을 시작한지 2주가 끝나가는 오늘에서야 1주차 강의 수강 및 과제 제출을 완료했다. 수강 신청을 하긴 했지만, 연말에 마무리해야 할 업무 처리로 다소 분주해서 시작 첫 주는 거의 손을 데

rachelish.tistory.com

이전 포스트에 이은 2편

 

[1주차 학습 내용]

 

7. JavaScript

프로그래밍 언어 중 하나로, 모든 브라우저가 알아들을 수 있는 "표준" 언어

 

<head>

<style></style>

<script>

function hey(){alert('안녕')}

</script>

</head>

 

<body>

<button onclick="hey()">버튼</button>

버튼을 누르면, 안녕이라는 alert이 뜬다.

2. JavaScript 기초 문법 - 프로그래밍 언어 5가지

페이지 마우스 우클릭 > 검사 > Console 탭(개발자 도구) = Script 와 동일한 페이지

 

(1) 변수: 값을 담는 것

정의

let first_name='rachel' (undefined)

let last_name='Lee' (undefined)

 

first_name+last_name -> rachelLee

 

(2) 자료형: 숫자가 중요한 list / key와 value로 이루어진 dict 형으로 구성

자료가 많을 때, 데이터를 한번에 모아서 정렬

let a_list=['A','B','C','D']

a_list=[1] -> 'B' (0번째 부터 시작하며, 1번째 문자를 의미)

 

데이터 추가

a_list.push('E')

a_list -> ['A', 'B', 'C', 'D']

 

a_list.push(b_list) 리스트를 추가할 수도 있음

b_list=['아빠','엄마']

a_list.push(b_list) -> ['A', 'B', 'C', 'D', Array(2)]

a_list[4][2] -> 엄마

let a_dict={'name':'rachel','age':33}

- key: name, age

- value: rachel, 33

a_dict['name'] -> 'rachel

 

리스트 추가 시, push 없이 let a_dict=['height']=161

a_dict -> {name: 'rachel', age: '33', height: '161}

 

3) 함수: function()

let myemail='chelmories@gmail.com'

myemail.split('@') -> ['chelmories', 'gmail.com']

myemail.split('@')[1] -> 'gmail.com' 스플릿 한 것이 list형으로 구성

 

<script>

function sum(a,b){alert('계산을 하자') return a+b}

 

let result=sum(a,b)

alert(result)

</script>

 

sum(2,3) -> 계산을 하자 뜬 후, 확인 버튼 누르면 5가 뜸

 

*alert() 대신 console.log()을 사용하면, 콘솔창에서 확인 가능

 

4) 조건문: if(), else()

function is_adult(age){if(age>20){'alert('성인입니다')}{else{alert('청소년입니다')}

 

is_adult(30) -> 성인입니다 

 

5) 반복문

<script>

let a_list=['사과','배','감','딸기']

for(let i=0;i<a_list.length;i++){console.log(a_list[i])}

</script>

-> 콘솔창에 사과, 배, 감, 딸기가 한줄씩 뜸

i가 0부터 하나씩 커지면서 돌면서 a_list.length의 길이까지(=4개, 4번째 까지)내용물을 실행시킨다.

(예시 1)

 

<script>

let scores=[{'name':'철수', 'score':'90'},

{'name':'영희', 'score':'85'},

{'name':'민수', 'score':'70'},

{'name':'형준', 'score':'50'},

{'name':'기남', 'score':'60'},

{'name':'동희', 'score':'30'}]

for(let i=0;i<scores.length;i++){console.log(scores[i])} -> 전체 리스트 뜸

 

만약, 70점 이상인 사람들의 이름만 나타내고 싶을 때,

for(let i=0;i<scores.length;i++){if(scores[i]['score']>70){console.log(scores[i]['name'])} 

 

'비개발자의 웹개발' 카테고리의 다른 글

[스파르타 코딩 클럽] 비개발자를 위한 웹개발 3주차 개발일지 (2)  (2) 2023.01.04
[스파르타 코딩 클럽] 비개발자를 위한 웹개발 3주차 개발일지 (1)  (0) 2023.01.03
[스파르타 코딩 클럽] 비개발자를 위한 웹개발 2주차 개발일지 (2)  (0) 2023.01.02
[스파르타 코딩 클럽] 비개발자를 위한 웹개발 2주차 개발일지 (1)  (0) 2022.12.26
[스파르타 코딩 클럽] 비개발자를 위한 웹개발 1주차 개발일지 (1)  (1) 2022.12.24
댓글