Javascript와 JQuery

임유빈·2023년 11월 2일

개발자

목록 보기
19/26

문자 출력

document.write()

데이터 상자 만들기

var 변수명
ex)var age= 30;

0이상 1미만의 임의의 숫자 뽑기

Math.random();

소수점은 버리고 정수로 변환

ParseInt();

배열의 마지막에 값 추가

.push()
ex)lotto.push();

중복을 없애는 방법

.indexOf(값): 값이 있으면 위치, 없으면 -1
ex)lotto.indexOf(num) == -1

배열 값 정리

.sort()
ex)lotto.sort((a,b)=>a-b);

콘솔에 출력하기

console.log();

아이디로 요소 찾기

getElementById()

함수사용

function 함수이름(){}

이벤트

이벤트 = 이벤트핸들링 </text area>
ex) </text area>

JQuery

javascript를 쉽게 사용할 수 있게 도와주는 라이브러리

content의 value 가져오기

$('#content').val()

Event

.click() : 클릭을 했을 때 괄호 안에 있는 것이 실행된다.
.fadeIn() : 선택한 요소가 서서히 나오게 함
.animate(properties) : 애니메이션 효과를 만드는 메서드
.fadeOut() : 선택한 요소가 서서히 사라짐
.css() : 선택한 태그의 css 요소에 접근

익명 함수

함수 이름 없이 바로 정의하고 바로 사용

익명함수를 쓰는이유

코드 간결성
콜백이나 이벤트 핸들러처럼 한번만 사용하는 함수에 사용
변수에 함수 저장
함수를 정의함과 동시에 바로 실행

<script>    
    $('#click').click(function(){
        console.log('hello');
    });
</script>

$에 썼던 괄호 안에 있는 #의 의미

id를 의미한다.

var person = {
	name : 'jocoding',
	age : 20
}

여기서 name과 age를 키or 속성 명 이라고 부르고, ‘jocoding’, 20을 값 or 속성 값 이라고 부른다.

값 or 속성 값에는 배열, 객체, 함수도 들어간다.

함수로 들어가는 경우 함수는 ‘메서드’ 라고 부른다.

객체.키 : 원하는 값을 꺼낼 수 있다.

‘jocoding’을 꺼내고 싶다면 person.name;을 입력하면 된다.

자바스크립트의 거의 모든 것은 객체이다.

객체란?

객체(Object)는 프로그래밍에서 데이터와 그 데이터를 조작하기 위한 동작(메서드)을 하나의 단위로 묶어 표현하는 데이터 구조입니다. 객체는 이름-값 쌍을 포함하며, 이를 사용하여 데이터를 구조화하고 다양한 동작을 수행할 수 있습니다.

현재 시간을 기준으로 date 객체 생성

var now = new Date();

만난 밀리초 계산

오늘.getTime() - 사귄날.getTime();

만난 밀리초를 만난일로 환산

만난밀리초/(10006060*24) + 1

소숫점 날리기

Math.floor

연도, 달, 일자 가져오기

연도 : getFullYear()
달 : (getMonth()+1)
일자 : getDate()

날짜로 변환

new Date()

느낀점

Javascript 실습을 하며 대소문자, #빼먹기 ()괄호 빼먹기 등의 실수로 오류가 많이 발생했는데 코딩을 할 때 꼼꼼히 신경을 쓰며 진행해야 겠다고 생각했다.

profile
주변 사람들과의 소통을 적극적으로 하는 친근한 개발자가 되기를 희망합니다.

0개의 댓글