Front-end/Vanilla JS2022. 2. 20. 22:33옛날에 공부했었던 바닐라 JS

네트워킹 요청이나 이미지 프로세싱은 느리다 느린 동작이 스택에 남아있는 것을 보통 블로킹이라 한다 이벤트 루프의 역할, stack이 비어있는 지 확인후 (main까지 비어있어야해) task queue에 있는 콜백을 순차적으로 넘긴다. (callback queue라고도 한다) 이 이유로 0초로 셋팅된 비동기 함수의 콜백도 마지막에 실행되는 것이다! v8은 js가 실행되는 곳이며, webapi에서 비동기적으로 구동된다. 그리고 webapi는 c++로 구현돼 있다. debugger; console.log('hi'); setTimeout(()=>{console.log('there')},2000); console.log('JSConfEU'); console.log('hi'); setTimeout(()=>{cons..

newlecture:  js es5 브라우저 플랫폼 2 : 노드 다루기
Front-end/Vanilla JS2021. 5. 2. 23:07newlecture: js es5 브라우저 플랫폼 2 : 노드 다루기

(87) VanillaJS를 위한 자바스크립트 DOM 프로그래밍 28강 - Node의 종류와 개체 형식 - YouTube 해당 내용들의 출처는 뉴렉쌤입니다. 주의 깊게 볼 것은 1번 ELEMENT와 3번 TEXT이다. childNodes를 이용해서 자식노드를 선택해 보자. 위와 같이.. input 2개 이외에 text란게 생긴다.. 0:text 노드를 보면 이유를 알 수 있다. 위와 같은 whiteSpace가 있기 때문이다. childNodes가 아닌 children을 사용한다면 Tag만 뽑을 수 있다. 사진을 변경하는 예제이다. 아래와 같이 select를 이용해서도 가능하다. 한발 더 나아가 html5의 datalist 태그를 이용하면 아래와 같다. input:text에 select박스의 기능을 추가햿..

newlecture:  js es5 브라우저 플랫폼
Front-end/Vanilla JS2021. 5. 1. 21:07newlecture: js es5 브라우저 플랫폼

(84) 자바스크립트 DOM for VanillaJS 프로그래밍 18강 - window 플랫폼을 이용한 대화 parseInt, alert, prompt, confirm - YouTube 감사합니다 뉴렉쌤 window 플랫폼을 이용한 대화 parseInt, alert, prompt, confirmwindow alert는 자스크립트 함수가 아냐... 브라우저 객체의 함수야. 크롬같은 애들 꺼다. 위와 같은 것들이 window 객체이다. 우리가 종종 사용하는 alert 또한 window.alert() 로 window 객체이며, 생략이 가능했던 것 뿐이다. ** parseInt는 "25px" 등.. 뒤에 문자가 들어가면 그 문자를 제거해준다. "px" 등 문자만 들어가면 NaN 에러를 반환한다. Not a Nu..

Front-end/Vanilla JS2021. 3. 24. 01:04생코_jquery_메모

.end() 마지막으로 사용한 traversing을 취소한다 : find('.foo') 메서드 $('ul.first') 로 돌아가라 api.jquery.com/category/traversing taeyo.net/columns/View.aspx?SEQ=375&PSEQ=29&IDX=0 이벤트 타겟 : 이벤트 일어날 객체 (버튼 태그 등) 이벤트 타입 : click 같은 것 이벤트 핸들러 : 이벤트 발생시 동작 코드 : alert(...) bind() : 이벤트 설치 unbind() : 이벤트 제거 trigger() : 이벤트 호출 $(document).bind('ready', function(){ ... } 'ready' : 브라우저의 html이 모두 로딩된 다음을 뜻하는 이벤트 타입 이벤트 핸들러는 보통..

newlecture:  js es5 순수언어 part
Front-end/Vanilla JS2020. 11. 12. 00:33newlecture: js es5 순수언어 part

www.youtube.com/watch?v=lu8fuej4BvI 항상 뉴렉쳐 센세에게 감사함을 느낍니다 ! ㅎㅎㅎ 최고 ! ** 버그란 컴파일 시점에는 오류가 없으나, 런타임때 발견되는 오류이다. 우리는 문서를 볼 때 HTML 문서파일을 해석한 것을 본다. 그 중간에 DOM 트리로 로딩하는 과정을 한단계 더 거치게 된다. 위와 같은 폼 객체의 유효성 검사를 위해 NetScape 사가 적용하였다. 우리가 흔히 아는 저런 선언방식은 객체 선언방식과 같다 ! int x = 3; 이건.. 그냥 변수지만 var x = 3; 이건 사실 다른 공간에 값 3을 생성하고 그걸 가르키는 변수이다. 이걸 레퍼런스 변수라고 한다. 포인터 변수는 말그대로 주소값이 있는 가진 변수라 생각하는게 맞지만 레퍼런스 변수는 공간 자체가..

youtube 총 재생 시간 구하기 @@ !!
Front-end/Vanilla JS2020. 11. 11. 21:38youtube 총 재생 시간 구하기 @@ !!

// 이 선택자에는 에러가 있다!! 아래의 코드로 다시 사용하자! // 에러의 선택자 코드! var time = document.querySelectorAll( ".style-scope ytd-playlist-panel-renderer .style-scope ytd-thumbnail-overlay-time-status-renderer span" ); var hour = 0, min = 0, sec = 0; for (var i = 0; i < time.length; i++) { var t = time[i]; var t = time[i].innerText; t = t.split(":"); t[0] = parseInt(t[0]); t[1] = parseInt(t[1]); console.log(t); sec +..

Front-end/Vanilla JS2020. 11. 11. 21:36js, json의 길이 추측

기존에 알고 있던 코드를 개량하여, json의 길이를 추측하는 코드를 짜 보았다. number는 4, string은 1, 그 이외에는 1.. 좀 작게 추정해 본 것이다. var swCho = {name: 'sw.Cho' , age: 99 , size: {tall: 200, weight: 100} , hobby: 'show Youtube' , future: 'to be chicken King'}; 위는 샘플 코드이다. var deepCopyObj = (target) => { var r = []; if(typeof target !== 'object' || target === null) return target; for(i in target) { r[i] = deepCopyObj( target[i] ); } ..

ellie:  JSON
Front-end/Vanilla JS2020. 11. 11. 21:33ellie: JSON

let swCho = { name : 'swCho', age : 28, likes : { computer : 'js, java, web, algorithms', respects : 'feyman, Jaeseung Jeong, egoing ..', movie : 'The Spiriting Away Of Sen And Chihiro' } } 도랏.. https://www.youtube.com/watch?v=FN_D4Ihs3LE&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=10 엘리쨩 감사합니다 ! sample Data let swCho = { name : 'swCho', age : 28, likes : { computer : 'js, java, web, algorithm..

Front-end/Vanilla JS2020. 11. 11. 21:31ellie : 객체 정리

피곤하고.. 시간 관게상 부분적으로만 정리하였다. let swCho = { name : 'swCho', age : 28, likes : { computer : 'js, java, web, algorithms', respects : 'feyman, Jaeseung Jeong, egoing ..', movie : 'The Spiriting Away Of Sen And Chihiro' } } for (key in swCho) { console.log(key); } // error. its not iterable for(k of swCho) { console.log(k); } // for (value of ojb) let arr = [101, 202, 303, 404, 505]; for (val of arr) ..

ellie : 함수.. 문법 정리
Front-end/Vanilla JS2020. 11. 11. 21:30ellie : 함수.. 문법 정리

// Class ? class Person { constructor(name, age) { this.name = name; this.age = age; } speak() { console.log(`${this.name}: hello!`); } } const swCho = new Person('swCho', 20); console.log(swCho); 클래스 내부에서 함수 정의시 function 예약어를 선언하지 않는군.. (method 등) // Getter Setter : 캡슐화 debugger; class User { constructor(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age ..

Js 문법 객체
Front-end/Vanilla JS2020. 11. 11. 21:27Js 문법 객체

egoing님 강의록! window가 생략된 것이다 ! 객체에 있는게 값->속성, 함수->메소드 ​ egoing님 강의 자바에는 클래스 안에 생성자가 속해있다. 허나 JS 에서는 ES5 기준 생성자가 없기에, 생성자가 어느 누군가에 속해 있지 않다. (클래스를 선언하지 않아도 된다.) 그냥 new를 통해 선언하면 객체가 된다.. 함수에 new를 붙이면 그 리턴값은 객체가 된다. var doPrint = () => { console.log(`hi`); return 200; } var a0 = doPrint; a0; // 함수에 대한 정보 a0(); // hi출력, 200리턴 var a1 = doPrint(); a1; // 200 a1(); // Uncaught TypeError: a1 is not a fu..

js 기초., 알게 된 것들...
Front-end/Vanilla JS2020. 11. 11. 21:23js 기초., 알게 된 것들...

감사합니다. 퀸 엘리님.. 오브젝트는 각각 다른 ref 가 할당 된다. www.youtube.com/watch?v=YBjufjBaxHo&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=4 백틱기호를 많이 쓰자. 편해보임. ​ ArrowFunc ​ Ellie님 강의.. 감사합니다 ! youtube Ellie, Dream var printNo = function prnt() { console.log('>

image