[Javascript] 변수, 함수 기초

변수, 함수 기초 1


console.clear();
콘솔창 초기화


// 프로그램의 2대 구성 요소
// 변수, 함수


var a = 1;

console.log(a); // 1



변수에는 오직 하나의 값만 들어갈 수 있음


var => a 라는 변수를 만들겠다.

그 후에는 var를 사용하지 않아도 됨.


var a = 5;
a = 10;
a = 15;
a = 20;

var a = 5;
var a = 10;
var a = 15;
var a = 20;
는 문법 오류


프로그램은 위에서 아래로 순서대로 작동




변수, 함수 기초 2


// 소스코드 = 소설

//  변수 = 인물 또는 사물 또는 존재(변수는 명사)

// 함수 = 인물의 행동


console.clear(); = window.console.clear();


console.clear();


// window: 인물

// 인사: 행동


window.인사 = function() {

  console.log('안녕하세요.');

};


window.인사();



함수 = 행동

window.인사 << 주어와 동사

window는 생략이 가능




// 소스코드 = 소설

//  변수 = 인물 또는 사물 또는 존재(변수는 명사)

// 함수 = 인물의 행동


console.clear();


// window: 인물

// 인사: 행동


window.인사 = function(이름, 나이) <<<<매개변수, 총 두 종류의 데이터를 받을 수 있음 {

  console.log(이름 + '(' + 나이 + '세) : 안녕하세요.');

};


window.인사('김방울', 1);




console.clear();


window.날다 = function(방법, 비행시간) {

  console.log(방법 + ' ' + 비행시간 +' 날다');

};


window.날다('날개로', '5초간');



자판기 -> 함수

자판기 버튼 -> 매개변수

나오는 음료수 -> 결과




console.log() -> 함수

원래 있던 함수 -> 내장 함수

사용자가 만든 함수 -> 사용자 정의 함수

변수, 함수 기초 - 숫자와 문자


데이터의 형태(변수 안에 들어갈 수 있는)로는 문자, 숫자, 논리가 있다.

typeof 함수로 데이터의 형을 알 수 있다.


substr-데이터 자르기



1. 데이터의 형태

// 숫자

var a = 1;

// 문자열

var b = "hello world!";

var c = true;

var d = false;


console.log(a, b, c, d);

console.log(typeof(a), typeof(b), typeof(c), typeof(d));


콘솔

>> 1 "hello world!" true false

>> "number" "string" "boolean" "boolean"


숫자 + 문자 = 문자




2. 문자열 자르기


console.clear();


var a = '김방울';

var b = a.substr(0,1);

// 0번째 자리부터 1개를 가져오겠다


var c='김방울';

var d = c.substr(-2);


console.log(b);

console.log(d);


콘솔


"김"

"방울"




3. 데이터 정리


console.clear();


var a = 2;

var b = 'Hello world!';

var c = true;

var d = false;


// 변수의 자료형을 알려면 typeof를 사용하면 된다.

console.log(typeof(c));


// 숫자와 문자 변수를 더하면 문자가 된다.

console.log(a+b);


var i = 3.1456;


var j = parseInt(i);

// 변수의 정수형을 반환한다.

var k = parseFloat(i);

// 변수의 실수형을 반환한다.


console.log(j,k);


console.log(parseFloat('123.12312'));


콘솔


"boolean"

"2Hello world!"

3 3.1456

123.12312

변수, 함수 기초


console.clear();


window.곱하기 = function(숫자1, 숫자2){

   // alert(숫자1 * 숫자2);

  

  return 숫자1 * 숫자2;

  alert('hi');

//  retrun을 만나면 그 뒤에 아무런 많은 함수가 있더라도 실행이 되지 않음.

}

  

window.b = 10+5;

var a = window.곱하기(1,5);

// window.a = var a. 결과값이 들어감


console.log(a);




커피와 커피캐리어의 v1



console.clear();


var 배열 = [1, 2, 3];

배열.push(4);

배열.push(4);

배열[5] = 100;

console.log(배열.length);

// 배열 안에 내용이 몇 개 들어있는지


console.log('예제 1#');


// [] ==> 커피 캐리어, 배열

var 커피_캐리어 = {};

// {} -> 객체. 배열보다 자유도가 높음


// 커피_캐리어.push(1);

// 커피_캐리어.push(2); << 배열에 데이터 넣기


커피_캐리어[0] = 1;

커피_캐리어[1] = 2;


console.log(커피_캐리어);

console.log(커피_캐리어[0]);

console.log(커피_캐리어[1]);


console.log('예제 2#');


var 커피_캐리어2 = {0: 3,1: 4};


커피_캐리어2[2] = 5;

커피_캐리어2[3] = 6;

커피_캐리어2['가장 좋아하는'] = 16;


console.log(커피_캐리어2[0]);

console.log(커피_캐리어2[1]);

console.log(커피_캐리어2[2]);

console.log(커피_캐리어2[3]);

console.log(커피_캐리어2['가장 좋아하는']);

// length가 없음

변수 / 함수 기초 5


setTimeout: 주어진 시간 후 시작하는 것(1번)

setInterval: 주어진 시간을 주기로 함수가 계속 되기로 예약


문자열 세계의 초능력자 ? -> 역슬래시 \


연산자 우선순위


<h1>SJ 예제</h1>

<h3>setTimeout, setInterval</h3>


body.active{

  background-color: pink;

}


console.clear();


//  var a = function();

//  과 function a() 는 같음


function a(){

  $('body')

    .addClass('active')

}


setTimeout(a, 100);


function b(){

  $('body')

  .toggleClass('active')

}


var id = setInterval(b, 2000);





<h1>SJ 예제</h1>

<h2>특수문자</h2>


console.clear();

// 역슬래시 ---> \


console.log('"');

console.log('\' ')


var d = "\'따옴표\' \"큰따옴표\"";

// 따옴표 앞에 역슬래시 붙이기

var e = "문자열 줄바꿈은 \n 역슬래시n을 사용합니다.";

var f = "큰따옴표 안에서 ' 사용 가능";

var g = '작은따옴표 안에서 " 사용 가능';

var h = "\\ 역슬래시 표현";


console.log(d);

console.log(e);

console.log(f);

console.log(g);

console.log(h);


콘솔


"'"

"' "

"'따옴표' '큰따옴표'"

"문자열 줄바꿈은

역슬래시n을 사용합니다."

"큰따옴표 안에서 ' 사용 가능"

"작은따옴표 안에서 ' 사용 가능"

"\ 역슬래시 표현"



console.clear();



var aa = 1;

console.log(++aa);

// 먼저 더하고 출력한다.

// aa+1 의 줄임말

console.log(aa);


var aa = 1;


console.log(aa++);

// 연산자 우선순위가 낮음, 출력 후에 계산

// 1

console.log(aa);

// 2




var bb = 2;

var cc = 4;


var ds = cc + bb;

var ee = cc * bb;

var ff = cc - bb;

var gg = cc / bb;


console.log("----");

console.log(ds, ee, ff, gg);

console.log("----");


var pow = Math.pow(cc, bb);

// cc의 bb승

console.log(pow);


var sqrt = Math.sqrt(cc);

// cc의 제곱근

console.log(sqrt);


var random = Math.random();

// 0~1 사이의 임의의 난수

console.log(random)


// 0부터 100까지 수를 알고 싶다면

// console.log(random * 100)