본문 바로가기

인문학도 개발일지/웹프로그래밍

[수업노트] JavaScript - 자바스크립트 개요

 

 

 

" 웹 문서의 구성요소 "



▪ HTML

웹 문서 내용의 구조를 정의

 

▪ CSS(Cascade Style Sheet)
웹 문서의 디자인을 처리

 

▪Javascript
웹 문서 내에서 동적인 부분을 처리

 

 

 

 

 

 

 

 

" Javascript란? "



웹 문서(HTML) 내에서 실행되는 프로그램을 구현하기 위한 언어
HTML 문서 내에 작성하며 Web Browser 에 내장되어 있는 Javascript 엔진에 의해 실행된다.  
객체지향 언어(함수도 지원)
이벤트(사용자가 action을 취하는 것) 중심 언어

 

 

 

 

 

 

 

" 변수 "


변수선언

var 변수명 [= 값]

또는

let 변수명 [= 값]

 

 

 

var 변수 : 선언된 함수의 전 영역에서 사용할 수 있다. (function scope), 같은 이름의 변수를 여러 개 선언가능 

var num = 20; 
var address = “서울시 종로구”; 
var num1, num2, num3; 
var num1, num2=20, num3=40; 
var ageList = [10, 20, 30, 40, 50];

 

 

 

let 변수 : 선언된 block 내에서만 사용할 수 있다. (block scope). 같은 scope에 같은 이름의 변수를 선언할 수 없다. 

let num = 20;
let address = “서울시 종로구”;
let num1, num2, num3;
let num1, num2=20, num3=40;
let ageList = [10, 20, 30, 40, 50];

 

 


 변수명 규칙
사용할 수 있는 문자 : 글자, 숫자, 특수기호는 $와 _
숫자는 두 번째 글자부터 사용가능

 

 


▪ 변수에 값 대입하기
– 대입 연산자 사용
–값 직접 대입: var y = 20;
–표현식(계산식)으로 대입

 

 

 

▪숫자 표현식

var num = 6+7;
var num = (10/2) * 3; 
var num = 10.22-3.21 ; 

 

 

 

▪논리 표현식

var flag = x >2;
var flag = 10 == 15;

 

 

 

▪문자열 표현식

var str = “super”+”computer”; 
var date = “3월”+21+”일”; 

– 다른 변수의 값 대입 : var x = y;
– 다른 function 의 실행 결과 대입 : var k = abc();

 

 

 

 

 

 

 

" 연산자 "



산술연산자
–+, -, *
–/ : 나누기, %: 나누기 나머지

 

 

 

▪문자열 연산자
–+를 이용해 두 문자열 또는 문자열과 다른 타입의 값을 붙인다.
–“a”+“b” : “ab”
–“결과 : “+10 : “결과 : 10”

 

 

 

▪증감 연산자
–변수++, ++변수 : 변수의 값을 1 증가 시킨다.
–변수--, --변수: 변수의 값을 1 감소 시킨다.

 

 


▪ 비교연산자
–크기 비교 : > , >=, < , <=

 

 

 

동등 비교

==, != (타입과 상관없이 값이 같은지 여부 비교)

=== , !== (값 뿐만 아니라 타입도 같은지 여부 비교)

10 == “10” : true, 10 === “10” : false

 

 

 

▪논리연산자
– && , || , !

 

 

 

▪조건 연산자 (삼항 연산자)
–조건 ? 참값 : 거짓값
–var s = i>=0 ? ”양수” : ”음수"