본문 바로가기
개발공부/JavaScript

[자바스크립트] 기본 문법과 사용법 정리(작성중)

by dokii 2021. 1. 9.
728x90

1. 대소문자를 구별한다.

 

 

2. 식별자는 영문자, 숫자, 언더스코어(_), 달러만을 사용할수 있다.

 

 

3. 키워드(예약어)

  - var는 변수의 정의를 위해 예약된 키워드 입니다.

  - function은 함수의 정의를 위해 예약된 키워드 입니다.

 

4. 주석

  - 두가지 형식을 지원한다.

  - 1. 한 줄 주석 : // 주석문

  - 2. 여러 줄 주석 : /* 주석문 */

 

 


변수선언

- let

상수선언

- const

데이터타입

-별도선언없이 변수에 대입

-숫자,문자열,boolean,null,undefined

-null은 우리가 없다고 고의적으로 설정하는 값을 의미하고, undefined는 우리가 설정하지않았기 때문에 없는값을 의미

 

연산자

*산술연산자 (+, -, *, /)

*대입연산자 (=)

*논리연산자 (불리언타입을위한 연산자. !(not), &&(and), ||(or))

  -논리연산자의 연산순서는 not>and>or

*비교연산자

  -=== : 두값이 타입까지 완전히 일치하는지 확인

  - == : 타입은 검사하지않음.

           즉, 숫자1과 문자'1'같은 값으로 인식한다.

           0과 false도 같은 값으로 인식.

           null과 undefined를 같은 값으로 인식.

  - !== : 두값이 일치하지 않는지 확인

*문자열 붙이기

 - 두 문자열을 붙일때는 + 로 할수 있다.

 

조건문

 

함수

* 함수란

  - 특정 코드를 하나의 명령으로 실행할 수 있게 해주는 기능

  - 함수를 만들때는 function이라는 키워드를 사용, 어떤값을 받아올지를 정해주는데 이를 파라미터라고 한다.

  - 함수 내부에서 return이라는 키워드를 사용, 결과물을 지정할 수 있다. 또한 종료의 기능이 있으므로, 함수의 마지막이나 종료하고자 하는 시점에 명시하면됨.

 

객체

 * 객체는 우리가 변수 혹은 상수를 사용하게 될때 하나의 이름에 여러 종류의 값을 넣을수 있게 해준다.

    const dog = { // 키 : 원하는 값

    name: '멍멍이',

    age: 2

    };

    console.log(dog.name); // 멍멍이

    console.log(dog.age); // 2

    일반적으로 키는 공백이 없어야하지만 공백이 필요한 경우 따옴표로 감싸서 문자열로 넣어주면 된다.

    const sample = { 'key with space': true };

 

**객체의 특징

  • 객체는 변수이다. 그러나 객체에는 많은 값이 포함될 수 있다.
    (자바스크립트 변수처럼 단일 값을 포함 할 수 있다.)
  • 객체는 중괄호 표기를 이용하여 만들 수 있다.
  • 객체는 각각의 key/value에 대한 정보를 나열할 수 있다.
  • Key는 문자열 또는 기호여야 한다.
  • Value는 모든 유형이 될 수 있다.
  • 객체는 한 쌍의 key/value 뒤에 쉼표를 이용하여 그 뒤에 오는 key/value와 구분해주어야 한다.
  • 객체에서 명명된 값을 Properties라고 한다.
  • 변수는 예약어의 이름을 가질 수 없지만 객체는 어떠한 이름이어도 상관없다.
  • 객체 변수를 복사하면 참조가 복사되고 객체가 복제되지 않는다.
ex) 	let user = { name: "John" };

 

 


자바스크립트 적용하기.

  1. 내부 자바스크립트 코드로 적용

 

 

  2. 외부 자바스크립트 파일로 적용 (더 빠르고 유지보수가 쉬워진다.)

    .js확장자를 사용한 자바스크립트 파일 + 적용할 페이지

example.js 파일.


function printDate() {

    document.getElementById("date").innerHTML = Date();

}
적용할 페이지

<head>

    <meta charset="UTF-8">

    <title>JavaScript Apply</title>

    <script src="/examples/media/example.js"></script>

</head>

 


제이쿼리의 each()메서드

jQuery를 사용해 배열을 관리하고자 할때 each()메서드를 사용한다.

each()메서드는 매개 변수로 받은것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사 할수 있는 메서드다.

 

each()메서드는 다음과 같이 두가지 타입이 있다.

// jQuery 유틸리티 메서드
$.each(object, function(index, item){ }); 


// jQuery 일반 메서드 
$(selector).each(function(index, item){ })

 

$.each() 메서드는 object와 배열 모두에서 사용할 수 있는 반복함수다.

배열과 length속성을 갖는 배열과 유사 배열 객체들을 index기준으로 반복할수있는것이다.

매개변수로 배열이나 객체를 받은뒤 -> 매개변수로 콜백함수를 받음 콜백함수의 인자로는 인덱스와 값을 인자로 갖음.

index는 배열의 인텍스 또는 객체의 key를 말하며,

item은 해당 인텍스나 key가 가진 값을 의미한다.

 

 

 

 

 

 

 

 

 

 

 

 


참고한 사이트와 블로그들.

[출처]tcpschool.com/javascript/js_intro_syntax/

(교육사이트. 강추 )

 

[출처]velog.io/@ljinsk3/JavaScript-%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC-1#%EB%AC%B8%EC%9E%90%EC%97%B4-%EB%A6%AC%ED%84%B4 

(자바스크립트 기초 문법정리 -1)

 

[출처]webclub.tistory.com/455

(제이쿼리의 each()메서드)

 

728x90

댓글