🎈 01 자바스크립트의 소개
(1) 자바스크립트란
이미지 슬라이드 효과, 팝업효과 등의 기능을 포함한 동적인 웹사이트 제작시 사용되는 프로그래밍 언어
HTML->구조
CSS->꾸며줌
JavaScript->동적인
(2) 자바스크립트의 활용 범위
1. IOT
2.하이브리드 앱(web mobile)
3. 서버 개발
🎆 02 자바스크립트의 변수
(1) 변수 선언 및 데이터 저장
- 변수 선언: 데이터를 담을 공간을 생성하는 곳
- 변수 초기화: 생성된 변수에 데이터를 전달하는 것
var fruit; // 변수 선언 fruit="apple" //변수 초기화 var fruit="apple" // 변수 선언 및 초기화
(2) 데이터 변경
var fruit="apple"; fruit="banana;
=>변수 fruit의 데이터를 apple에서 banana로 변경된 변수는 이미 선언되었으므로 var를 다시 작성할 필요는 없다.
(3) 변수 안의 데이터 확인 방법
var fruit="apple" console.log(fruit); //apple 출력 document.write(fruit) //웹 화면에 apple 출력
=>console.log( );는 변수 안에 데이터를 확인할때 사용하는 언어
(4) 변수 생성시 주의 사항
// 변수병은 숫자로 시작 할 수 없음 var 1str (x) //변수명은 최대한 자세히 작성 var randomNumber; //의미가 불명확한 단어들의 조합은 피해야함 var tmax;
(5) 자바스크립트 사용 방법
//<script> 태그 안에 src 속성값으로 js 파일을 입력후 html 파일과 연동 <body> <script src="index.js"></script> </body>
(6) 변수 데이터 확인 방법
=> 우클릭 후 크롬 개발자 검사 or F12=>console
🎇 03 자바스크립트의 데이터 타입
(1)데이터 타입이란?
초콜릿도 다양한 종류가 존재하듯 변수에 전달되는 데이터 타입에도 여러 종류가 존재한다.
(2) 8가지 데이터 타입
string(문자열) , Number(숫자) , Function(함수) , Array(배열)
,Object(객체) ,Boolean(불린) , undefined(정의되지 않음) , null(널)
(2)-1 문자열
var str1="Hello World"; var str2='Nice to meet you"; var str3="20" //숫자가 아닌 문자열
=> "큰따옴표"또는 '작은 따옴표'안에 작성된 데이터
<주의 사항>
var str1="Elice" var str3='He\'s a boy'; //역슬레쉬를 사용하여 혼용이 안되도록 한다.
2-(2) 숫자
var num1=10; var num2=-10; var num3=3.14;
=>별도의 기호 없이 숫자를 입력한 상태
(2)-3 함수
- 함수 생성 : function 키워드를 사용하여 생성
- 함수 호출 : 함수 안에 있는 코드를 실행시키겠다는 의미 방법1)
var func1=function( ){ console.log("func1"); //함수 생성 } func1( )//함수 호출
방법 2)
> ```
function func1( ){
console.log("func1"); //함수 생성
}
func1( ); //함수 호출 var area=function(width,height){//매개변수 return width*height; } area(10,20); // 인자
- 매개변수 : 인자로부터 전달받은 값이 들어가는 통로, 상황에 따라 생략가능
- 인자 : 함수에게 전달하느 데이터
- return : 함수 안에 데이터를 저장할 때 사용
<함수 데이터 호출 방법>
var area=Function(width,height){ return width*height;} var result=area(10,20); // 새변수를 생성한 후 그 변수를 console.log( )로 감싸기 console.log(result); console.log(area(10,20)); // 함수 자체를 console.log( )로 감싸기
(2)-4 배열
var fruit=["사과","배","수박"]; console.log(fruit); // 데이터 확인
=> 비슷한 성격을 갖고 있는 데이터를 하나의 변수 안에서 관리
console.log(fruit[0]); // 0번째 인덱스의 데이터 추출
- 배열 데이터 변경하기
fruit[0]="포도"; console.log(fruit);
=>인덱스를 사용하여 접근 후 새로운 데이터 대입 (출력:포도,배,수박)
2-(5) 객체
var student={ //프로퍼티 name:"inkwon, //데이터 age:20, skills:["자바스크립트","HTML","CSS"], //매서드 sum:function(num1,num2){return num1+num2);}
=> 프로퍼티,메서드,데이터로 구성
=>여러 종류의 데이터 타입 삽입 가능
(객체가 가지고 있는 데이터를 프로퍼티라고 객체가 가지고 있는 함수들을 매서드라고 부른다.)
-
객체 데이터 출력하기
var student={ name:"inkwon, age:20, skills:["자바스크립트","HTML","CSS"], sum:function(num1,num2){return num1+num2); } } console.log(student.name); // 객체명.프로퍼티명 console.log(student["name"]; //객체명["프로퍼티명"] -
객체 데이터 변경하기
studnet.name="park"; // name 프로퍼티의 데이터 변경 console.log(student.name); //park 출력```
(2)-6 undefined,null
- undefined : 변수 안에 데이터를 입력하지 않는 상태 (데이터가 없는 것)
- null : 개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태(빈 데이터를 지정한 것 )
(2)-7 Boolean
var t = true; var f= false;
=> 참 또는 거짓 데이터가 들어가 있는 상태
✨ 04 자바스크립트의 프로퍼티와 메서드
(1) 데이터 타입의 프로퍼티와 메서드
초콜릿의 종류별 갖고 있는 고유한 성질, 자바스크립트에서 사용자를 위해 사전에 작성된 편의 기능
(2) 문자열 프로퍼티와 메서드
var str1="Hello World"; str1.legnth; // 문자열의 길이 str.charAt(0); // 문자어 추출 str1.split(" "); //공백 기준으로 문자 나눈 후 배열[Hello, World]로 출력
```(3) 배열 프로퍼티와 메서드
var fruit=["사과","배","포도"]; fruit.length; //데이터의 개수 fruit.push("딸기") //배열 맨 뒤에 데이터 삽입 fruit.unshift("레몬"); //배열 맨앞에 데이터 삽입 fruit.pop( ); //배열 맨뒤에 데이터 제거 fruit.shift( ); //배열 맨 앞에 데이터 제거
```(4) math의 수학 연산 메서드
Math.abs(-3); //절대값 Math.ceil(0.3); //올림 Math.floor(0.9); //내림 Math.random( ) //임의의 숫자 출력
```(5) 문자를 숫자로 변환하는 메서드
parseInt("20.6"); //정수형태의 20변환 parseFloat("20.6"); //실수 형태의 20.6 변환
