[web] Javascipt 기본 개념 정리

 

 

JS는 기본적으로 변수의 타입이 없다. var라는 이름의 타입으로 통일되어있다.

-> 변수는 타입이 없음. var로 통일된다.

 

 

onclick

버튼을 누르면 h1태그의 안녕하세요라는 내용이 changed element!!!!라는 내용으로 바뀐다.

스크립트 부분의 함수를 보면,

getElementById를 통해서 demo1이라는 이름의 아이디를 가진 element로 접근하여

innerHTML즉 HTML의 값을 =""안의 내용으로 바꾸어 주겠다는 내용이다.

 

버튼부분에서는

onclick속성을 통해 버튼일 클릭되었을때 스크립트 function을 실행시켜서 HTML 내용을 바꾸도록 되어있다.

<div>

<h1 id="demo1">안녕하세요</h1>

<button type="button" onclick="myfunction1()">click!</button>

</div>

<script>

function myfunction1(){

document.getElementById("demo1").innerHTML="changed element!!!!";

}

</script>

 

 

document.write()

HTML 문서가로드 된 후 document.write ()를 사용하면 기존의 모든 HTML 이 삭제됩니다 .

따라서 document.write () 메소드는 테스트에만 사용해야 한다.

document.write(내용) 이렇게 꼭 괄호안에다가 내용을 입력해야한다!!! 주의하자.

 

이 예제에서는 버튼을 누르면 write()의 내용이 기존의 HTML이 삭제된 화면에 출력된다.

<div>

<p>document.write test!</p>

<button type="button" onclick="myfunction2()">click!</button>

</div>



<script>

function myfunction2(){

document.write(19+2321+2321);

}

</script>

 

 

 

 

window.alert()

window.alert() 얘도 괄호안에다가 해야함!! 내용을

괄호안에 문자열 변수를 넣어서 출력하는 식으로 하면 좋을듯!?하다.

window를 생략하여 alert()로만 해도 가능하다

<div>

<p>window.alert test!</p>

<button type="button" onclick="myfunction3()">click!</button>

</div>

<script>

var a="안녕 잘가"

function myfunction3(){

alert(a);

}

</script>

 

 

window.print()

window.print()를 이용하는 방법이 유일하게 프린터쪽에 접근하는 방법이라고 한다.

 

해당 예제에서는 버튼을 누르면 인쇄창이 뜨게 된다.

<div>

<p>window.print 예제</p>

<button type="button" onclick="window.print()">print!!!</button>

</div>

 

 

 

변수를 활용한 예제

+연산을 활용하여 문자열 및 숫자로 이루어진 하나의 문자열을 만들 수 있다.

<div>

<p>변수가 표시되는 방식!</p>

<p id="demo3"></p>

</div>

<script>

var x=6, y=100;

var z=x+y;

document.getElementById("demo3").innerHTML="x=6이고 y=8일때 z = " + z + ".";

</script>

 

 

변수 undefined 타입

값이 없는 변수의 값은 undefined 타입도 undefined이다.

car = undefined 이런식으로 초기화가 가능하다.

<div>

<p>변수 undefined 예제</p>

<p id="demo4"></p>

</div>

<script>

var x=6;

var y=100;

var z;

z=x+y;

document.getElementById("demo4").innerHTML="x=6이고 y=8일때 z = " + z + ".";

z = undefined;

document.getElementById("demo4").innerHTML="undefined된 z의 값 = " + z + ".";

</script>

 

객체(object)의 정의

 

이런 식으로 객체 정의가 변수를 통해 가능하다.

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

 

이때 객체의 접근 방법은 2가지로 다음과 같다.

person.firstName;

person["firstName"]

 

 

이벤트 속성

js 이벤트 속성은 다음과 같다.

onchange : An HTML element has been changed

onclick : The user clicks an HTML element

onmouseover : The user moves the mouse over an HTML element

onmouseout : The user moves the mouse away from an HTML element

onkeydown : The user pushes a keyboard key

onload : The browser has finished loading the page

 

 

문자열 안의 ' or " 넣기

문자열을 선언할때

var x= "hello 'world' gg";

이런식으로 문자열을 감싸는 따옴표와 같은 형식이 아니라면 안에 있는작은따옴표는 그대로 문자열로 들어가게 된다.

만약 문자열ㅇ르 감싸는 따옴표와 같은형식을 경우에는 \(역슬래쉬)를 이용하여

var x= "hello \"world"\ gg"; 이런식으로 한다면 x를 출력했을때

hello "world" gg로 원하던 문자열을 얻을 수 있다.

 

 

연산자 ===

연산자 ===는 타입과 값모두 동일했을때 ture를 반환하는 연산자 이다.

===으로 객체(object)를 비교한다면 항상 false를 반환한다

 

 

참고

자바스크립트에서 숫자의 범위는

정수부분 15자리

소수부분 17자리라고 한다.

 

 

숫자와 문자열을 더하면?

숫자와 문자열을 더하면 문자열로 묶인다.

 

예시)

var x = 10;

var y = 20;

var z = "30";

var result = x + y + z;

일때 result는 30+"30"이 되어서

결과적으로 문자열 타입으로 값은 3030이 된다.

 

하지만 이런식으로 문자열로 숫자를 지정한 상태여도

계산과정에서 숫자로 인식할 수 있다고 한다.(/ * -만 해당 +는 문자열을 합치는 기능을 수행하므로 +연산은 더하기연산으로 받아들여지지 않음)

var x = "100";

var y = "10";

var z = x / y;

이때 z값은 10이 된다.

 

 

 

변수를 숫자로 바꾸는 방법

Number() JavaScript 변수를 숫자로 변환하는 데 사용할 수 있습니다.

 

예

Number(true); // returns 1

Number(false); // returns 0

Number("10"); // returns 10

Number(" 10"); // returns 10

Number("10 "); // returns 10

Number(" 10 "); // returns 10

Number("10.33"); // returns 10.33

Number("10,33"); // returns NaN

Number("10 33"); // returns NaN

Number("John"); // returns NaN

 

 

 

 

배열에서 max값 찾는 방법

 

<div>

<p>배열에서 max 값찾기 (Math.max.apply)</p>

<p id="demo9"></p>

<p id="demo10"></p>

</div>

<script>

var numbers=[40,100,1,5,25,10,12,3,21,321,222,];

document.getElementById("demo9").innerHTML="초기 배열 값 = " + numbers;

document.getElementById("demo10").innerHTML= "이 중 가장 큰 값 = " + Math.max.apply(null, numbers);

</script>

 

출력화면

 

 

 

 

배열 filter

filter()메소드는 테스트를 통과하는 배열 요소를 사용하여 새 배열을 만든다.

 

이 예제는 18보다 큰 값을 가진 요소로 새 배열을 만든다.

 

<div>

<p>filter 함수 예제</p>

<p id="demo5"></p>

<p id="demo6"></p>

</div>



<Script>

var numbers = [45, 4, 9, 16, 25];

var over18 = numbers.filter(myFunction);

document.getElementById("demo5").innerHTML="초기 배열값 = " + numbers;

document.getElementById("demo6").innerHTML="over 18 값 배열 = " + over18;



function myFunction(value, index, array) {

return value > 18;

}

</Script>

출력화면

 

 

Date()

 

var x = Date();

이런 식으로 실시간 날짜 설정이 가능하다.

 

<div>

<p>Date() 예제</p>

<p id="demo7"></p>

</div>

<script>

var x= Date();

document.getElementById("demo7").innerHTML=x;

</script>

 

 

 

 

랜덤변수 만드는 방법

Math.random(); 0에서1사이의 랜덤값을 반환하는 변수이다.

floor 와 함께사용하면 랜덤의 정수를 반환시킬 수 있다.

Math.floor(Math.random() * 10); 0~9

 

예제

<div>

<p>랜덤변수 만들기(0~99)</p>

<p id="demo8"></p>

</div>

<script>

var x;

x= Math.floor(Math.random()*100);

document.getElementById("demo8").innerHTML=x;

</script>