javascript

Daily Codig Reminder

javascript

char1ie 2023. 12. 24. 13:57

01 basic

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript">
	console.log("hello1"); // 콘솔에 메시지 뜸
	console.log("hello2",100, "aaa");
	console.log("hello3"+100+"aaa");
	//2. 브라우저에 출력
	document.write("<h1>capibara</h1>")
	document.write("<h1>coffeebara</h1>")


</script>
</head>
<body>
aaaaaaaaaaaaaaa
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>
	aaaaaaaa
	<script type = "text/javascript">
	console.log("hello1"); // 콘솔에 메시지 뜸
	console.log("hello2",100, "aaa");
	console.log("hello3"+100+"aaa");
	//2. 브라우저에 출력
	document.write("<h1>capibara</h1>")
	document.write("<h1>coffeebara</h1>")


</script>
aaaaaaaaaaaaaaa
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 id ="test" >id test header ======</h1>
capibara
coffeebara

<script type ="text/javascript" >
	//1. 개발자도구 console 에 출력
	console.log("hello world", 100, "aaa");
//2. 브라ㅏ우저에 출력
	document.write("<h1> hello2 ========</h1>");
	document.getElementById("test").style="background-color:red";
	//브라우저에 dom 이 출력 후 dom 접근 사용 문제가 없음
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<body>
	<p id ='xx'>capibara</p>
	<script type = "text/javascript" src="test.js">
</script>
	<script type = "text/javascript">
console.log(document.getElementById("xx"));

</script>
</body>
</html>

console.log("test.js : ", document.getElementByID("xx"));
console.log("js-Hello");
document.write("capibara");

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>hello</p>
<script type ="text/javascript">
	document.write("world1<br>");
	document.write("world2<br>");
	console.log('aaaaaa');
	document.write('A<br>');
	document.write('홍<br>');
	document.write(10+"<br>");  //정수
      document.write(3.14+"<br>");  //실수 
      document.write(true); //boolean
      document.write(false);
      document.write("<br>");
      document.write(undefined); //값이 정의 안됨
      var test//변수 선언 초기화 없음
      console.log("test : ",test);
      document.write(NaN);
      console.log(parseInt("10"));
      console.log(parseInt("홍길동"));
        document.write("<br>");
      document.write([10,20,30]);
      document.write(function(){});
           document.write("<br>");
      document.write({"name":"홍갈동","age":20});
      
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type ="text/javascript">
	console.log("hello\"world");
	console.log("hello\'world");
	console.log("hello\tworld");
	console.log("hello\nworld");
	console.log("hello\\world");
</script>
</head>
<body>
<p>hello</p>
</body>
</html>

02. dataType

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type ="text/javascript">
var name ="홍길동";
var age =20;
var array =[1,2,3,4];//json
var obj = {"username":"이순신", "age":44}; //객체의 json key/value
var result = true; //boolean
var xxx; //undifined
var kkk = null;// nnull
var zzz = function(){}; ///함수 객체 변수에 함수를 저장 가능
console.log("123"+10);
var xyz = parseInt("123");
console.log(xyz+10);

var xyz2 = parseInt("hello"); //NaN Not a number
console.log(xyz2);//NaN

name = 200;
console.log(name);
console.log("obj.username", obj.username,"obj.age", obj.age);
console.log("obj['username']", obj['username']);
////////////////////////////////////
console.log(xxx);

var foo = { "name": 'sss',
"age":20
}
console.log("foo.name", foo.name,"foo.age", foo.age);
console.log("foo['name']", foo['name'],"foo['age']", foo['age'])
console.log(foo[0]+"\\t"+foo[1]);
console.log(foo.address);
</script>
</head>
<body>
</body>
</html>

3. 변수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type ="text/javascript">
	var name ="홍길동";
	var age =20;
	var array =[1,2,3,4];//json
	var obj = {"username":"이순신", "age":44}; //객체의 json key/value
	var result = true; //boolean
	var xxx; //undifined
	var kkk = null;// nnull
	var zzz = function(){}; ///함수 객체 변수에 함수를 저장 가능
	var xyz = parseInt("123");
	console.log(xyz+10);
	console.log( typeof name);
	console.log( typeof age);
	console.log( typeof array);
	/////////////////////////////
	console.log( typeof obj);
	console.log( typeof result);
	console.log( typeof xxx);
	console.log( typeof kkk);
	console.log( typeof zzz);
	console.log( typeof xyz);
	//////////////////////
	console.log( typeof name=="string");
	console.log( typeof age=="number");
	console.log( typeof array=="object");
	
</script>
</head>
<body>

</body>
</html>

4. 데이터 형변환

데이터가 필요에 의해서 자동으로 형변환 된다.

가. *,/,- 사용하는 경우 ( +제외) 예> var test = “100” * 2; è 200
나. 불린값으로 변환 다음과 같은 5가지 데이터는 필요에 의해서 false 값 으로 변환된다.
역으로 5가지 이외의 데이터는 필요에 의해서 true 값으로 변환된다.

0
-”
NaN
null
undefine

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type ="text/javascript">
	var x2 = "10" - 5 ;
	var x3 = "10" * 5 ;
	var x4 = "10" / 5 ;
	var x1 = "10" +1+2;
	var x0 = parseInt("10")+1+2;
	console.log(x1+" "+x2+" "+x3+" "+x4);
	console.log(x0);
	
	var y1 = 0;
	var y2 ='';
	var y3 =parseInt("aaa");
	var y4 =null;
	var y5;
	
	var name="hello";   //string=>true�� �ڵ�����ȯ
     var obj= [];   //object
     var newName= new String("hello");  //String ��ü 
     var test=100;
     
     if(test){
		 console.log("test is true");
	 }
	 if(obj){
		 console.log("obj is true");
	 }
	 if(name){
		 console.log("name is true");
	 }
	 if(!y1){
		 console.log("y1 is false\t"+y1);
	 }
	  if(!y2){
		 console.log("y2 is false\t"+y2);
	 }
	  if(!y3){
		 console.log("y3 is false\t"+y3);
	 }
	  if(!y4){
		 console.log("y4 is false\t"+y4);
	 }
	  if(!y5){
		 console.log("y5 is false\t"+y5);
	 }
</script>
</head>
<body>

</body>
</html>

03_0. variable

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type ="text/javascript">
	var str;
	console.log(str);
	str ='A';
	console.log(str);
</script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var str = "world1", str2 ='A';
	
	console.log(str);
	console.log(str2);
</script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var str = "world1"
	var str2 =str;
	
	console.log(str);
	console.log(str2);
</script>
</head>
<body>

</body>
</html> //결과같음

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var str ="world1";
	var str = 'A';
	
	console.log(str);
	console.log(str2);
</script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var str ="world1";
	console.log(str);
      str = 10;
      console.log(str);
      str = true;
      console.log(str);
      str = [10,20,30];
      console.log(str);
      str = null;
      console.log(str);
      str = undefined;
      console.log(str);
      str = NaN;
      console.log(str);
      str = {"name":"홍길동","age":20};
      console.log(str);
      console.log(str.name, str.age);
</script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type ="text/javascript">
	//자바 스크립트만의 특징- 변수의 사용범위가 함수 scope
	var n =10; //전역변수
	{
		var n2 =20; //전역변수
	}
	function test(){ //함수안
	if(true){
		var n3 = 30; //함수 안의 로컬변수 = 범위는 함수 scope임
	}

		n4 = 40; //var 없음 전역변수로 자동등록 권장하지않음
		console.log("함수 안에서의 출력:",n,n2, n3,n4);
		console.log(n);
	}
	test(); //함수 호출
	console.log(n);
	console.log(n2);
//	console.log(n3);
console.log(n4);// 전역변수로 사용

</script>
</head>
<body>

</body>
</html>

가. 변수 선언

var 변수명; // 파싱단계에서는 undefined 값이 할당된다.
나. 초기화 변수명 = 값; //런타임시에 지정된 값으로 할당된다.

다. 특징

데이터형을 지정하지 않는다. (실행단계에서 데이터형이 지정되기 때문에 데이터 종류에 상관없이 저장가능하다.)
함수단위로 scope가 정해진다. ( 블럭단위 scope가 아니다.) var 를 지정하지 않으면 전역scope(전역객체:window)에 동적으로 변수가 정의된다. ( 즉, var가 없으면 변수가 정의되는 것은 파싱 단계가 아니고 런타임에 동적 정의됨
6 .변수의 유효범위와 끌어 올림( hoisting
자바스크립트에서 함수의 유효범위는 이 함수 안에서 선언된 모든 변수가 함수 전체에 걸쳐 유효하다는 의미이다. 즉, 변수가 선언되기 전에도 유효하다. 이런 자바스크립트의 특징을 비공식적으 로 ‘끌어올림’이라고 부른다.
=> 자바스크립트 코드는 함수안에 있는 모든 변수를 함수 맨 꼭대기로 ‘끌어올 린’것 처럼 동작한다. 선언만 되고 초기화는 아직 안됨

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type ="text/javascript">
	console.log(foo);
	
	var foo ="aaa";
	foo ="inky";
	console.log(foo);
</script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var p = prompt ("please enter your name","");
	console.log(p+1);
</script>"
</head>
<body>
<p>capibara</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type ="text/javascript">
	function  outputNumbers(count){ //function 리턴타입없음 (매개변수명만){}
		var test='test';//로컬
		test2='test2'//전역변수
		for (var i = 0; i<count; i++){
			console.log(i);
		}console.log("i>>",i);
	}
	outputNumbers(5);// 함수 호출하여 함수 사용
	console.log(test2);//가능
	console.log(test);//사용불가능
	console.log(i);//i 사용불가

</script>
</head>
<body>

</body>
</html>