[2020.07.23]자바스크립트, HTML, 시계출력, jQuery, selector

티스토리 뷰

개발/웹

[2020.07.23]자바스크립트, HTML, 시계출력, jQuery, selector

서니소니 2020. 7. 23. 16:43

Web Service의 종류는 크게 2가지가 있음

- static web service : 정적 웹 서비스 ( 클라이언트가 특정 HTML파일을 요청, HTML, CSS, Javascript로 처리가 가능)

- dynamic web service : 동적 웹 서비스 ( 클라이언트가 특정 프로그램을 실행해서 그 결과를 요청, HTML, CSS, JavaScript + python)

- 개발환경을 설정 > WebStorm을 이용해서 개발을 진행

- 웹서버가 웹클라이언트에게 데이터를 전달하는 전체적인 과정

- HTML5(지금 우리가 사용하고 있는 HTML버전)

HTML5 = HTML + CSS + JavaScript

HTML표준안 + CSS표준안 + JavaScript의 API

- HTML, CSS, JavaScript ( 언어 스펙 )

HTML

HTML은 tag로 구성된 언어!!

tag의 모양
1. 시작태그와 닫는태그로 구성된 태그가 있음! ex) <script> </script>
2. 시작태그만 가지고 있는 태그가 있음 ex> <html lang="en">

tag는 중첩구조를 가질 수 있다
하나의 tag가 다른 tag들을 포함할 수 있음
이때 부모와 자식, 후손의 관계가 성립

tag와 tag안에 포함된 요소들을 통칭해서 element 라고 한다
=> ex. <h1>하하하...</h1>
tag
해당 tag의 세부적인 내용 property, attribute 라고 한다.

HTML 문서는 크게 2가지 부분으로 구성된다.
<head> : 설정부분
<body> : web browser에서 rendering 할 데이터

tag의 종류

- block level element : 무조건 1 라인을 차지(ex. <div>)
- inline element : 내용에 대한 영역만 차지지(ex. <span>)

주요 tag

<span> : 안에 글자의 영역만 잡아주는 tag

<ul> : unordered list, 순서 없이 리스트

<ol> : ordered list, 순서 넘버링 있는 리스트

<a href="http://www.naver.com">여기를 클릭</a> : "여기를 클릭"이라는 하이퍼텍스트 생성

<div> : 대표적인 block level, 무조건 1 라인을 차지

<span> : inline element, 내용에 대한 영역만 차지

Web .개발 환경의 변화

Round Trip 방식에서 SPA(Single Page Application)으로 변화하는 중!

=> Front-end Web Application 작성해야함

=> AJAX (서버와의 통신을 통해 데이터만 받아옴, 비동기방식)

- HTML, CSS는 기본!

- 중요한 것은 JavaScript를 잘 해야함! => python처럼 무지막지하게 얘기하지는 x

JavaScript => jQuery => AJAX

-> 순수 JavaScript는 프로그래밍하기가 너무 힘들고 복잡!@!!!

대신 JavaScript library인 jQuery를 이용해서 이 프로그래밍 처리를 수행.

jQuery는 사용하기 아주 편하게 만들어놓은 JavaScript library

Javascript vs python

// JavaScript: web client에서 실행되는 언어
//             요즘에는 서버용 개발언어로 사용되기도 함(Node.js)

// 변수 생성
// python은 그냥 변수를 선언
// my_var = 100 (python)
var my_var = 100     // javascript
var tmp = 3.14       // number : 정수와 실수 구분x
var tmp1 = "Hello"  // string (python과 동일)
var tmp2 = true     // boolean (python은 True)
var tmp3 = [1, 2, 3, 4.555]     // array

// 객체 표현
var tmp4 = {name : "홍길동", age : 25}
console.log(tmp4.name)

// 함수
// 함수는 2가지가 존재
// 1. 선언적 함수 (python의 일반적인 함수 정의하는 방법)
//    선언적 함수는 함수 이름이 존재!!
function my_add(x, y){
    return x + y
}
// 2. 익명함수(함수의 이름이 x) = 람다함수
// 변수에 저장해서 사용. 일급함수의 특징을 갖게 된다
// 함수를 다른 함수의 인자로, 함수의 리턴값으로 함수를 이용.
var my_add = function(x, y){
    return x + y
}

결론적으로 HTML, CSS, JavaScript(jQuery)를 이용해서 웹 브라우저 화면을 제어!!

Q. 브라우저에서 동작하는 시계를 출력하기

04_javascript_clock.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/04_javascript_clock.js"></script>
    <style>
        div {
            background-color: yellow;
            color: red;
            width: 400px;
            height: 100px;
        }
    </style>
</head>
<body>
    <h1>시계를 만들어보아요!!</h1>
    <div id="myDiv">여기에 시간이 출력되요!!</div>
    <input type="button"
           value="시계시작!!!"
            onclick="start_clock()">
</body>
</html>

04_javascript_clock.js

function start_clock() {
    //alert("버튼이 클릭클릭!")
    // 시계를 출력해야함
    // 현재 시간을 구해야해@
    // 현재날짜의 시, 분, 초를 구할 수 있음
    // 이 시간을 HTML 특정영역에 출력
    // 위의 작업을 1초마다 반복한다
    // JavaScript는 특정시간마다 특정함수를 반복해주는 함수를 제공



    setInterval(function(){
        var today = new Date()  // 날짜 객체 생성
        console.log(today.toLocaleString())     // ok
        // HTML의 특정 위치를 지정!
        var my_div = document.getElementById("myDiv")
        my_div.innerText = today.toLocaleString()
    }, 1000)     // 1초마다 함수 반복
}

jQuery

1. JavaScript로 만든 사용하기 편한 library

2. 모든 browser에서 동일하게 동작!!!!!!!!

=> JavaScript는 browser마다 상이하게 동작하는 경우가 있음,

특정 browser에서는 수행이 잘 되고, 다른 browser에서는 수행이 잘 안 될 수도 있음

하지만 jQuery는 browser에 상관없이 잘 동작!!!!!!!

3. 무료로 사용가능!!

- jQuery를 사용하려면??

설치를 할 수도 있지만, 일반적으로는 CDN방식을 이용

CDN(Content Delivery Network) 방식은 네트워크를 통해서 라이브러리를 동적으로 다운로드해서 사용하는 개념

https://code.jquery.com/

에 가서 원하는 버전 minified로 링크를 복사하여

HTML과 jQuery 연습

-아래와 같이 05_jQuery.html 파일 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- jQuery를 CDN방식으로 이용 -->
    <script
            src="https://code.jquery.com/jquery-2.2.4.min.js"
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous"></script>
    <script src="js/05_jQuery.js"></script>
</head>
<body>
    <h1>jQuery 연습입니다.</h1>
    <div>
    <ul>
        <li class="region">서울</li>
        <li id="haha">인천</li>
        <li class="region">강원</li>
    </ul>
    <ol>
        <li id="hong">홍길동</li>
        <li>신사임당</li>
        <li>강감찬</li>

    </ol>
    </div>
    <input type="button" value="클릭클릭!"
           onclick="my_func()">
</body>
</html>

jQuery selector

// jQuery CDN을 이용했기 때문에 jQuery code를 사용할 수 있음!!

// button을 클릭하면 아래의 함수가 호출됨!!
function my_func(){
    // 0. jQuery를 공부할 때 가장 먼저 배워야 하는 건 selector!
    
    // 1. 전체 선택자(universe selector)
    //$("*").css("color", "red")      // 모든 element를 전체 선택하여 스타일변경 method 실행

    // 2. 태그 선택자(tag selector)
    //$("li").remove()

    // 3. 아이디 선택자(#id selector)
    //$("#haha").text()       // 인자가 없으면 값을 알아오라는 의미
    //$("#haha").text("제주")  // 인자가 있으면 값을 변경하라는 의미

    // 4. 클래스 선택자(.class selector)
    //$(".region").css("background-color", "yellow")

    // 5. 구조 선택자(>자식 선택자, 후손 선택자)
    //$("ol > li").css("color", "steelblue")      // > 자식 선택자
    //$("div li").css("color", "pink")         // div의 후손 li 선택자, 총 6개의 li들이 선택됨

    // 6. 구조 선택자(형제 선택자)
    //$("#haha + li").remove()            // #haha id 의 형제 중 다음에 위치한 element
    // $("#hong ~ li").remove()           // 해당 id 뒤에 나오는 모든 형제 선택

    // 7. 속성 선택자
    //$("[id=haha]").css("color", "red")       // id라는 속성을 갖는것 모두

    // 이 7가지를 조합하면 웬만한 element는 지정하는게 가능!!



}

저작자표시 (새창열림)

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

Spring main에서 여러개의 context.xml 파일 가져오는법 (0)	2020.08.08
Spring에서 resource의 생성자, setter 타입별 설정 (0)	2020.08.08
[2020.07.30] Django, python (0)	2020.07.30
[2020.07.24] HTML, jQuery예제, jQuery method, bootstrap 변경, AJAX (0)	2020.07.24
[2020.07.22] web service, HTML, CSS, JavaScript 기초 (0)	2020.07.22

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

글 보관함

sunny-blog

티스토리 뷰

[2020.07.23]자바스크립트, HTML, 시계출력, jQuery, selector

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

티스토리툴바