슬로

Javascipt란 ?

=> 브라우저에 명령을 내리는 표준 언어로, Java와 관련X

=> html의 head 안에 <script></script>라는 태그에 쓴다

script 안에 function을 만들어주고,

button에 onclick했을 때 hey를 호출하도록 하기

<Javascript문법>

변수만들기:     let a = 1

함수만들기:     function name(){       }

리스트:            let lst = ['one', 'two', 'three', 'four']

리스트접근:     lst[0] 

딕셔너리:        let dic = {'name' : '영수',  'age' : 27}

딕셔너리접근: dic['name']

console.log() : print와 비슷한 역할. 브라우저의 개발자도구 -> console에 결과값이출력

반복문: iterable.forEach( (a) => { 수행할 동작 } )

조건문: if (조건 > 기준) { 수행할 동작 } else { 수행할 동작 }

문자열 표현 시, " 문자 " 보다 ` 문자 ` (백틱)로 표현하는게 더 유연한듯함. (문자열 내 줄바꿈 허용, ${변수} 를 통해 포맷팅 가능. 마치 파이썬의 f'문자열'같이)

<jQuery>

Javascript로 구현할 수 있는 기능들을 편리하게 해줄 수 있는 많은 기능들이 있는 라이브러리

import:   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>  </style>부분에 작성하며, $('#변수명').함수(인자) 이런식으로 사용가능.

변수명은 html 블록에 id로 지정할 수 있다.

div블록에 q1이라는 id를 주고,

style에서 이 변수에 대한 함수를 작성한 뒤, 안에 jquery구문 작성

q1의 텍스트를 '바꿀 텍스트'로, 색깔을 red로 바꿔주기

.append() 함수 자주쓰임 (데이터를 받아와서 html 만들어두고 html블록에 append해줄 때)

$( '#변수명' ).empty()   : 변수명에 해당하는 블록을 비워줌

$( '#변수명' ).append()

$(window).load()
: 해당 페이지의 모든 외부 리소스 ... 즉 모든 요소가 로드 된 후에 처리

$(document).ready()
: DOM 객체만 로드 되자마자 처리

<Fetch>

---문법---

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})

url은 데이터를 받아올 수 있는 url

=========fetch 예시코드=============

============jQuery, Fetch 연습==================

        $(document).ready(function () {
            setInterval(function () {
                // console.log('갱신')
                fetch("날씨 받아오는 url").then(res => res.json()).then(data => {
                    let temp = data['temp']
                    $('#weather').empty()
                    $('#weather').append(`${temp}˚C`)
    
                    let now = new Date()
                    $('#timenow').text(`${now.getHours()}시 ${now.getMinutes()}분 ${now.getSeconds()}초`)
                })

            }, 1000);  //1000은 갱신되는 시간으로, 1초 = 1000
        
           function submit_boulder(){
                alert('준비중임 ㅋ')
        }
        })

<div class = 'image_box'>

- 백그라운드 사진과 텍스트를 담은 박스

- width, height로 크기 조절,

- border-radius로 테두리 둥글게

- text-align 글씨 가운데 정렬

- padding으로 글씨 위치 조절 (padding한 만큼 width와 height도 변함)

- background-image로 url에서 이미지 가져오고, position, size로 박스 사이즈에 맞게 이미지를 보여주는 위치 조절

<div class = 'wrap'>

- 로그인박스와 ID, PW창을 묶어주는 div

- margin 옵션을 통해 이 div를 가운데로 옮겨줌 (auto 시 좌우 기준으로 가운데정렬)

- auto로 가운데정렬할 때 width가 정의되어있지 않으면 정렬이 안된다

- 여러가지 해봐도 상하 기준 가운데정렬은 안됨(다른 방법이 필요할 것으로 예상)

<폰트 씌우기>

google fonts : https://fonts.google.com/?subset=korean 

Select Regular 400

import에서 style 내부 복사 -> 내 코드 style부분에 붙여넣기

CSS rules to specify familites 부분 복사 ->

*{} 안에있는 부분이 적용하는 부분인듯 함 -> 일괄 적용이고, 이 부분에 대해서 좀 더 알아볼 필요有

<CSS파일 분리>

1.style부분 드래그해서, 생성한 style.css 파일에 붙여넣기

2.내 head 부분에 이 style.css를 가져오는 코드를 넣어줄 수 있음

코드가 깔끔해지는 부분도 있지만, 더 중요한 것은 남들이 작성해놓은 style(라이브러리)을 가져올 수 있다는 점이 핵심.

<유명한 CSS 모음 bootstrap 활용해보기>

bootstrap 홈페이지에서 오른쪽 위 점 세개 누르면 버전을 고를 수 있음

https://getbootstrap.com/docs/5.0/getting-started/introduction/

==> layout, content, component등 다양한 모음이 있다.

head에 이걸 복붙해주면 라이브러리 가져옴 

버튼 하나를 가져와서 LOGIN 버튼을 파랗고 귀엽게 만들어주었다.

<라이브러리를 활용한 페이지 만들기 연습>

bootstrap 라이브러리를 활용하여 간단한 웹 페이지를 만들고, github을 통해 배포해보았다.

버튼은 아무 기능 없지만, 배워가면서 업데이트 해볼 예정

https://mottoslo.github.io/web-rate_my_send/

<Web 동작원리>

브라우저의 역할 - 서버에 요청을 전달하고, 정보를 가져와서, 정보를 보여주는 역할

                              => 개발자도구에서 나에게 보여지는 네이버 페이지 수정가능, 새로고침하면 돌아옴, 와이파이꺼도 페                                       이지그대로

                              => 서버에 요청을 하면 HTML, CSS, Javascript를 받아옴  (front-end)