잰니의 성장블로그✈

변수 스코프(scope) - 지역변수와 전역변수 사용자 함수 내 (서브루틴) 에서 사용되는 변수를 지역변수라고 하고 메인루틴에서 사용되는 변수를 전역변수(Global Variable)이라고 한다. 변수 선언에서 var 예약어를 사용했을 때 사용되는 영역(Scope)을 가지고 있기 때문에 재할당과 재선언을 할 수 있다. 함수가 다르면 동일한 함수를 재선언하고 값을 재할당해서 사용해도 된다. 하지만 잘못 사용하면 오류가 발생할 수 있기때문에 가급적 var를 사용하지 않도록 한다. 전역변수(함수 밖에서 선언하는 변수와 상수변수)는 최소한으로 사용하고, var 변수는 함수의 시작 부분에서 선언하며, for문에서는 var 보다 let를 사용해서 변수를 선언해주는 것이 좋다. 그리고 ES6 이상을 사용한다면 var..

함수 값 반환 자바스크립트에서 사용되는 함수는 변수와 마찬가지로 할 일을 수행한 뒤 결과로 나온 값을 함수 값 반환을 통해서 함수를 호출한 곳으로 값을 보낸다. document.write(), alert()와 같이 구체적인 행동 명령이 있는 함수의 경우 return 제어문은 필요없다. 그 이유는 함수는 원래 종료되면 호출 위치로 자동 복귀한다. 메인루틴과 서브루틴 : 자바스크립트를 포함해서 프로그래밍 언어에서 메인루틴은 서브루틴, 즉 함수 정의와 같이 프로그램의 부가적인 영역을 제외한 프로그램 흐름의 중심이 되는 부분을 의미한다. 프로그램은 메인 루틴의 처음 부분에서 시작되어 중간 서브루틴을 실행한 뒤 최종적으로 메인루틴에서 종료된다. ex) 첫번째 입력값부터 두번째 입력값까지의 합계 구하기 ex) 숫자..

함수(Function)란? 프로그램 원래 위에서 아래로 순차적으로 하나씩 실행되는데 제어문으로 실행 순서 로직을 변경할 수 있다. 그리고 프로그램의 기능별로 묶어서 원하는 기능만 프로그램해서 코드의 묶음(이를Code Block)을 만들어서 필요한 기능만 따로 실행하게 하는 것을 함수라고 한다. 자바스크립트 함수는 그 기능이 자체에 내장되어져 있는 내장함수와 사용자가 직접함수를 정의해서 사용하는 사용자(정의)함수로 나뉜다. 변수나 데이터를 정의해 둔 함수에 매개변수를 지정해서 함수를 호출하므로써 실행시키는데 함수의 실행으로 얻어진 결과 값을 호출 함수에 되돌려주기도 한다. 함수에서의 지역변수와 전역변수의 개념도 있다. alert() 함수를 사용해서 자바스크립트의 실행 내용을 웹 브라우저에 띄우는데 이도 내..

반복문 반복문은 특정 문장을 반복해서 수행할 때 사용된다. 자바스크립트의 반복문에는 while 문, do ~ while문 , for문이있다. 반복문이 이중으로 사용되는 '이중for 문'도 있다. 또 반복 루프를 빠져나가는 break; 문과 해당 반복을 건너뛰는 continue 문도 있다. WHILE문 while (조건식) { 실행문1 ; 실행문2 ; ... } ex ) 1 ~ 10까지 합계 구하기 /*프로그램에서 초기화(initiative)한다는 것은 변수가 있었던 메모리상의 데이터를 지운다는 의미이다. 이전에 실행했던 프로그램이 사용했던 메모리에는 garbage collection을 종료 시 수행하지 않았다면 local variable(지역변수)의 값은 함수의 소멸과 함께 사라지지만 global var..

■ Switch 문 Switch 문은 if 문처럼 조건문인데 변수값이나 표현식에 따라서 수행해야 하는 코드를 달리할 때 사용된다. switch (변수) { case 1 :// 여기는 콜론: 실행문1;// 문장 끝을 표시하는 세미콜론 ; 실행문2; ... break;//순환(looping)을 막기 위해서 벗어남 case 2 : 실행문3; 실행문4; ... break; ... defalt : 실행문7; 실행문8; ... } //switch ( ) 안의 있는 변수의 값이 1이면 case 값1로 가서 실행문1, 실행문2, ...를 실행하고 break;에 의해 case 값1과 switch 문 //자체를 빠져나온다. 만일 변수의 값이 2이면 case 값2로 가서 실행문3, 실행문4, ...를 실행한 뒤 역시 bre..

■ 형변환 자바스크립트에서도 형변환이 있는데 변화시키고자 하는 데이터 타입을 앞에 써준다. var num = Number( prompt("숫자를 입력하세요") ) /* "숫자를 입력하세요"라는 메시지에 10을 입력했을 때 이를 숫자로 확실히 변형한다면, 앞에 숫자를 의미하는 Number()를 붙이면 입력하는 값이 숫자가 된다. */ =>정수형 숫자 2와 문자열 “2”는 서로 다르다. 정수형 2는 그냥 숫자로써 00000010이 되고, “2”는 문자열써 ASCII(American Standard Code for Information Interchange)에서 보면 00110010이다. 따라서 서로 다르다. ■ 조건문 조건문은 참/거짓에 따라서 실행되는 프로그램 코드를 달리 할 때 사용된다. 자바스크립트 조..

■ 연산자 자바스크립트의 연산자는 산술(arithmetic) 연산자, 할당(assignment) 연산자. 문자열(string) 연산자, 비교(copmaparison) 연산자, 그리고 논리(logical) 연산자가 있다. - 산술 연산자 : 숫자 연산에 사용된다. + 덧셈, - 뺄셈, * 곱셈, / 나눗셈, % 나머지, ** 거듭제곱, ++ 1 증가, -- 1 감소가 있다. 일반 사칙연산에서처럼 곱셈과 나눗셈이 덧셈과 뺄셈에 우선하고 필요하면 ( )로 계산 순서를 변경할 수 있다. - 할당 연산자 : 할당 연산자는 데이터나 변수 값을 다시 변수에 저장해서 메모리 공간에 할당한다. 크다 5 > 3 true 5는 3보다 크다로 true = 크거나 같다 5 >= 3 true 5는 5보다 크거나 같다로 true ..

■ 자바스크립트 기본 문법 변수는 데이터를 저장하는 컴퓨터의 메모리 공간이다. 변수와 변수에 데이터 저장 방법, 그리고 변수나 데이터 값을 브라우저 화면에 출력하는 네 가지 방법이 있다. ** 오류 발생시 F12 키를 누르면 내용을 확인할 수 있다. ■ 자바스크립트 주석문 => (한줄 // ~ 를 사용하고, 여러 줄 주석은 /* ~*/ 사용한다. ) ** HTML 주석문 ( 한줄이나 여러 줄이나 사용한다.) / CSS 주석문 ( 한 줄이나 여러 줄이나 /* ~ */ 사용한다. ) ■ 변수 컴퓨터 메모리에는 정수,실수,문자 등 다양한 데이터들이 저장된다. 데이터를 메모리 공간에 저장하기 위해서 자바 스크립트, 파이썬, C등의 프로그래밍 언어에서는 변수라는 개념을 사용한다. 변수는 데이터가 저장되는 메모리 ..

자바스크립트란? HTML/CSS로 구성된 HTML문서를 동적으로 만드는데 사용되는 프로그래밍 언어이다. 웹 프로그래밍 웹(www)은 인터넷에 연결된 컴퓨터를 통해서 서로 정보를 공유하고 소통하는 사이버 공간이다. 웹에서는 인터넷 익스플러나 크롬과 같은 웹 브라우저가 중요한 역할을 한다. 웹에서 사용자들은 웹 브라우저를 통해서 인터넷 상에 있는 원격 컴퓨터 서버에서 제공되는 웹 서비스를 이용한다. 웹 프로그래밍은 웹에서 사용되는 회원가입, 로그인, 쇼핑몰 장바구니, 온라인 결제, 온라인 예약, 스케쥴 관리 등의 기능을 실제로 구현하는 작업을 의미한다. 참고로 웹 디자인은 웹 사이트에 들어가는 디자인적 요소, 즉 텍스트, 이미지, 동영상, 음악 등의 콘텐츠를 디자인하는 것을 말한다. ** 서버 ㅣ 서비스를 ..

플렉서블 박스(Flexable Box) 플렉서블 박스는 간단히 플렉스 박스(FlexBox)라고도 하는데 박스를 쉽게 가변적으로 만들어 주고 동시에 반응형 웹을 위한 몇 가지 기능도 제공해주는 최신 기술이다. 플렉스 박스는 컨테이너(Container)와 아이템(Item)이라는 두 개의 개념이 필수적으로 존재해야 한다. 아이템이 컨테이너 안에 들어 있게 된다. Flex Box 장점 콘텐츠를 수평 방향으로 쉽게 중앙 정렬할 수 있다. 뷰 포트의 너비에 따라 요소의 배치 순서를 달리 할 수 있다. 박스 내 요소의 여백과 배치를 자동으로 조절 할 수 있다. Flex Direction의 속성 값 row 기본 값, 플렉스 박스의 아이템을 수평 방향으로 배치(좌->우) row-reverse 속성 값 row와 동일하나 ..