블로그 이미지
잡다한 취미 생활 및 일상에 대한 소소한 이야기를 적어나가는 블로그입니다.
붉은kkk

공지사항

최근에 올라온 글

최근에 달린 댓글

글 보관함

calendar

 이전 다음 2024.5
일 월 화 수 목 금 토
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 31
티스토리 가입하기 RSS FEED
프로그래밍/자바스크립트

[9. Chart.js] JAVASCRIPT 차트 라이브러리

2020. 5. 12. 06:47 | Posted by 붉은kkk

'Chart.js'는 자바스크립트로 다양한 차트를 표현할 때 사용하면 좋은 라이브러리 입니다.

저는 아래와 같은 Radar Chart와 Polar Chart가 맘에 들어서 활용해보고 싶어졌어요.

... 실제 코드는 다음 포스팅에 남기도록 할게요.

어느새 출근 시간이 다가와서, 오늘의 포스팅은 여기서 마무리를 하고 다음 포스팅에 상세한 내용을 기재하도록 하겠습니다.

 

 

 

Chart.js is available under the MIT license.

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[10. 코드 난독화 & 암호화] 코딩을 하다 문득 암호화를 해야 하는...  (0) 2020.08.28
[8. Typed.js] JAVASCRPIT로 글쓰는 효과 만들기  (0) 2020.05.12
[7. 동적테이블 만들기] Javascript로 동적테이블(Dynamic Table) 만들기  (0) 2020.05.01
[6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성  (0) 2019.10.27
[5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트  (0) 2019.10.22
프로그래밍/자바스크립트

[7. 동적테이블 만들기] Javascript로 동적테이블(Dynamic Table) 만들기

2020. 5. 1. 10:38 | Posted by 붉은kkk

이번 시간엔 Javascript를 이용하여 동적 테이블을 간단히 만드는 방법에 대해 포스팅 하도록 하겠습니다.

이번 포스팅은 사실 알고나면 간단한거지만, 알기까지의 과정이 쉽지 않았던 거 같네요.

(제가 동적 테이블의 유용성을 잘 인지를 못했던 거 같아요.)

 

<출력된 결과물입니다>

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    

    </head>

    <body>
    동적 테이블 Test입니다.
    <table class="table test">
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>성별</th>
        </tr>

        <tbody id="table1">

        </tbody>
    </table>



<script>
var myArray = [
    {'이름' : '홍', '나이' : '20', '성별' : '남'},
    {'이름' : '이', '나이' : '25', '성별' : '여'},
    {'이름' : '박', '나이' : '30', '성별' : '여'},
    
]

buildTable(myArray)

function buildTable(data) {
    var table = document.getElementById('table1')

    for (var i=0; i < data.length; i++)
    {
        var row = `<tr>
                    <td>${data[i].이름}</td>
                    <td>${data[i].나이}</td>
                    <td>${data[i].성별}</td>
                   </tr>`
        table.innerHTML += row
    }
}


</script>

    </body>
</html>
코드 블록 설명
1. HTML 기본 문서 생성
2. Table 생성 (id를 지정해줍니다.)
3. Javascript (Data 저장, Data 크기에 따른 Table 만들기)

간단한 코드이므로 설명은 굵직한 토대만 드렸습니다.

보면 간단히 알 수 있는 부분이므로 자세한 설명은 생략할게요^^

 

그럼 오늗도 즐거운 프로그래밍 생활 되세요.

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[9. Chart.js] JAVASCRIPT 차트 라이브러리  (0) 2020.05.12
[8. Typed.js] JAVASCRPIT로 글쓰는 효과 만들기  (0) 2020.05.12
[6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성  (0) 2019.10.27
[5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트  (0) 2019.10.22
[4. 자바스크립트 변수] 자바 스크립트에서 변수 사용하기  (0) 2019.10.20
프로그래밍/자바스크립트

[6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성

2019. 10. 27. 20:01 | Posted by 붉은kkk

지난시간에 이어 자바스크립트로 데이트 서비스 웹사이트를 만드는 프로젝트에 대해 포스팅하겠습니다.

 

기본적인 사이트 요소는 갖추어서 맛보기용으로는 손색 없을 것 같네요.

성별 검색 기능과 취미 기능이 포함되었습니다.
성별 및 취미 입력후 검색하면 검색이 잘 이루어지네요.

 

사용된 기능

1. JSON data 형식 : 사용자 정보를 입력한 것은 JSON data 형태로 입력하였습니다.

2. If문 : 성별 및 취미를 check 하기 위해 If 문을 사용하였습니다.

3. For문 : 사용자 정보를 가져오기 위해 For문을 사용하였습니다.

 

해놓고 보니까 별거 아닌거 같기도 하네요.

코드는 아래와 같습니다.

 

JSON형식의 user정보
유저정보를 가져오면서 성별과 취미도 검색해서 최종 결과를 뿌려줍니다.

자! 이렇게 자바스크립트로 하는 맛보기용 프로젝트가 완성되었습니다.

다음번엔 더 재밌는 주제로 찾아올게요. 

 

즐거운 프로그래밍 생활 되세요.

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[8. Typed.js] JAVASCRPIT로 글쓰는 효과 만들기  (0) 2020.05.12
[7. 동적테이블 만들기] Javascript로 동적테이블(Dynamic Table) 만들기  (0) 2020.05.01
[5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트  (0) 2019.10.22
[4. 자바스크립트 변수] 자바 스크립트에서 변수 사용하기  (0) 2019.10.20
[3. 자바스크립트 include] HTML에 자바스크립트 파일 포함시키기  (0) 2019.10.20
프로그래밍/자바스크립트

[3. 자바스크립트 include] HTML에 자바스크립트 파일 포함시키기

2019. 10. 20. 13:52 | Posted by 붉은kkk

오늘은 HTML에 자바스크립트 파일을 불러와서 실행되게 코드를 작성해 볼거에요.

 

그 전에, 자바스크립트를 배우고 알게 됨으로써 얻는 이득이 무엇인지 알려드릴게요.

저도 지금은 배우는 단계라서, 디테일한 내용들에 대해 알려드릴 수는 없지만 대략적으로 다음과 같은 것들을 

할 수 있다고 합니다. 

상세 내용은 아래 Table에!!!

참고 삼아 보시면 도움이 될 듯 합니다.

(아직 어떤 언어를 공부해야 될 지 모르는 분들은 그 언어로 무엇을 만들 수 있는지를, 그 언어가 무슨 프로그램 제작에 특화되어 있는지를 보고 선택적으로 취하시면 될 것 같네요.) 

자바스크립트로 할 수 있는 것들은 무엇이 있을까요?

What can you build with javascript?

1. Interactive websites
2. Apps
3. Games
4. Web Applications

Requirements
1. Web Broswer
2. Code Editor
3. Basic HTML and CSS knowledge is required!

 

그럼 오늘의 코드를 공개합니다.

지난 시간의 HTML파일 내에서 자바스크립트를 실행했던것을,

이번엔 자바스크립트 파일을 별도로 만들어서 호출하는 형태로 사용하였습니다.

지난 시간의 확장버전이라고 보시면 되요^^

코드 관리를 효율적으로 하려면 이렇게 별도의 파일로 작성하여 사용하는 것이 맞는 방법일 것 같네요.

(...답은 없답니다. 남들이 뭐라하건 나한테 맞으면 그게 맞는 방법이에요)

코드는 여전히 간단하죠^^
2.html파일과 script.js파일을 만들었어요.
두둥. 실행 완료. 잘 동작되네요^^

 

ㅎㅎ 저도 얼른 실력을 키워서 상호작용하는 웹사이트를 어서 빨리 만들어 보고 싶네요.

코딩 실력이 쌓이면 (코딩 실력이라고 쓰고... "구글링 실력 & 버그 잡기 & 내가 원하는 형태로 수정하기" 라고 읽어야 될까요?) 가능할테니까요. 

제가 생각하고 만든 서비스로, 어서 빨리 수익창출을 해보고 싶네요.

별도로 포스팅하는 창업 다마고찌 카테고리도 많은 관심 부탁 드립니다.

 

자바스크립트도 배우고 나면, 서비스를 만들거에요. 

그럼 오늘도 다 같이 즐거운 프로그래밍 생활 되세요^^

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성  (0) 2019.10.27
[5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트  (0) 2019.10.22
[4. 자바스크립트 변수] 자바 스크립트에서 변수 사용하기  (0) 2019.10.20
[2. 추천에디터] 무료 프로그램인 Notepad++  (0) 2019.10.18
[1. 자바스크립트 시작] 자바스크립트 시작하기.  (0) 2019.10.18
프로그래밍/자바스크립트

[2. 추천에디터] 무료 프로그램인 Notepad++

2019. 10. 18. 20:13 | Posted by 붉은kkk

 

코딩을 메모장으로만 하면 가독성이 떨어지는 경우가 있습니다.

그래서 저는 Notepad++를 추천 드립니다...

사실 저도 이제 막 설치 했답니다. 그리고 추천 이유는 무료프로그램이어서 추천 드리고 있습니다.

뭐가 좋은진 잘 모르지만, 가독성은 높아질 것 같네요. 단지 이것만이라도 저한텐 많은 도움이 될거 같습니다.

 

다운로드는 아래 사이트에서 자신의 컴퓨터에 맞는 버전으로 설치하시면 됩니다.

https://notepad-plus-plus.org/

 

Notepad++

What is Notepad++ News about Notepad++ new website Notepad++ is a free (as in “free speech” and also as in “free beer”) source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed b

notepad-plus-plus.org

 

... 설치를 하고, 처음 만들었던 "Hello world" 출력 프로그램 파일을 열어봤습니다. ^^ 저는 만족!

 

처음 만들었던 프로그램의 코드를 열어봤습니다.

ㅎㅎ 다음엔 더 재밌는 예제로 포스팅 해보겠습니다.

 

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성  (0) 2019.10.27
[5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트  (0) 2019.10.22
[4. 자바스크립트 변수] 자바 스크립트에서 변수 사용하기  (0) 2019.10.20
[3. 자바스크립트 include] HTML에 자바스크립트 파일 포함시키기  (0) 2019.10.20
[1. 자바스크립트 시작] 자바스크립트 시작하기.  (0) 2019.10.18
프로그래밍/자바스크립트

[1. 자바스크립트 시작] 자바스크립트 시작하기.

2019. 10. 18. 19:51 | Posted by 붉은kkk

요즘 웹 프로그래밍에 대한 관심이 부쩍 늘어났습니다.

여러가지 이유가 있지만, 우선 앱 개발이 잠시... 침체기라서 그런거 같네요.

 

어떻게 접근을 할까 고민을 해봤는데... 역시나 프로그래밍의 시작은 그 언어로

"Hello world"를 출력하는게 시작이 아닐까 합니다.

 

그럼 시작해볼까요?

 

1. 우선 모두의 기본에디터인 메모장을 열어줍시다 ㅎㅎ

윈도우 메모장. 제가 즐겨 사용하고 있는 프로그램이랍니다.

2. 코딩을... 해야되는데?

   - 다음단계인 코딩은... 역시나 구글님에게 물어봅니다.

여기저기 자습서가 있답니다^^

3. 참고를 해서... 아래와 같이 코딩을 했답니다.

저장을 1.html파일로 해줬답니다.

 

4. 마지막 html 파일을 실행한 결과 ^^

원하는 출력을 얻을 수 있었습니다.

 

^^ 이로써, 자바스크립트 세계에 입문하였습니다.

하나하나 배워봐야겠네요.

 

즐거운 프로그래밍 생활 되세요. ㅎㅎ

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성  (0) 2019.10.27
[5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트  (0) 2019.10.22
[4. 자바스크립트 변수] 자바 스크립트에서 변수 사용하기  (0) 2019.10.20
[3. 자바스크립트 include] HTML에 자바스크립트 파일 포함시키기  (0) 2019.10.20
[2. 추천에디터] 무료 프로그램인 Notepad++  (0) 2019.10.18
이전 1 다음

티스토리툴바