JavaScript문법

천문성·2023년 2월 2일
0

주석 : //

자바스크립트에서는 큰따옴표나 작은따옴표가 붙지 않은 숫자는 숫자로 인식

alert(1+2) //결과는 3 alert(”1+2”) //결과는 1+2

-콘솔에서 사용?

Math.pow(3,2); //3의 2승 , 9출력

Math.round(10.6); // 10.6을 반올림, 11출력

Math.ceil(10.2); // 10.2를 올림 , 11출력

Math.floor(10.6); // 10.6을 내림 , 10출력

Math.sqrt(9); // 3의 제곱근 , 3출력

Math.random(); // 0부터 1.0사이의 랜덤한숫자 >100*Math.random()하면 100이하의 랜덤 숫자 소수자리도

Math.round(100*Math.random()); // 100이하의 숫자를 반올림된 정수

문자는 큰따옴표나 작은따옴표로 감싸야 한다.

역슬래쉬(’\’) 바로뒤의 문자 하나는 그냥 정보로서 해석 > \’ 는 문자 시작하거나 끝내는 따옴표가 아닌 일반 문자로 취급

typeof()를 통해 해당 데이터의 타입을 알 수 있다.

줄바꿈 : \n

문자 결합 : + ex) alert(”coding” + “everyday”);

문자의 길이를 구할 때는 문자 뒤에 .length를 붙임 ex) “asdf”.length //4출력

변수 : var로 시작, 변수이름은 특수문자를 제외한 모든 문자로 시작가능 / var a=2;

대입연산자 : = / 좌항을 우항에 대입

동등 연산자 : == / 좌항과 우항을 비교해서 서로 값이 같으면 true 아니면 false / 숫자1과 문자 1을 같다고 인식

일치 연산자 : === / 좌항과 우항이 정확하게 같을 때 true 아니면 false / 숫자1과 문자1을 다르게 인식

일치 연산자(===)를 사용하자

undefined : 정의되지 않음(의도적 x) / null : 값이 없음-의도적으로 값이 없는 상태를 부여한것

alert(null == undefined); // true alert(null === undefined); // false

boolean(데이터타입) : true / false

undefined(데이터타입) : undefined

null(데이터타입) : null

true ==1 // true true===1 // false

부정 : ! / != , !==

조건문 : if / else if / else →조건에는 boolean

prompt : alert와 같은 창이 뜨지만 입력창을 통해 입력 가능 / prompt(”당신의 나이는?”);

논리연산자

&&: and연산

|| : or연산

! = not

반복문(loop / iterate)

while(조건){반복시행할 코드} : 조건에는 boolean값

for(초기화 ; 반복조건; 반복될때마다 실행되는코드){} → for( var i=0; i<10; i++)

break : 반복 중단 / continue : 계속

debugger : 해당 코드에서 멈춤 →watch expressionsdp에 i를 입력하면 i값변화를 알수있음 화살표클릭하면서 밑으로가는화살표는 디버거걸린문장 아래의 코드 흐름에 따라 실행

함수 : function 함수명 (매개변수(paramiter)..) {코드 return 반환값} / 호출 : 함수명();

return : 출력, 함수를 종료시킴, 리턴 뒤의 코드는 동작하지 않음

인자 : 입력값, argument

ex) function get_argument(arg){ return arg *1000;}

get_argument(1); //1000출력

배열(array): 연관된 데이터를 모아서 관리하기위한 데이터타입 / 변수: 하나의 데이터 저장

ex) var member = [’a’, ‘b’, ‘c’];

member[0] →a member[1] →b member[2] → c

배열로 리턴을 할 수 있음

function numbers(){ return [’1’,’2’,’3’];}

var num = numbers();

document.write(num[0]); →1출력

배열의 크기 = 배열명.length

배열에 값 추가 : 배열명.push(’’);

배열에 값 여러개추가 : 배열명=배열명.concat([’a’,’b’]);

배열의 시작점에 값추가 : 배열명.unshift(’z’);

배열의 특정구간을 추출하거나 특정구간에 특정배열을 추가 : 배열명.splice(index, howmany, ‘a’,’b’); //index:추가할 위치 , howmany : 제거할 원소의 수

배열의 첫번째 원소제거 : 배열명.shift();

배열의 끝 원소 제거 : 배열명.pop();

정렬 : sort(); →오름차순 정렬 / reverse(); →내림차순 정렬

객체 : 배열은 식별자(인덱스)로 숫자를 사용하지만 객체는 식별자(인덱스)로 문자를 사용가능

var grades = {’fff’ : 10, ‘eiei’ : 6, ‘asss’ : 80}; // ‘fff’는 key(인덱스), 10은 value(값)

grades[’fff’] → 10 grades.fff →10

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(key in grades) {
    document.write("key : "+key+" value : "+grades[key]+"<br />");
} //key는 객체에 있는 key값을 받음

객체 안에 키값으로 list, list에 다시 객체가 들어갈수있다

→grades 객체 안에는 list라는 키가 있고 그 키안에 다른 객체가 담김

this : 함수가 속해있는 객체를 가르키는 변수

var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show' : function(){
        for(var name in this.list){
            document.write(name+':'+this.list[name]+"<br />"); //egoin : 10 ~ 출력, alert(grades['list']['egoing']) 10출력
        }
    }
};
grades.show();

모듈: 코드를 여러개의 파일로 분리하는 것 / 재활용성 높이고 유지보수 쉬움

greeting.js에 코드 작성 후

<script src=”greeting.js”></script>를 통해 호출가능

UI : user interface

API : applicaion programming interface

정규표현식 : 문자열에서 특정한 문자를 찾아내는 도구 / 중요작업:추출, 테스트, 치환

var str= “a”; // 문자열 만드는것

정규표현식 문법

var pattern =/a/; →슬래시 사이의 문자열a가 찾고자하는 대상이다

var pattern = new RegExp(’a’); →a를 찾고자하는 정규표현식 객체생성, 위의 것과 같음, RegExp는 정규표현식 객체를 의미함

pattern.exec(’abcde’); →문자열안의 a를 출력

pattern.test(’abcde’); →문자열안에 패턴(a)가 있는지 true false로 출력

console.log(’abc’.match(pattern)); →[”a”]출력 , 없으면 null출력

console.log(’abc’.replace(pattern. ‘A’); → pattern의 문자열을 A로 치환

정규표현식의 옵션: 옵션에 따라 출력되는 결과가 다르다, 옵션동시사용가능

i : 대소문자를 구분하지 않는다.

var x=/a/;

console.log(”Abcde”.match(x)); //null

var o=/a/i; //대소문자 구분x

console.log(”Abcde”.match(o)); //[”A”] 출력

g : 검색된 모든 결과를 리턴

var x = /a/;

console.log(”abcdea”.match(x)); // [”a”] 하나만 출력

var o = /a/g;

console.log(”abcdea”.match(o)); //[”a”, ”a”] 2개출력

함수

지역변수 : 함수내부에서 선언된 변수 / 함수내부에서만 접근 가능한 변수, 선언한 함수 내부에서만 사용

전역변수 : 함수외부에서 선언된 변수

var vscope = 'global';
function fscope(){
    var vscope = 'local';
    alert('함수안 '+vscope);
}
fscope();
alert('함수밖 '+vscope);

var없이 선언하게 되면 함수내에서 선언해도 전역변수로 된다.

전역변수를 사용해야하는 이유가 분명하지않으면 대부분 지역변수를 사용해야함

전역변수를 사용하는 방법

var MYAPP = {}
MYAPP.calculator = {
    'left' : null,
    'right' : null
}
MYAPP.coordinate = {
    'left' : null,
    'right' : null
}

MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum(){
    return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum());

MYAPP는 전역변수 → 어느함수에 속해있지않음 , 객체

calculator , coordinate →속성(객체안에있는 변수)

⇒하나의 전역변수 객체에 여러가지 변수를 넣어서 사용가능

profile
프론트엔드 공부

0개의 댓글