반응형 Javascript16 opener - popup관련, 자식 부모창 제어하기 - opener 브라우저에는 메인 화면과 팝업창이 존재할 때 가 있다. 이때 팝업창과 메인 화면에서 데이터를 서로 이용하거나 이벤트를 전달해야할 때 가 있다. 이럴 때 사용할 수 있는 개념이 'opener'다. - 사용법 어차피 필요하면 찾아서 사용하게 되는데 내가 오늘 사용한 개념만 간단히 정리하자. 자식에서 부모값을 사용할 수 있고 부모에서 자식값을 사용할 수 있다. 부모란 메인페이지를 말하고 자식이랑 팝업창을 말한다. - 실습 노란창이 부모고, 빨간창(팝업)이 자식이다. var a = 10 window.open() // 팝업 열기 위한 명령어 이와같이 부모창의 콘솔에서 변수를 만들어주고 팝업을 열어주었다. opener.a window.opener 라고 사용해도되지만 자식창에서 opener.a를 입력.. 2023. 5. 26. Javascript 기초 - 셀렉터, 돔조작, 웹js 기본, Alert UI만들기 - Javascript로 html 조작하기 글씨, 색, 사이즈 등 html, style, class등 필요한거 모두 찾아서 바꿀 수 있다. 안녕하세요 김지원 입니다. - UI만드는 단계 1.HTML/CSS로 미리 디자인 원하는 UI를 만들고 none으로 해놓음(alert의경우) 2.이벤트가 발생할경우(버튼클릭등) UI를 보여달라고 자바스크립트 코드 짜기 알림창 UI보이기 닫기 .alert-box { background-color: skyblue; padding:20px; color:white; border-radius: 5px; display: none; /* 평소에는 숨겨두기 */ /* 보여줄때는 display:block; */ } 2023. 4. 22. 호이스팅(hoisting) 어렴풋이만 알고 있었는데 호이스팅이 뭔지 아냐고 물어보니 정확하게 대답을 못했다. 이참에 하나씩 제대로 공부를 해봐야겠다. - 호이스팅(hoisting) : js의 동작 순서에 대해 이해하기 "변수와 함수의 메모리 공간을 선언 전에 미리 할당하는것" "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는것" var : 호이스팅 시 undefined로 변수 초기화 (선언과 초기화가 동시에 이루어짐) -> 변수 할당이전에도 호이스팅해 사용이 가능하다. console.log(name); // 1)undefined var name = "jiwon"; console.log(name); // 2)jiwon var name = "banana"; console.log(name); // 3)banana l.. 2023. 3. 27. 동기 & 비동기 - 1 (실행방식,콜백지옥) 자바스크립트 자바스크립트는 코드가 작성된 순서대로 작업을 처리하는 동기적 언어 이전 작업이 진행 중 일 때는 다음 작업을 수행하지 않고 기다린다. 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다. 만약 이와같이 중간에 특정작업이 오래걸리면 전반적인 흐름이 느려진다. 이와같이 멀티 쓰레드 방식으로 작동한다면 작업 분할이 가능하지만 자바스크립트는 싱글 스레드 언어이다. 비동기 작업 씽글 쓰레드 방식을 이용하면서 동기적 작업의 단점을 극복하기 위해 여러개의 작업을 동시에 실행시킨다. 먼저 작성된 코드를 기다리지 않고 바로 다음 코드를 실행하는 방식 대표적으로 setTimeout함수가 비동기 방식으로 동작하는 함수이다. function taskA(a, b, cb) { // cb는 콜백함수.. 2022. 7. 5. 유용한 자바스크립트 문법 응용 Truthy & Falsy - 자바스크립트는 자료형 상태에따라 참 거짓(TRUE,FALSE)로 평가하는 자료형들이 있다. const getName = (person) => { if (person === undefined || person === null) { return "객체가 아닙니다."; } return person.name; }; let person = null; const name = getName(person); console.log(name); 이와같이 작성할 수 있는것을 아래와같이 간소화 가능하다. const getName = (person) => { if (!person) { return "객체가 아닙니다."; } return person.name; }; let person = null;.. 2022. 7. 5. 유용한 자바스크립트 문법 기본 - 변수와 상수 var age = 10 var age = 15 // 이렇게 사용하는것은 옳지않다. let age2 age2 = 10 // var의 문제점을 해결하기위해 let을 사용한다. const age3 // 오류발생함 const age3 = 10 // 선언과 동시에 초기화 해야함 - 자바스크립트의 자료형 - 연산자 typeof : 타입을 알려준다 typeof(변수) - 함수표현식, 화살표 함수 console.log(helloB) let helloA = function(){ return "안녕하세요 여러분" } //함수 표현식 : 호이스팅 되지 않는다. console.log(helloA) function helloB(){ return "안녕하세요 여러분" } //함수 선언식 : 호이스팅이된다. let.. 2022. 6. 23. 이전 1 2 3 다음 반응형
