728x90
반응형

 

브라켓을 다운로드하기 위해서 

brackets.io에 접속합니다.

 

 

 브라켓을 다운받기전에 

크롬이나 NodeJs 같은 경우는 제 블로그에도 있고

Atom을 설치했을때도 이미 설치를 했기 때문에 넘어가도록 하겠습니다.

 

꼭 크롬과 NodeJs를 설치해주시기 바랍니다.

 

다운받은 파일을 실행 시킨후 Next를 눌러줍니다

 

Install 버튼을 클릭해 줍니다.

 

 

 

 

Finish 버튼을 눌러줍니다.

여기서 설치가 끝난게 아니라

Atom 을 설치했던 것 처럼 그 이후 과정이 남아있습니다.

 

 

처음 브라켓을 시작하면 이런 화면이 생성됩니다.

 

레고모양의 확장기능 관리자에 들어가셔서  "Nodejs" 를 검색하신 뒤에

 

NodeJS Integration 을 설치해 줍니다.

위와 같은 방법으로

Custom Work 를 다운받아 줍니다.

 

Icon 을 검색하신뒤에 Brackets Icons 을 다운받아 주시면 이제 브라켓으로 

코딩을 할 작업을 끝낸것 입니다.

 

Atom 에서는 ctrl + shift +B 였다면

brackets에서는 ctrl + shift + N을 눌러줍니다.

 

저는 C드라이브에서 사용자의 폴더 아래에 따로 브라켓 파일을 만들어서 프로젝트를 진행했습니다.

안녕하세요가 보이지요?

 

그리고 저 번개 표시는 크롬으로 바로 미리보기를 할 수 있는 버튼입니다.

저 버튼으로 실행하려면 html 파일이 있어야하겠지요?

 

브라켓을 써본결과 Atom보다 잔렉이 없어서 더 부드럽고 좋네요.

아직 더 써봐야 하겠지만 설치만해도 절반은 공부했다고 교수님님께서 늘 말씀하셔서

 

저도 절반은 공부한것 같네요 ㅎㅎ

 

728x90
반응형
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
반응형

 

 

https://atom.io에 접속을 하면 컴퓨터의 사양에 맞추어 인스톨러가 바로 제공됩니다.

 

다운받은 인스톨러를 실행시키면 위와같은 창이뜨고 설치가 됩니다..

 

File->Setting 을 클릭하면 아래와 같이 세팅을 할 수 있는 창이 제공됩니다.

 

 

여기서 Install 을 클릭해주시고

 

script를 검색창에 입력후 Pakages를 눌러줍니다.

 

그리고 Install을 클릭 후 설치가 다 되기를 기다려 줍니다.

 

설치가 끝났으니 테스트를 해보죠

 

hello 의 JavaScript파일을 불러옵니다.

 

 

불러오면 오른쪽에 hello world를 출력하는 코드가 있는데요

 

Ctrl + Shift +B 버튼을 누르면 아래 빨간 동그라미와 같이 오류가 발생됩니다.

 

 

이를 해결하기 위해서는 Node.js 가 필요합니다.

 

https://nodejs.org/en/에 접속합니다.

 

 

Node.js도 컴퓨터 환경에 맞게 인스톨러가 제공됩니다.

 

왼쪽 버전은 대부분 유저들이 추천하는 버전이고

 

오른쪽 버전은 최신의 버전을 다운받을 수 있습니다.

 

저는 왼쪽의 추천버전을 다운받도록 하겠습니다.

 

인스톨러를 실행시켜주시고 Next만 눌러주시면 설치를 손쉽게 끝낼 수 있습니다.

 

Next

 

Install 클릭해주시고 

 

 

CMD 를 실행시켜주고 node -v 를 입력하면 현재 설치된 버전을 확인 할 수 있습니다.

 

저는 6.11.1이 맞습니다~

 

 

그리고 다시 hello 파일을 Ctrl + Shift + B 버튼을 눌러서 실행시켜주면

 

아까와 같이 오류가 발생되지 않고 실행되는 것을 확인할 수 있습니다.

 

 

 

 

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

+ Recent posts