728x90
반응형

 

 

모든 프로그래밍 수업을 학교에서 듣다보면 기초로 코딩하는 대표적인 예제중에 하나인 구구단을 자바스크립트로 구현해 볼 것이다.

 

구구단                                                                                        

 

맨처음 console.log("자바스크립트로 구구단 코딩하기");은 꼭 써주지 않아도 되지만 

 

그래도 내가 어떤것을 코딩하겠다 라는 제목정도라고 보면 될 것이다.

 

for(let i=1; i<=9 i++) 만 보면 알 수 있듯이

 

자바스크립트는 변수 선언을 let 을 사용해서 선언을 해준다.

 

1단부터 9단까지이니까 for문을 하나 더 써주고 9까지 곱하게 해준다.

 

그 결과의 출력을 console.log로 표현해 주기만 하면 

 

기존 프로그래밍 언어인 Java 나 C에서 코딩하던 것을 금방 응용할 수 있다.

결과는 아래와 같다.

 

-끝-

 

728x90
반응형
728x90
반응형



1.기본문법                                                                                   

◎숫자

기본적인 자료형

 연산자

설명 

덧셈 연산자

-

뺄셈 연산자 

곱셈 연산자 

나눗셈 연산자 

%는 나머지 연산자이다.



◎문자열

-문자의 집합

-문자열 생성시 큰 따옴표나 작은 따옴표를 사용한다.


-이스케이프 문자

따옴표를 문자 그대로 사용가능

문자열 줄 바꿈 할 경우 사용가능


(ex console.log("동해물과 백두산이 \n 마르고 닳도록")


이렇게 줄바꿈이 되어서 출력 됩니다.

이스케이프 문자 

설명 

\t 

수평 탭 

\n 

줄바꿈 

\' 

작은따옴표 

\" 

큰 따옴표 

\\ 

역슬래시 



◎문자열 합하기

+ 연산자는 문자열 연결 연산자이다.


결과는>> 동해물과 백두산이 마르고 닳도록 애국가 >> 이다.


◎문자 선택 연산자

-문자열[숫자] 이다.

console.log("안녕하세요"[0]); 이라고 쓰고 실행시키면 어떤결과가 나오게 될까??


안녕하세요의 문자열 중 0번째 문자열을 선택하는 것 이므로


"안" 이라는 결과가 실행된다.


◎참과 거짓의 표현

-true 와 false

연산자 

설명 

== 

같다. 

!= 

다르다. 

왼쪽이 더 크다. 

오른쪽이 더 크다. 

>= 

왼쪽이 크거나 같다. 

<= 

오른쪽이 크거나 같다. 


◎논리 연산자

연산자 

설명 

논리 부정 연산자 

|| 

논리합 연산자 

&& 

논리곱 연산자 


논리 연산자가 많이 사용되는 부분은 '범위  판단' 이다.


◎변수

-값을 저장할 때 사용하는 식별자로 변수 선언 후 변수 에 값을 할당한다.


변수 선언

=> let 식별자;


연산자 

설명 

변수++ 

기존 변수 값에 1을 더한다.(후위) 

++변수 

(전위)기존 변수 값에 1을 더한다. 

변수-- 

기존 변수 값에 1을 뺀다.(후위) 

--변수 

(전위)기존 변수 값에 1을 뺀다. 



◎undefined 자료형.

- 말그대로 정의가 되어있지않는 자료형, 변수를 선언했으나 초기화 하지 않았을때 결과로 undefined가 나온다.











728x90
반응형
728x90
반응형


1.기본                                                                                  

◎표현식과 문장

-표현식이 하나 이상 모일 경우, 마지막에 종결 의미로 세미콜론(;)을 써준다.

프로그램은 문장이 모이면 프로그램이 된다.


◎식별자

-이름을 붙일 때 사용하는 단어로 변수와 함수 이름등으로 사용한다.

단, 식별자를 쓸때에는 키워드는 사용을 할 수 없고, 특수문자는 _와 $만 허용된다.

그리고 숫자로 시작하면 안되고 공백또한 입력해서는 안된다.


식별자 사용 규칙으로는 

1.생성자 함수의 이름은 항상 대문자로 시작한다.

2.변수,함수,속성 메소드의 이름은 항상 소문자로 시작한다

3.여러 단어로 된 식별자는 각 단어의 첫 글자를 대문자로 한다.


◎주석처리

-주석은 프로그램의 진행에 영향을 주지 않는 코드로

한 줄 주석 처리는 // 주석

여러 줄 주석 처리는 /*  주석  */ 을 사용한다.


◎출력 메소드

-console 객체의 log() 메소드를 사용한다.

console.log("문자열")



첫 줄은 출력 메소드를 사용해서 Hello world를 출력하고

두번째 줄은 주석처리를 사용해서 Hello world를 출력하지 않았다.



728x90
반응형
728x90
반응형




1.자바스크립트의 발전                                                                                                

◎세계에서 가장 오해를 많이 받는 프로그래밍 언어

-> 자바스크립트를 부수적인 프로그래밍 언어로 취급한다.


그러나 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장객체에도 접근할 수 있는 기능을 가지고 있다.

또한 Node.js 와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다.

자바스크립트가 썬 마이크로 시스템즈의 자바와 구문이 유사한 점도 있지만 

이는 사실 자바스크립트와 자바 모두 C언어의 기본 구문을 바탕으로 제작되었기 때문이고 자바와 자바스크립트는 직접적인 관련성이 없다.



2.자바스크립트로 할 수 있는 일                                                                                    

◎웹 클라이언트 애플리케이션 개발

-> 웹 브라우저에서 실행되는 웹 클라이언트 애플리케이션 개발이 목적이다.

-> 웹 브라우저에서 실행할 수 있는 유일한 프로그래밍 언어이다.


◎웹 서버 개발

-> 기존에 웹 개발은 두가지 이상의 프로그래밍 언어가 필요했지만 Node.js 가 등장하면서 웹 서버도 자바스크립트로 개발이 가능하다.

-> 웹 페이지를 출력하지 않아도웹 프로토콜(HTTP 또는 HTTPS)을 활용하면 웹서버로 칭한다.

->Node.js 는 웹 개발과 관련해서 간단한 모듈들만 제공해서 데이터 처리와 예외처리등이 조금 복잡한 경우가 있지만 , 빠르다는 장점을 가지고 있다.


◎모바일 애플리케이션 개발

-> 네이티브 애플리케이션 개발을 할 수 있다.

스마트폰에서 인식할 수 있는 프로그래밍 언어로 만든 애플리케이션이다.

대표적으로 페이스북의 React Native가 있다.( 자바스크립트로 네이티브 애플리 케이션을 개발- 내부적으로 프로그래밍 언어를 변환함)





◎데스크톱 애플리케이션 개발

->일렉트론 모듈: 자바스크립트로 개발 전용 텍스트 에디터를 만들어 배포하고 , 본격적으로 데스크톱 애플리케이션 개발에 힘썻다.


◎게임 개발

-> 원래 게임은 서버와 클라이언트 모두 속도문제로 C++로 제작을 하였다.

그러나 스마트폰이 활성화 되면서 한번에 여러 스마트폰 운영체제에서 실행할 수 있는 애플리케이션을 개발하는 것을 경제적 목표로 삼았으며 그 결과로 자바스크립트 기반의 유니티 게임엔진이 등장하였다.




◎데이터 베이스 관리

-> 데이터를 저장할 때 사용하는 프로그램:NoSQL

MongoDB:데이터베이스를 관리할 때 자바스크립트를 활용하는 NoSQL





728x90
반응형
728x90
반응형


평소 이클립스를 쓰다가 단축키를 자주 사용하게 되는데요 .

저는 그래도 sysout +ctrl+ space bar 를 제일 많이 쓰게되는 것 같네요 ㅎㅎ



1. /*   */ : 주석처리 -> 블럭 지정한후에 ctrl+alt+/    주석 해제는 ctrl+alt+\

   // : 한줄 주석처리 -> ctrl+/ 


2. 자동 완성 기능 : ctrl+spacebar 


3. 줄이동 : atl+방향키(위,아래) -> 커서가 있는 줄의 모든 글자가 방향키에 따라 이동

   줄삭제 : ctrl+D -> 커서가 있는 줄을 삭제


4. 에러 픽스 : 에러난 부분(벌건줄)에서 ctrl+1 ->에러난 곳에대해 해결방법을 제시함


5. Undo/Redo : ctrl+Z/ctrl+Y


6. System.out.println(); 생성 : sysout 입력하고 ctrl+spacebar   


7. 들여쓰기 자동 수정 : ctrl+I -> 커서가 있는 줄의 들여쓰기를 자동으로 맞춰준다. 블록을 지정하고 실행시 블록내에서 자동 들여쓰기


8. shift+alt+s r : getter/setter 자동 생성



F11 : 디버깅 시작

F4 : 상속 구조 클래스 보기(메서드 등)

alt+shift+r : 변수 및 메서드 변경(변경할 변수 에서 단축키를 누르고 변경 후에 엔터를 누르면 변수명이 모두 변경)

ctrl+m : 에디터 화면 넓게/좁게


* Alt

    > Alt + Shift + J : JavaDoc 주석

    > Alt + ←→(좌/우) : 뷰 화면의 탭에 열린 페이지 이동

    > Alt + ↑↓(상/하) : 커서가 있는 줄을 위 아래로 이동


* Ctrl

    > Ctrl + 1 : Quick Fix

        >> 구현하지 않은 메소드 추가

        >> 로컬 변수 이름 바꾸기

        >> Assignment 입력

        >> 행 둘러싸기 (if/where/for이나 블록으로 둘러 싸려면 해당영역을 선택하고 Ctrl + 1)

    > Ctrl + D : 한줄 삭제

    > Ctrl + E : 뷰 화면의 탭에 열린 페이지 이동

    > Ctrl + L : 라인 이동

    > Ctrl + I : 자동 들여쓰기 수정

    > Ctrl + K : 문자열 찾기 (찾고자 하는 문자열을 블럭으로 설정한 후...)

        >> Ctrl + Shift + K : 역순으로 찾기

    > Ctrl + M : 전체화면

    > Ctrl + O : 현재 보고있는 파일의 아웃라인 (메소드 리스트 확인, 메소드나 필드 이동가능)

    > Ctrl + W : 창 닫기

    > Ctrl + , or. : 다음 Annotation(Error, Warning, Bookmark)으로 이동

    > Ctrl + / : 주석 처리 (여러줄 블럭 처리 가능)


    > Ctrl + Alt + ↑↓(상/하) : 한줄(블럭) 복사


    > Ctrl + Shift + E : Switch to Editor (탭에 열려있는 Editor 이동)

    > Ctrl + Shift + G : 클래스의 메소드나 필드를 Reference하고 있는 곳으로 이동

        >> 반대 : F3 (Reference하는 클래스로 이동)

    > Ctrl + Shift + L : 단축키 보기

        >> Ctrl + Shift + L + L : 단축키 지정

    > Ctrl + Shift + W : 열린 파일 모두 닫기

    > Ctrl + Shift + O : 자동 import 처리 (사용하지 않는 Class는 삭제)

    > Ctrl + Shift + R : Open Resource

    > Ctrl + Shift + ↑↓(상/하) : 다음/이전 메소드로 이동

    > Ctrl + Shift + / :JavaDoc주석 추가

    > Ctrl + Shift + Space : 메소드 파라미터 힌트 (메소드에 입력해야 하는 파라미터 정보가 표시된다.)


    > Ctrl + F3 : 클래스 아웃라인

    > Ctrl + F6 : View 화면의 탭에 열린 페이지 이동

    > Ctrl + F7 : View간 화면 전환

    > Ctrl + F8 : Perspective간 화면 전환

    > Ctrl + F11 : 바로 전에 실행했던 클래스 실행

    > Ctrl + PageDown : 뷰 화면의 탭에 열린 페이지 이동


* Function Key

    > F2 : 에러의 원인에 대한 힌트 (에러 라인에 커서를 위치시키고...)

    > F3 : Java 편집기에서 Reference하는 클래스의 자바파일로 이동

        >> Ctrl + 클릭

        >> 반대 : Ctrl + Shift + G (클래스의 메소드나 필드를 Reference하고 있는 곳으로 이동)

    > F4 : 해당 클래스의 Hierarchy

    > F12 : Editor로 포커스


* E.T.C.

    > CTRL + 휠 : 페이지 단위 이동


이상 입니다.

728x90
반응형
728x90
반응형

 

웹 프로그래밍 언어와 주요 기술

●일반적인 프로그램

 

- 기본적으로 해당 디바이스에서 프로그램이 실행되고 경우에 따라 필요한 데이터는 서버로 부터 수신한다.

 

 

●웹 프로그램

-별도의 설치 없이 서버에 접속하는 것만으로 필요한 기능/ 서비스를 이용 할 수 있다.

 

-프로그램은 서버에서 실행되고 실행 결과만 컴퓨터의 브라우저를 통해 보여진다.

 

-데이터 입력, 메뉴 선택 , 버튼 클릭 등 사용자와 상호작용 처리를 위해 클라이언트에서 처리해야 되는 프로그램적인 요소도 있다.

 

-웹 프로그램은 서버와 클라이언트 협력에 의해 구현된다.

 

-웹 프로그램 개발을 위해서는 서버 프로그래밍 기술과 클라이언트 프로그래밍 기술을 모두 알아야 한다.!!!

구분  종류 
 클라이언트 기술 HTML,자바스크립트,CSS 
 서버 기술  서블릿,JSP ,ASP.Net,PHP
 클라이언트/서버 공동 기술 자바,C,C#,.Net 

 

●클라이언트 기술

- 기본적으로 브라우저에 의해 처리되는 요소

-화면 구성, 스타일, 동적 이벤트 처리등 사용자 상호작용을 담당!

 

○HTML

-Hyper Text Markup Language 로 웹 서비스를 표현하기 위해 사용하는 언어이다. 최근 HTML5가 널리 사용되고 있고 <HTML></HTML> 과 같은 마크업 구조이다.

 

○자바 스크립트

-JavaScript 로 자바와 유사한 문법구조를 제공하는 웹 클라이언트 개발언어이다.(실제 자바와는 무관)  웹 브라우저에서 해석하고 웹 브라우저 성능 평가에서 매우 중요한 요소가 된다.

jQuery 와 같은 공개 라이브러리가 유명하며 JSON은 클라이언트 서버간 정보 교환에 널리 사용 된다.

 

○CSS(Cascading Style Sheet)

-HTML 에서 레이아웃이나 디자인 요소를 분리 한것으로 최근 웹 클라이언트 개발은 HTML5+CSS+JavaScript 이다!!

 

 

●서버 기술

-HTML 파일은 파일 내용을 수정하기 전까지는 내용이 변하지 않는 정적인 구조이고 사용자 요청에 따라 다른 정보를 제공하거나 데이터 베이스를 통한 서비스를 위해서는 별도의 프로그램 기술이 필요하다.

 

○ASP.Net

-MS 윈도우 기반의 서버 프로그램 기술로 .Net 기반의 컴포넌트 사용 가능하다. MS 윈도우 종속과 상용 라이센스 정책으로 대규모 공개 웹 서비스 개발에는 거의 사용되지 않는다.

 

○PHP

-Professional Hypertext Preprocessor 로 처리속도가 빠르고 다양한 운영체제와 웹 서버 환경에서 실행이 가능하다.

 

-APM = Apache + PHP +MySQL

 

-오픈소스 게시판, 위키 프로그램, 연구용으로 널리 사용된다.

 

○JSP

-자바 서블릿 기반의 웹 프로그래밍 기술이다.

-자바의 모든 기능을 사용할 수있으며 안정성과 확장성이 뛰어나 가장많이 사용되고 있는 웹 프로그래밍 기술이다.

 

 

익스플로러로 작성하는데 왜이렇게 잔렉이 심해서 급 마무리합니다 ㅠ.ㅠ

728x90
반응형

'JAVA로 단단해지기 > JSP' 카테고리의 다른 글

웹 프로그래밍에 대한 이해 - 네트워크  (0) 2017.07.19
728x90
반응형

 

네트워크

-"전선이나 혈관,통로 등으로 이루어진 망형 조직"

- 방송사 네트워크, 인맥을 의미하는 휴먼 네트워크 등...

- IT분야에서는 '컴퓨터와 컴퓨터를 연결해 주는 망' 의 개념으로 컴퓨터 네트워크의 의미로 사용!!

 

90년대에는 컴퓨터와 컴퓨터가 네트워크로 연결되지 않음 ->> 자료 이동 시 플로피 디스켓 등을 이용함!

 

00년~10년 인터넷의 엄청난 보급으로 네트워크에 연결됨 ->>이메일 , 웹하드등 인터넷 서비스를 활용한 자료이동 활발!

 

10년 ~ 현재 4G LTE 등 고속 무선 이동 네트워크 보급, 스마트폰 , 태블릿 등 모바일 기기 보급으로 개인이 언제 어디서나 네트워크에 연결되는 기기의 사용이 가능해 짐. ->> 클라우드 기반 스토리지 서비스를 통한 개인 및 그룹 자료 공유..

●TCP/IP

Transmission Control Protocol/Internet Protocol 컴퓨터 간에 통신할 수 있또록 만든 프로토콜, 인터넷 기반 네트워크 시스템으로 하드웨어, 운영체제 , 접속 매체에 관계없이 동작할 수 잇는 개방형 구조.

응용 계층   WWW,FTP,Telnet,SMTP 와 같은 네트워크 프로그램
전송 계층  각 시스템을 연결하고 TCP 프로토콜을 이용하여 데이터 전송
인터넷 계층  IP 프로토콜을 이용하여 데이터 정의, 경로 배정
물리 계층  실제 네트워크를 접근할 수 있도록 하는 물리적인 부분

 

 

●IP 주소

TCP/IP 로 연결된 네트워크에서 각각의 컴퓨터를 구분하려고 사용하는 주소이며 숫자로 구성되어 있고 10진수를 사용한다. 

 

●인터넷

인터넷은 전 세계가 하나로 연결된 네트워크를 의미하는 고유명사이다.

인터넷은 내부 네트워크를 의미하고, 네트워크 인프라이다.

WWW,email은 인터넷 기반 서비스이다.

 

*인터넷 은 웹이 아니다 *

 

●프로토콜

네트워크에 연결된 컴퓨터들 간의 통신 규약이며 , 인터넷 서비스들은 위의 TCP/IP 4계층 중 응용계층에 해당한다.

 

●포트

네트워크 서비스를 접속하기 위한 접점으로 컴퓨터에서 여러 네트워크 서비스를 제공하는 경우 이를 구분하기 위한 용도로 사용된다.

 

●도메인 네임 시스템

DNS로 인터넷에 연결된 컴퓨터 구분을 위해 사용하는 IP 주소 대신 알기 쉬운 이름의 형태로 컴퓨터를 구분하기 위한 인터넷 서비스/시스템 중 하나이다.

도메인 관리 기관을 통해 일정 비용을 지불하고 사용이 가능하다!

 

그러면 위에서 빨간글씨로 언급했던 "인터넷은 웹이 아니다"에 대해 잠깐 설명하고 넘어가자면

 

웹은 월드 와이드 웹(www) 으로 인터넷에서 운영되는 서비스 중 하나로 사람들이 웹= 인터넷이다 라는 많은 착각을 할 정도로 대표적인 인터넷 서비스이다.

HTML 이라는 간단한 마크업 언어를 통해 콘텐츠를 제공하고  HTTP 라는 프로토콜을 사용해 TCP/IP 에서 사용하기 시작했다.

 

웹 브라우저 소프트웨어와 인터넷에 연결만 되어있으면 PC, 스마트폰 , 태블릿 등 운영체제와 하드웨어 상관없이 동일한 서비스 제공이 가능하다!!

 

●웹 서버와 HTTP

-서버(Server): 네트워크에서 서비스를 제공하는 컴퓨터

 

-클라이언트(Client): 서비스를 이용하는 컴퓨터(PC,스마트폰,태블릿...)

 

-HTTP(Hyper Text Transfer Protocol) : 웹 서비스에 사용되는 통신 규격으로 간단한 명령어와 헤더 규격으로 되어 있다.

 

 

 

 

 

 

 

728x90
반응형

+ Recent posts