생각기록
JavaScript 기초 본문
JavaScript : 동적 기능
웹 페이지의 복잡한 기능 구현하는 스크립팅 언어
- 동적기능
- 동적처리
- 이벤트처리
- 슬라이드메뉴
사용법 <head>, <body> 안에 사용 가능함
<script> </script>삽입
페이지 로딩때, 버튼을 누르면 안뜰때 > 자바스크립트 함수가 밑에 선언이 되어서 그렇다.
바로 실행되지 않는 아이들은 body 아래 둔다.
헤드에 다 써버리면, 바디를 읽기전에 페이지가 느리게 로딩됨
그래서 어느게 중요한지, 덜중요한지를 구분하게 되어야한다.
자주 쓰이는 JS 사용해보기
console.log()
브라우저의 개발자 도구(f12) > 콘솔 확인 가능
alert()
알림창 띄움
prompt() 함수
사용자에게 어떤 사항을 알려주고 사용자가 답변을 입력할 수 있는 윈도우를 화면에 띄운다.
사용자가 입력한 내용을 문자열로 반환한다.
Javascript 변수
임의의값을 담아 놓는 변하는 값 (변할 수 있는 수, 정해진 값이 아닌 수)
1) 선언
- let 변수이름; >변수만 선언해둔 공간 (a 라는 변수를 선언했지만, 그 안에 어떤값도 배정 x)
- var 변수이름;
- const 변수이름;
이름은 영어만 가능하다.
*주의할점
변수의 타입 : 정수, 실수, 문자, 문자열, 참.거짓 등이 있는데,
다른 타입의 변수로 연산을 수행하면, 예상치 못한 결과가 생길 수 있다.
** alert(“a”) a라는 문자 , alert(a); 변수 a값이 출력됨 **
2) 할당 ( 값 )
const 변수이름 = 값;
변수 키워드
var
var 변수이름;
- 선언 단계와 초기화가 동시에 이루어지며, 아무것도 할당하지 않으면 자동으로 undefined가 할당
- 중복선언 가능. 재선언 가능(키워드, 값 바꿀 수 있다.)
- 같은 이름의 변수명이 여러 번 선언되었다면 어디 부분에서 문제가 발생하는지 파악하기 힘듬
* undefined는 콘솔로그 보면 뜸
let
let 변수이름;
임시값을 많이 담음
변수명을 중복 선언이 불가능하지만, 재할당 가능
var과 마찬가지로 선언을 하지 않으면 자동으로 undefined가 할당
let a = 100;
consolel.log(a) // 결과값 100
let a = 200;
console.log(a) // 에러 발생
// SyntaxError: Identifier 'a' has already been declared
// 중복 선언 불가
a = 300;
consolel.log(a) // 결과값 300
// 값을 재할당 하는 것은 가능
출처: https://heinafantasy.com/153 [디지털 노마드:티스토리]let a가 두번 선언 되서 에러, 값을 재할당 하는 것은 가능하다.
const
const 변수이름 = 값;
보통 상수( 변수는 바꿀수 있지만, 얘는 못바꿈)를 선택하는 키워드
예)성_ 이름은 바뀔 수 있다.
초반에 선언할 때 반드시 초기화를 동시에 진행해야 한다.
변수명 재선언 불가능, 재할당 불가능
const a = 100;
consolel.log(a) // 결과값 100
const a = 200;
console.log(a) // 에러 발생
// SyntaxError: Identifier 'a' has already been declared
// 중복 선언 불가
a = 300; // 에러 발생
// Assignment to constant variable.
// 값을 재할당 하는 것도 불가
출처: https://heinafantasy.com/153 [디지털 노마드:티스토리]a변수를 중복 선언 해서 에러 뜨고, 값을 재할당 하는 것도 오류가 뜬다.
결론은
- 값을 재할당할 필요가 있으면 let,
- 없으면 const
- var는 요즘 거의 사용하지 않는 변수명
javascript 자료형
강한 타입 언어
타입 검사를 엄격하게 하고 통과하지 못하면, 실행 자체가 안된다.
string, int, double 등처럼 타입을 1종류로 명확히 지정
약한 타입 언어
런타임에서 타입 오류를 만나더라도 실행을 막지 않는다. (타입이 여러종류여도 같은 변수에 문자든 상수든 상관없다.)
타입이 여러 종류인 값들이 상관없이 지정된다.
js는 약한타입 언어이다.
primitive 자료형
- 가장 기본적인 자료형태
- string - 문자 데이터를 나타낼 때 사용
- number - 숫자형으로 정수와 부동 소수점, 무한대 및 NaN(숫자 아님)
- boolean - 참(true), 거짓(false) 둘 중 하나의 값을 갖는 요소
- null - 빈 값을 뜻하는 null 타입 타입은 존재하지만 값 존재 x
- undefined - 값 x 타입 x
object 자료형 (객체) : 기본형이 아닌 것은 모두 객체
추후에 다룸
자료형을 확인하는 법 typeof ()
console.log(typeof('문자'));
console.log(typeof(245));
console.log(typeof(function() {}));
console.log(typeof(true));
console.log(typeof({}));
console.log(typeof([]));
console.log(typeof(NaN));
console.log(typeof(null));
앞에서, 자료형의 타입에 대해서 이야기 했는데,
'다른 타입의 변수로 연산을 수행하면, 예상치 못한 결과가 생길 수 있다.' 를 위해 변환을 배워보겠다.
var 변수 = 10; //숫자 10을 변수로 선언
var 변수 = '10'; //문자 10을 변수로 선언
둘은 다르다.
형 변환 - 문자열로
1. string(숫자);
- 숫자를 문자로 변환
- var X = String(123); > 숫자123을 문자'123'으로 변환해준다.
- vsr A = string(true); > true값이 아니라, 문자 true임
2. .toString();
- 숫자를 문자로 변환 + 진법같은거 바꾸기 가능
- var X = 123.toString(진법); > 숫자를 문자로 변환
3. .toFixed(소수자리수);
- 숫자를 문자로 변환 + 실수형의 소수점 자리를 지정 가능
4. 숫자 + "문자열";
- 숫자와 문자열을 한 문자열로 더해줌
var x = 123; //x 변수 값을 123 선언
var a = String(x); //문자형 123
var a = x.toString(); //문자형 123
var a = x.toString(2); // 문자형 111011(2진법)
var a = x.toString(16);//문자형 7b (16진법)
var a = x.toFixed(); //문자형123
var a = x.toFixed(1); //문자형 123.0
형 변환 - 정수로
1. Number();
- Number()는 인자로 전달된 문자열을 Number로 변환합니다.
- 숫자가 아닌 문자나 undefined 등을 인자로 전달하면 NaN(Not A Number)를 리턴합니다.
const str = '1234'; // 변수 str의 값 '1234' 문자
const num1 = Number(str); // 변수 str을 숫자로 변환
const num2 = Number('1234.5');
const num3 = Number(undefined);
const num4 = Number('abcd');
console.log( num1 + ',' + typeof num1 );
console.log( num2 + ',' + typeof num1 );
console.log( num3 + ',' + typeof num1 );
console.log( num4 + ',' + typeof num1 );
2. parseInt();
- parseInt()는 인자로 전달된 문자열을 정수의 Number로 변환합니다.
- 소수를 갖고 있는 실수는 정수로 변환되기 때문에 이 부분을 고려하셔야 합니다.
const str = '1234'; // 변수 str의 값 '1234' 문자
const num1 = parseInt(str); // 변수 str을 숫자로 변환
const num2 = parseInt('1234.5'); // 변수 str을 정수로 변환 1234
const num3 = parseInt(undefined);
const num4 = parseInt('abcd');
console.log( num1 + ',' + typeof num1 );
console.log( num2 + ',' + typeof num1 );
console.log( num3 + ',' + typeof num1 );
console.log( num4 + ',' + typeof num1 );
연산자
1. 대입연산자: =
2. 비교연산자 : 값을 비교하고 True, False 또는 Null인 결과를 반환하는데 사용
| = 는 비교연산자가 아니다 | 대입연산자임!! |
| != | 같지 않다. |
| == | 값만 비교 |
| === | 값과 타입이 일치해야 함 |
| !=== | 값, 타입이 달라야 한다 |
| > | 크다 |
| >= | 크거나같다 |
| <> | 값이 달라야 한다. |
산술 연산자: +, -, *, /
논리 연산자: (조건문에 쓰인다) True, False를
| 연산자 | 뜻 | |
| ! (Not) | 아닌 경우 | true가 아닌 경우 true 반환 |
| && (And) | 모두 | 둘 다 ture면, true 반환 |
| || (Or) | 또는 | 둘 중 하나라도 true면, true 반환 |
함수
function hello() { }
- function 함수선언
- hello 함수이름 * - 카멜 표기법 이용 (helloWorld 처음 소문자 띄어쓰는곳 대문자)
- () 매개변수(인자) 받는 곳 = parameter
- {} 함수가 실행되는 Scope 라고도 한다. = body / 이 함수의 핵심 부분, 이 함수로 어떤 동작을 할지 !
- 특정 작업을 수행하기 위해 독립적으로 설계된 코드 집합
function sesac(){
console.log("sesac hi!");
}
sesac();
실행이 선언보다 위에 있으면 안되고,
선언만 하고, 입력(실행, 호출)을 하지 않으면 뜨지 않는다.
function sesac2(abc) {
alert(abc + "hello");
}
sesac2("홍길동");
sesac2("용산");
function sesac2(abc, test, a) {
alert(abc + " " + a + "hello");
}
sesac2("홍길동", "", "13");
sesac2(a);파라메터 : 실행한 것 순서대로 전달받는다. 3개 받으면, 그대로 3개 보내야한다.
내가 헷갈렸던점은
실습중
no_1, no_2, no_3 이라는 변수 3개를 선언하고, 각각 숫자 할당하기
no_1, no_2, no_3의 합계를 alert로 출력하는 add 함수 만들기
no_1과 no_2의 차이를 alert 출력하는 sub 함수 만들기
no_1과 no_2의 곱을 alert 출력하는 mul 함수 만들기
var no_1 = 1; 변수선언은 잘했고,
함수중에
function add ( no_1 + no_2 + no_3)
{ alert (); }
이런 실수를 했다.
() 이곳은 인자를 받는 곳이고
{ } 실질적 계산과 기능은 이곳에서 담당한다.
var no_1 = 1;
var no_2 = 2;
var no_3 = 3;
function add ( no_1, no_2, no_3) {
alert ( no_1 + no_2 + no_3 );
}
function sub ( no_1, no_2) {
alert( no_1 - no_2 );
}
function divide ( no_1, no_2 ) {
alert( no_1 / no_2 );
}
function mul ( no_1, no_2) {
alert( no_1 * no_2 );
}
add ( no_1, no_2, no_3 );
sub ( no_1, no_2 );
divide ( no_1 , no_2 );
mul ( no_1 , no_2 );기억할 것은 또
변수 선언, 함수 선언만 하면 기능이 실행되지 않는다.
함수 실행을 해야한다.
'SeSAC 풀스택 > JavaScript' 카테고리의 다른 글
| JQuery 사용 (0) | 2022.11.05 |
|---|---|
| 2022-11-05 수업 Bootstrap (0) | 2022.11.05 |
| JavaScript DOM 문서 객체 모델 (0) | 2022.11.04 |
| JavaScript 객체 자료형 (0) | 2022.11.03 |
| 조건문, 반복문 (0) | 2022.11.01 |
