본문 바로가기

javascript🪓28

객체와 메소드 객체의 종류 실행문 입력 형식 document.write('문장'); 객체.메소드('실행내용'); 누가.어떻게('무엇을'); documen는 객체 / .write 는 메소드 객체의 종류 내장객체(기본 객체) - 윈도우에 내장되어있는 객체 date와 math만 실습 (시간을 지칭, 문자를 지칭, 예 컴퓨터에 내장된 객체가 자동으로 시간을 체크) 브라우저 객체 - document, window 등 브라우저에서 쓰이는 객체 (크롬, 익스플로어 같이 브라우저 안에 내장되어있는 객체 사용자지정 객체 - 사용자가 상황에 따라 만들어내는 객체 2022. 12. 28.

자바스크립트 유튜브 배열예시 url 로 변수를 만들어 배열을 나열해준다. $(document).ready(function () { // 동일 데이터타입을 저장할 경우 배열 var url = ['https://youtu.be/KSQJTSsUoDM', 'https://www.youtube.com/embed/rCim2a9h69M', 'https://www.youtube.com/embed/dIuArPmla2M']; console.log(url[0]); }); 유튜브 링크를 배열로 링크 나열을 해준 후 콘솔로 찍어보면 나오는것 확인 제이쿼리로 누르면 영상 나오게 하기 $(document).ready(function () { // 동일 데이터타입을 저장할 경우 배열 var url = ['https://youtu.be/KSQJTSsUoDM', .. 2022. 12. 19.

자바스크립트 스코프 스코프란 ? 전체적인 범위 안에서 지역변수로 만드는것 // 함수외부의 변수는 전역변수 var obj = '안녕'; console.log(window.obj); function fn2() { var obj = '안녕'; // 지역변수 console.log(obj); // 함수로감아줬기떄문에 콘솔 확인시 밑의 안녕이 나옴 } fn2(); 위에 obj 변수가 사용됬어도 지역변수를 만들어 함수안에 가두면 또 사용이 가능 둘이 중복되지않는다. function fn2() { var obj = '안녕'; // 지역변수 console.log(obj); // 함수로감아줬기떄문에 콘솔 확인시 밑의 안녕이 나옴 function innerFu() { console.log(obj, '==='); var obj = 'hi'; }.. 2022. 12. 19.

자바스크립트 false 판정 / ! false 판정 - 0, -0, '빈칸', NaN, undefined, false , null true 로 변경시 ! 사용 (반대로도 사용가능) function test() { // 서브페이지에서 실행하면 안되는 경우, 존재여부 판단하여 return if (!$('main_about .box').length) return; console.log($('main_about .box').offset().top); } test(); 빈페이지에서 스크롤을 테스트해보았다. length 가 없는 false 상태이기 때문에 아무것도 나오지 않으므로 ! 를 줘서 true 로 리턴시켜라 . 참고 : 10_파크원(스크롤애니메이션,페이드슬라이더,슬라이드내부애니메이션) 그럼 false 상태에서 top 을 찾을 수 없다고 나오지.. 2022. 10. 27.

자바스크립트 자료형 데이터타입 / 연산자 종류 데이터형 자바스크립트란? 프로그램제작에 쓰이는 여러 데이터 기본자료형 (데이터타입) : 변수에 담을 수 있는 데이터 유형을 말한다. 1. 문자열 string 1. 문자열 string 문자를 사용할때 '' 홑따음표와 사용 ,, 쉽표로 연결 연산가능 문자열 안에 따음표를 쓸때 "test1", 'test1' 같이 내부와 외부 다른 따음표 사용가능 이스케이프 문자 활용 (한가지 따옴표로 일관되게 사용하고싶을때 따옴표 앞에 \ 입력 문자 그대로 사용) var str = '문자'; 이스케이프 문자 종류 \' 작은따옴표 \" 큰따음표 \\ 역슬래쉬 \n 줄 바꿈 \r 캐리지 리턴 \t 수평탭 \b 백 스페이스 \f 폼 피드 2. 숫자 Number 정수와 유리수의 구분 없이 숫자를 저장할수 있음 연산자를 이용해 사칙연.. 2022. 10. 15.

자바스크립트 변수 자바스크립트 변수란? 프로그램을 만들때 필요한 데이커, 데이터를 관리하는 시스템 , 관리체계 변수 만들기 1. 변수 선언하기 데이터를 담을 변수를 만들어 이름 지정 var 변수명; 2. 변수 초기화 만들어진 변수를 데이터에 담기 변수명 = 데이터; 3. 변수의 변형과 사용 데이터 변경을 위해 데이터 바꾸기 or 추가 메서드 함수 사용 4. 프로그램 완성 완성 출력하기 예시 var num01 ; num01 = 5; var num01 = 5; console.log(num01); 명령어 변수명; 면수명 = (대입연산자) 데이터 ; 결과 num01 = 5이다 console.log(num01); 크롬출력하기 변수만들기 응용 결과값 풀이 1 var num01; num01=5; console.log(num01); 5.. 2022. 10. 15.

자바스크립트 기본지식- 용어,문장,서식 자바스크립트란 무엇인가? 웹페이지는 3 레이어로 이루어져 있다. 1차 html 마크업 2차 css 디자인 3차 자바스크립트로 동적구현 자바의 용어 이해하기 카페라떼 만들기에 비유해보자 1. 라떼커피를 만들기 위한 재료방 - 변수 2. 커피 옵션을 계산하기 위한 계산식 - 연산식 3. 조건에 맞는 반복적인 작업문 - 제어문 4. 주문버튼 - 실행문 자바스크립트 문장 만들기 로봇에 명령하듯이 단계를 나누어 하나하나 명령해야한다. 선언식 : var main = "text" 오브젝트. 메서드 (); 오브젝트. 속성; 이때 메서드와 속성의 작성 방식이 조금 다르다. 메서드와 속성은 작성방법 메서드 객체(오브젝트) . 메서드 (); 뒤에 (); 속성 객체(오브젝트) . 속성 ; ; 문장을 끝낼땐 ; 사용 만든 문장.. 2022. 10. 14.

공부하면서 정리하기 자바스크립트는 끝에 ; 세미콜론으로 문장 끝을 알린다. 함수의 이름은 항상 대문자로 시작한다. 번수, 속성, 함수, 메서드의 이름은 항상 소문자로 시작 ( 카멜표기법 ) 여러단어로 이루어진 식별자는 각 단어끝을 대문자로 식별자(단어) 뒤에 () 없으면 단독 사용시 변수 / 다른식별자랑 사용은 속성 식별자(단어) 뒤에 () 있으면 단독 사용시 함수 / 다른식별자랑 사용은 메서드 문자열 string 문자는 '' , + 사용 연결 이스케이프 문자 \사용 ＼’ 작은따옴표 ＼" 큰따옴표 ＼＼ 역 슬래시 ＼n 줄 바꿈 ＼r 캐리지 리턴 ＼t 수평 탭 ＼b 백 스페이스 ＼f 폼 피드 숫자 Number 산술연산자 + 더하기 (문자일땐 연결/ 숫자는 더해줌) - 빼기 * 곱하기 / 나누기 % 나머지 (짝/홀수로 나눌때 .. 2022. 10. 14.

JavaScrip 04_조건문- switch / 삼항연산자 // prompt 로 숫자를 입력받아 짝홀수를 판단하고 숫자형식이 아닐경우 alert을 띄우기(switch 조건문 사용) 0이면 홀수 / 1이면 짝수 var num = prompt('숫자를 입력하세요'); switch (num % 2) { case 0: console.log('짝수'); break; case 1: console.log('홀수'); break; default: alert('숫자를 입력하세요'); } // 하나의 케이스를 실행후 break; 로 종료하고 다음 케이스로 넘어가라. // 스위치 조건문은 값이 딱 떨어질때 사용할수있다 (이상이하 사용불가) 값이 정해져있을경우 사용 성별. 혈액형 등등 default 에 break가 없이 순서가 위로 올라간다면 짝수를 넣어야하지만 순서상 default.. 2022. 10. 13.

JavaScrip 04_조건문 if 1. if 조건문 if - 가장 일반적으로 사용되는 조건문 - 조건은 불린 표현식을 이용함 예제 ) 만 나이를 입력받아 19미만이면 미성년자, 아니면 성인입니다를 출력하시오 관련된 조건은 if else로 이어준다. 예제 입력받은 정수가 짝수인지 판단하시오 var int = prompt('정수를 입력하세요'); if (int % 2) { console.log('짝수입니다.'); } else { console.log('홀수입니다.'); } 나이를 입력 받아 10대(10살미만도 포함), 20대 , 30대 이상으로 출력하시오 var age = prompt('나이를 입력하시오'); if (age >= 30) { console.log('30대이상'); } else if (age >= 20 && age < 30) {.. 2022. 10. 12.

JavaScrip 03_변수와 자료형 변환2 변수란 ? 데이터를 보관하는 용도이다. (값 입력시 렘에 생성 ) _ 언더바를 쓰는이유? 유니크한 이름이 아닌 이미 사용하는 키워드를 사용할때 활용 기존에 이미 있는 키워드를 변수명으로 사용할 경우 _ 붙여줌 var_scrollTop = 100; console.log(var_scrollTop); 식별자 // 제이쿼리로 요소선택시 $ 붙이는 경우 있음 var $el = $('#wrap'); console.log($el); 위의 코드를 입력했을때 오브젝트가 형성됨을 알수 있다. 결론 식별자 구별시 $ 붙이기 비추천 var wrap = $('#wrap'); console.log(wrap); 아이디 선택자로도 선택이 가능하기 때문에 번거롭게 $사용 비추 변수명을 여러개 사용할때 이런식으로 한줄 사용하면 선언한건.. 2022. 10. 12.

JavaScrip 03_변수와 자료형 변환 (제이쿼리적용) 1. 파일생성 js 파일 생성 comme은 백엔드에서 쓰이므로 ui 붙여줌 2.html 에 스크립트 지정을해줌 브라우저에서 화면을 보일때, 브라우저가 파일을 다운로드 받아 캐시파일을 읽음 근데 사용자가 재접속시 캐시가 남아있으면? 브라우저가 다운받지않고 기존 파일을 보여줌 캐시에 저장된걸 보여주지않고 최신으로 파일로 다운받아 보여주기 위해서 '타임스탬프' 코드 삽입 타임스탬프 ?v= 제이쿼리모든 파일에 다 타음스탬프를 붙여야할까? jquery-3.6.1.min.js 제이쿼리 매서드 라이브러리파일 이파일은 제이쿼리를 사용하기 위한 매서드함수만 들어가있으므로 ui_common.js 읽어들이기위한 파일이다. 수정하지않는 기본파일이기 때문에 타임 스탬프를 안붙여도됨 때문에 2022. 10. 11.

이전 1 2 3 다음

티스토리툴바