ghjk1. window
- 최상위 객체
- 전역 scope, 브라우저 창과 관련된 여러가지 기능 제공
- window.alert, window.print, window.open 등
2. navigator
- 사용자가 사용하는 브라우저의 여러가지 정보 제공 (버전, 언어, 위치 등)
- navigator.geolocation, navigator.userAgent 등
배열에서는 for in for of
객체에서는 for in
1. Element 생성 후 body의 자식 요소로 추가
const h1 = document . createElement ( 'h1' );
h1 . textContent = 'Hello' ;
document . body . appendChild ( h1 );
2. body의 HTML에 (문자열) 태그 추가
document . body . innerHTML += '<h2>Hello</h2>' ;
addEventListener에
click : 마우스 클릭 이벤트. mousedown : 마우스 버튼을 누를 때 발생하는 이벤트. mouseup : 마우스 버튼을 놓을 때 발생하는 이벤트. mousemove : 마우스 포인터가 요소 내에서 이동할 때 발생하는 이벤트. mouseenter : 요소 내로 마우스 포인터가 진입할 때 발생하는 이벤트. mouseleave : 요소를 벗어나면 발생하는 이벤트. keydown : 키보드 키를 누를 때 발생하는 이벤트. keyup : 키보드 키를 놓을 때 발생하는 이벤트. input : 입력 요소의 값이 변경될 때 발생하는 이벤트. submit : 폼 제출 이벤트. focus : 요소가 포커스를 얻을 때 발생하는 이벤트. blur : 요소가 포커스를 잃을 때 발생하는 이벤트. load : 웹 페이지나 이미지 등이 로드될 때 발생하는 이벤트. unload : 웹 페이지가 언로드될 때 발생하는 이벤트. resize : 브라우저 창 크기가 변경될 때 발생하는 이벤트. scroll : 스크롤바가 스크롤될 때 발생하는 이벤트. contextmenu : 마우스 오른쪽 버튼으로 요소를 클릭할 때 발생하는 이벤트. touchstart : 터치 디바이스에서 화면을 터치할 때 발생하는 이벤트. touchmove : 터치 디바이스에서 화면을 터치한 후 이동할 때 발생하는 이벤트. touchend : 터치 디바이스에서 화면에서 손을 떼면 발생하는 이벤트.
<h1> 🎈 </h1>
</body>
<script>
const star = document.querySelector( 'h1' );
star.style.position = 'absolute' ;
// let [x, y] = [0, 0];
let x= 0 ;
let y= 0 ;
const block = 20 ;
const print = () => {
star.style.left = ` ${ x * block } px`
star.style.top = ` ${ y * block } px`
};
print();
const [left, up, right, down] = [ 37 , 38 , 39 , 40 ];
document.body.addEventListener( 'keydown' , (event) => {
switch (event.keyCode) {
case left : x -= 1 ; break ;
case up : y -= 1 ; break ;
case right: x += 1 ; break ;
case down : y += 1 ; break ;
}
print();
});
화면에 게임
<body>
<input type = "text" name = "search" >
</body>
<script>
const input = document.querySelector( '[name=search]' );
input.addEventListener( 'focus' , (event) => {
let search = event.currentTarget.value;
if (search.length== 0 ){
event.target.value = '#'
}
});
input.addEventListener( 'keyup' , (event) => {
let keyCode = event.keyCode;
if (keyCode == 32 ) {
let value= event.target.value;
let last = value.substring(value.length- 2 );
if (last!= '# ' ){
value = value.substring( 0 ,value.length - 1 );
event.target.value = value+ ',#' ;
}
}
});
</script>
# 넣기
event driven
이벤트막는 함수
preventDefalut()
stopPropagation(): 겹치는 것들이 모두 반응하지 않게 최초 발생하는 하나에만 걸어준다.
<body>
<select>
<option> 떡볶이 </option>
<option> 순대 </option>
<option> 오뎅 </option>
<option> 튀김 </option>
</select>
<p> 선택: 떡볶이 </p>
</body>
<script>
const select = document.querySelector( 'select' );
const p = document.querySelector( 'p' );
select.addEventListener( 'change' , (event) => {
const options = event.currentTarget.options;
const index = event.currentTarget.options.selectedIndex;
p.textContent = `선택: ${ options[index].textContent } `
console.dir(event);
});
</script>
변경시 값 변경
■ Cookie / Local Storage / Session Storage
● Cookie - 자바스크립트에 의해 사용자의 PC(브라우저)에 저장되는 파일 - 사용자의 로그인 정보를 저장하는 등 다양하게 활용 - 문자열만 저장 가능 - Session Cookie : 브라우저 종료 시 쿠키 삭제 - Persistent Cookie : 만료일자를 지정하여 해당 일자에 삭제 - 저장 용량 : 4KB
● Local Storage - 자바스크립트에 의해 사용자의 PC(브라우저)에 저장되는 파일 - 사용자의 로그인 정보를 저장하는 등 다양하게 활용 - 객체 저장 가능 - Persistent : 자동으로 삭제되지 않음 - 저장 용량 : 5MB 이상
● Session Storage - 자바스크립트에 의해 사용자의 PC(브라우저)에 저장되는 파일 - 사용자의 로그인 정보를 저장하는 등 다양하게 활용 - 객체 저장 가능 - Session : 브라우저 종료 / 탭 종료 시 삭제 - 저장 용량 : 5MB 이상
➔ 브라우저 종료 후에도 데이터 저장 : Cookie / Local Storage 웹 서버(Back-end)에서 활용 : Cookie 대용량 / 객체 활용 : Local Storage 데이터 임시 활용 : Session Storage
쿠키
document.cookie = 'key1=value1;'; document.cookie = 'key2=value2;expires=Sun, 01 Jan 2040 00:00:00 GMT';
UTC - Coordinated Universal Time GMT - Greenwich Mean Time -> Wed, 08 Jan 2020 00:00:00 UTC;
● Local Storage 활용
localStorage.setItem('key1', 'local value1');
localStorage.setItem('key2', 'local value2');
console.log(localStorage.getItem('key1'));
console.log(localStorage.getItem('key2'));
● Session Storage 활용
sessionStorage.setItem('key1', 'session value1');
sessionStorage.setItem('key2', 'session value2');
console.log(sessionStorage.getItem('key1'));
console.log(sessionStorage.getItem('key2'));
@@@@@
npm uninstall -g create -reacte-
mkdir 폴더 명으로 폴더 만들고
오류가 발생되면
npm uninstall -g create-react-app
위 명령어 실행 후 아래 실행
1) npx create-react-app .
프로젝트 폴더를 미리 만들어둔 경우
2) npx create-react-app react-app
프로젝트 폴더를 미리 만들어두지 않은 경우
프로젝트 실행 패키지 제이슨의 명령어 중npm run start 시작 live server - 127.0.0.1:5500
react run - localhost:3000 == 127.0.0.1:3000
const Nav = () => { 함수형식이
return (
<nav>
<ul>
<li><a href = '1.html' > HTML </a></li>
<li><a href = '2.html' > CSS </a></li>
<li><a href = '3.html' > JavaScript </a></li>
</ul>
</nav>
);
}
function App() {
return (
<div className = "App" > //jsx 이라고 한다.
<Header></Header> 앞글자가 대문자다
<hr></hr>
<Nav></Nav>
</div>
);
}
export default App;
css는 한곳에서 임포트해도 다 적용되기때문에 개별 적용방법이 필요하다
<ul style = {
{border: '1px solid red' }
} >
인라인방식
module방식은 css.module.css 파일을 임포트 해서 사용
리액트네이티브-안드로이드
컴포넌트에 데이터 값을 넣기 위해 프롭스 객체를 준다.
