본문 바로가기

분류 전체보기235

자바스크립트 헷갈리는 논리연산자 : || (or) $$ (and) !(not) 6. logical(논리) operators : || (or) $$ (and) !(not) 1. or : 3중에 1개 라도 true 면 true 리턴 const value1 = false; const value2 = 4 < 2; // 4가 2보다 작다? 틀리므로 false console.log(`or: ${value1 || value2 || check()}`); //여기서 check 함수는 리턴값인 true를 리턴한다. //value1 or value2 or check 중 하나라도 true 라면 true로 계산이 되는 연산자 function check() { for (let i = 0; i < 10; i++) { //시간을 잡아먹지만 결국 리턴값인 true 를 반환해줘 console.log('🤬'); }.. 2023. 8. 30.
변수가 저장되는 방법 variable types (primitive or object) primitive > single item : numver, string, boolean , null , undefined , symbol object > box container (일상생활에서 볼 수 있는 물건 물체등을 대표하는 박스형태) primitive 타입과 object 의 타입이 메모리에 저장되는 형태 primitive type let name = 'ellie'; // name이란 변수에 ellie 선언 name = 'hello'; // 변수 재할당 console.log('name: ', name); // name = hello 가됨 값 자체가 메모리에 저장됨 object type const ellie = { name: 'ellie', age: 20 }; //이 ellie 는 const 로 지정.. 2023. 8. 29.
자바스크립트 변수선언 : let vs var / const variavle 변수 > 변경될 수 있는값 - read / write = 메모리에 저장되어 쓰고 읽는것 가능 - 변수를 선언하고 재 할당이 가능하다. 변수의 global scope 와 block scope let 의 global scope - 실행시 처음부터 끝까지 메모리 사용 let name = 'ellie'; // name이란 변수에 ellie 선언 name = 'hello'; // 변수name에 hello 재할당 console.log('name: ', name); // 확인시 name = hello 가됨 let 의 block scope {} - 블럭안의 코드 작성시 블럭밖에선 블럭안의 내용을 읽지못함 (블럭밖에서 작성된 코드들은 global scope 로 어디서나 접근 가능) { let name2 .. 2023. 8. 29.
노드js로 vs코드스튜디오 터미널에서 자바스크립트 확인하 html에 새로운 자바 스크립트를 연결해준후 control + ~ 단축키로 터미널을 열어준다. C:\Users\user\Desktop\설화수html연습 뒤에 띄어쓰기 cd (폴더뜻) 엔터를 하면 C:\Users\user\Desktop\설화수html연습\js> 폴더 경로가 나온다. 뒤에 node test.js 파일명을 써주면 브라우저로 확인할 필요없이 터미널로 확인가능 2023. 4. 6.
자바스크립트 작성시 .은 무엇을 뜻할까 ? . 은 자바스크립트에서 접근 연산자이다. 즉 아래 명령어는 console.log('접근연산자란?'); console안에 . 으로 log 에 접근한다 라고 해석된다. 2023. 4. 6.
노드제이에스 Node.js 란? 왜필요한가 ? (브라우저 밖에서 열기) https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 기존에 자바스크립트 (Java Script 스크립트 언어)는 브라우저 (인터넷창)안에서만 사용됬다. 때문에 브라우저로 계속 확인해야하는 번거로움이 있었다. (ex. 크롬 개발자 환경) 하지만 node.js 사용시 브라우저 밖에서도 사용이 가능하다. 즉 별도의 소프트웨어 없이 동작하는 것이 가능. *Node.js 설시 JacaScript 런타임 (자바스크립트를 실행 할 수 있는 환경을 뜻함) 구동이 가능하기에 브라우저 없이도 웹페이지 제작이 가능하다! 2023. 4. 6.
제이쿼리 html에서 CDN 호스트 방식으로 연결하기 jQuery 라이브러리 - P.196 다운로드 방식 http://jquery.com/download사이트방문 최신 버전 다운로드 하여 head 영역 안에 연결 Migrate Plugin(하위 버전 브라우저 지원) 다운로드하여 head 영역 안에 연결 - 익스플로를 위한 설정 CDN 호스트 방식 - content delivery Network https://code.jquery.com사이트방문 최신 버전을 클릭하여 url 복사, head 영역 안에 붙여넣기 jQuery Migrate를 클릭하여 url을 복사, head영역 안에 붙여넣기 - 익스플로러를 위한 설정 CDN 호스트 방식이 최신버전으로 자동 업데이트가 되며 오류가 적다 https://releases.jquery.com/ jQuery CDN The.. 2022. 12. 29.
onclick 이벤트와 getElementById 함수 실습 객체를 이용해서 이벤트를 실행하는 사용자의 행위 함수는 객체가 실행하는 실행문 버튼 클릭시 next 버튼 이미지가 다음으로, prev 버튼클릭시 이미지가 이전으로 html 로 바로 이벤트를 걸어 실행시켜보자. button 에 클릭 이벤트를 걸어 return 함수로 next, prev 함수명을 각각 실행시키자. 스크립트 문에 함수 입력 // 변수설정 var num = 1; /* 함수 next()설정 1. 변수 num이 1씩 증가 (단, num이 7보다 커지면 다시 1) 2. #gallery의 src 속성 중 속성값의 일부를 변경 */ function next() { // num이 1씩 증가 (아직은 변수에만 반영) num++; // 7다음에는 다시 1이된다 if (num > 7) num = 1; // 아이.. 2022. 12. 28.
내장객체 실습 내장객체의 종류 Date 객체 날짜와 시간에 대한 정보를 얻거나 설정 getDate는 날짜 getDay는 요일 Math 객체 수학 연산을 위한 객체 Math.random() 형식을 주로 사용 Date 객체 실습 자동완성 기능으로 오늘의 날짜에 해당하는 이미지를 가져와보자. 내장객체는 컴퓨터에 내장된 기본객체를 뜻한다 시간. 날짜 . 요일 을 인터넷에 연결하지않아도 컴퓨터에 내장된 시스템을 자동으로 불러올수있다. // 새로운날짜 today 변수지정 var today = new Date(); 내가 today란 변수를 만들어 날짜 내장객체인 Date를 담는다. // nowDay에 today의 요일을 대입 var nowDay = today.getDay(); 내가 만든 today 변수를 또 nowDay 변수에 담.. 2022. 12. 28.
객체와 메소드 객체의 종류 실행문 입력 형식 document.write('문장'); 객체.메소드('실행내용'); 누가.어떻게('무엇을'); documen는 객체 / .write 는 메소드 객체의 종류 내장객체(기본 객체) - 윈도우에 내장되어있는 객체 date와 math만 실습 (시간을 지칭, 문자를 지칭, 예 컴퓨터에 내장된 객체가 자동으로 시간을 체크) 브라우저 객체 - document, window 등 브라우저에서 쓰이는 객체 (크롬, 익스플로어 같이 브라우저 안에 내장되어있는 객체 사용자지정 객체 - 사용자가 상황에 따라 만들어내는 객체 2022. 12. 28.
img 태그는 젠코딩으로! 자동완성기능/a태그 a(img)+img+a(img) img 를 쓰고 tap 키를 누르면 자동완성이된다 이때 src="" 절대 타이핑 금지 (오타날 확률 높다) ctrl + 스페이스바를 누르면 폴더를 선택할수 있는 자동완성이 뜬다 a(img)+img+a(img) a 태그 + img 젠태그 방식 이렇게 자동완성이 활성화가 됬을때 tab 키를 누르면 코드 자동생성 2022. 12. 28.
기본코드 한번에 입력하기 ! + tab키 기본 셋팅코드는 프로그램마다 적용이 조금씩 다르다 ! 입력수 탭키 누르기 비주얼 스튜디오 코드 자동완성 브라켓 자동완성 2022. 12. 26.