about. What I learned/about.Gudi

자바스크립트(Javascrip

Logan. 2021. 4. 29. 18:20

브라우저에서만 동작하는 언어로 만들어졌다. 하지만 현재는 다르다.

 

#변수

 타입 = var => 정수, 실수 , 문자형, 문자열, 배열, 객체, 화면객체, 함수, 이벤트 

  • 만든 시점부터는 사라지지않고
  • 어디서나 사용가능하다. 

기본문법은 자바와 같다.

 

#함수(function) - method와 동일,기능, 동작.

 

function 함수명( 인자명, .... 0부터 ~N개까지 입력 가능) {

      내용 

      (만약 반환값 존재 시 RETURN 값; 작성 해야한다.)

 

#document.getElementById(아이디명) => 화면객체

화면 객체 : 화면에 존재하는 html객체(button, textbox dhl ...)

html에 이벤트 줄 때 : 대상에 속성으로 ON ~~을 선언 

화면 객체 속성(attribute) => return : 현재 화면 객체의 속성에 지정된 값

화면객체 속성 = 값   ::: 해당 화면객체의 속성에 값을 넣는다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var a = 10;

console.log(a);

if(a>0){
	console.log("a는 0보다 크다.");
} else{
	console.log("a는 0보다 작거나 같다.");
}

a= 2;
var b =8;
var c =1;
var emp =0;

if( a >b){
	emp =a;
	a = b;
	b = emp;
}
if(a>c){
	emp = a;
	a = c;
	c=emp;
}
if(b>c){
	emp = b;
	b=c;
	c=emp;
}

console.log(a);
console.log(b);
console.log(c);
var t =2 ;
for(var i = 1; i < 10; i++){
	console.log(t + "*"+ i + "=" + (t*i));
}


var arr =[2, 8, 9]

var emp =0;
/*  */
/* for(var i =0; i < arr.length-1; i ++){
	for(var j =i+1; j < arr.length; j++){
		if(arr[i]<arr[j]){
			emp = arr[i];
			arr[i] = arr[j];
			arr[j] = emp;
		}
	}
} */
/* 뒤에서 부터 시작 */
for(var i =arr.length-1; i >0 ; i --){
	for(var j =i-1; j >=0; j--){
		if(arr[i]>arr[j]){
			emp = arr[i];
			arr[i] = arr[j];
			arr[j] = emp;
		}
	}
}



for(var i =0; i <arr.length; i++){
	console.log(arr[i]);
}

function test() {
	alert("짜장면 먹으러 갑시다~~~");
}
var w;
function test2() {
	//location 주소창
	//herf : 주소 
	// 현재창에 띄울 경우
	//location.href = "http://google.co.kr";
	//새창을 띄울 경우
	w = window.open("http://google.co.kr", "_blank");
}

function test3() {
	w.close();
}
var s = "3.1415a"
console.log(s * 1 + 1);
console.log(isNaN(s*1)); //isNaN(값) : 값이 Nan인지 확인 ---NaN은 계산이 불가능한 타입이다를 알려줌

function getTxt1(){
	//document : 해당 html
	//getElementById : id를 찾아 화면 객체를 취득
	//화면객체.value : 화면객체의 속성 중 value의 값을 가져옴
	var t =document.getElementById("txt1"); 
	alert(t.value);
	t.value ="가져갔다";
}
function cc() {
	document.getElementById("box").className = "b";
}

function cc2(obj) {
	obj.className = "a";
	
}

</script>
<style type="text/css">
.a,.b{
	display: inline-block;
	vertical-align: top;
	width: 100px;
	height : 100px;
}
.a{
	background-color: red;
}
.b{
	background-color: blue;
}
</style>

</head>
<body>
	<input type="button" value = "버튼" onclick="test();"/>
	<input type="button" value = "이동버튼" onclick="test2();"/>
	<input type="button" value = "닫기" onclick="test3();"/>
<br/>

<input type ="text" id ="txt1"/>
<input type ="button" value = "취득" onclick ="getTxt1();"/>
<br/>
<div class = "a" id ="box" onclick="cc2(this);"></div>
<br/>
<input type ="button" value="바꿔라" onclick = "cc()"/>
</body>
</html>