Javs Script | Notion

업데이트데모가 적용될 곳

-->버튼을 클릭하면 updateDemo메서드가 실행된다는 뜻 -->html문서에서 script태그에서 자바스크립트 기능을 구현하며, script는 head,body 어디에서 쓰여도 상관없으나 주로 성능상의 효율로 인해 body부분에 작성한다. 함수를 정의하기 위해서는 function 메서드명(){} 이라 작성. document는 해당 html문서객체를 의미하며 getElementBy메서드를 통해 구체적요소를 특정함. id,class,또는 태그 다 가능함. innerHTML을 통해 문자를 변경! 그래서 여기서 적용버튼을 클릭하면 p태그인 '업데이트데모가 적용될 곳'은 '변경됩니다'라는 문구로 변경된다 "> 업데이트데모가 적용될 곳

<!DOCTYPE html>
	<html>
		<head>
			<meta charset=UFT-8>
			<title></title>
		</head>
		
		
		<body>
		
			<p class="c1">업데이트데모가 적용될 곳</p>
			<button onclick="updateDemo()">적용버튼</button>
			-->버튼을 클릭하면 updateDemo메서드가 실행된다는 뜻
			
			<script>
				function updateDemo(){
				 document.getElementByClass("c1").innerHTML="변경됩니다";
				}
			</script>
			
			-->html문서에서 script태그에서 자바스크립트 기능을 구현하며,
			script는 head,body 어디에서 쓰여도 상관없으나 주로 성능상의 효율로 인해 body부분에
			작성한다.
			
			함수를 정의하기 위해서는 function 메서드명(){} 이라 작성.
			document는 해당 html문서객체를 의미하며 getElementBy메서드를 통해 구체적요소를 특정함.
			id,class,또는 태그 다 가능함. innerHTML을 통해 문자를 변경!
			
			그래서 여기서 적용버튼을 클릭하면 p태그인 '업데이트데모가 적용될 곳'은 '변경됩니다'라는 문구로 변경된다 
		</body>
	</html>

JavaScript에서 변수는 var,let, const로 지정함. var는 재선언과 재할당이 가능하고, let은 java의 변수처럼 재할당만 가능, const는 java에서 final변수의 역할. 자바스크립트에서는 주로 let과 const키워드를 통해 변수를 지정한다.
console.log() =⇒개발자도구의 콘솔창에 출력. 자바스크립트는 웹브라우저에서 인터프리트하기 때문에 자바에서 터미널창이 웹브라우저의 개발자도구 콘솔창 같은 개념이다.

<!DOCTYPE html>
	<html>
		<head>
			<title>제목은 아무렇게나~</title>
			<script>
				function showObject(){
					let person={name:"kim", age:20};  //js에서는 객체를 {}중괄호와 key,value형식으로 바로 생성가능
					console.log(person);  //객체를 바로 조회 가능
					console.log(person.name); //객체의 속성도 바로 조회가능
				  console.log(person['name']) // 자바스크립트에서 객체의 속성을 조회하는 또 다른 방법. 객체['키']
			
				 const keyArr = Object.keys(person) //object.keys(객체) : 객체의 키를 배열로 반환
				for(let i=0; i<keyArr.length; i++){
					console.log(person[keyArr[i]]);
				}
				
				keyArr.foreach(a=>console.log(person[a]);// 함수형프로그래밍 활용하는 방식
				}
			
			
			function makeObject(){
				let person={name:'kim', email:'[email protected]', age:20} //리터럴 방식으로 객체생성하는 방법
				
				let person2={}
				person2.name='lee';
				person2.email='[email protected]';
				person2.age =21;             //처음에 빈값으로 객체 생성하고  키와 밸류값을 동적으로 생성하는 방법
			}
			
				const name='jin';
				const age=32;
				const person3 ={name,age} //원래라면 name:name,age:age로 key와 value값을 넣어줘야하는데
			                            //키,밸류값이 동일하게 사용되면 '단축 속성명'방식으로 생성가능
			
			
				const obj1 = {a:1, b:2};
				const obj2 ={obj1}; //이것도 단축속성명으로 만들어진 방식 원래라면 obj1:obj1로 키와 밸류가 동일하고
			                      obj2 = obj1:{a:1,b:2}로 밸류가 하나의 객체 인 것!
			                      
			                      
			  const obj3 = {a:1, b:2};
			  const obj4 = {...obj3, c:3}; //스프레드문법: ...키워드를 통해 obj3객체를 사용
			                               //즉 obj4={a:1, b:2, c:3}임
			
			</script>
			
			
		</head>
		<body>
			<button onclick="showObject()">객체 조회</button>
			<button onclick="makeObject()">객체 생성</button>
		</body>
	<!html>