240311-240314 javascript

brave_chicken·2024년 3월 15일

JavaScript 잇(IT)생 챌린지

잇(IT)생 챌린지

목록 보기

5/90

업로드중..

3. 함수

1) 함수를 선언하고 호출하는 방법

함수를 정의만하고 호출해서 사용하지 않으면 실행되지 않음
함수를 실행하면 호출문으로 올라갔다가 실행이된다

<head>
	<script type="text/javascript">
		function mytest(){
			for(let i=1;i<=10;i++){
				console.log("자바스크립트"+i);
			}
			console.log("=====================")
		}
	</script>
</head>
<body>
	<script type="text/javascript">
		mytest();
		console.log("다른작업1");
		mytest();
		mytest();
		//코드의 재사용
	</script>
</body>

리턴값과 매개변수(head:함수, body:호출)

리턴값 : 함수의 실행결과(함수의 실행결과를 함수를 호출한 곳으로 보낸다.)
매개변수 : 함수를 실행하기 위해서 필요한 값(필요한값 : 외부에서 전달해야 하는값)
1. 리턴값이 없고 매개변수가 없는 함수
: 더하기 위한 숫자값들이 고정되어 있기 때문에 제한(사용자들의 요구사항을 반영할 수 없다.)

<head>
	<script type="text/javascript">
		function test1() {
			let num1 = 100;
			let num2 = 200;
			document.write("<h1>test1함수:"+(num1+num2)+"</h1>");
		}
	</script>
</head>
<body>
	<script type="text/javascript">
		document.write("<h1>시작</h1>")
		test1();
	</script>
</body>

2.리턴값이 없고 매개변수가 있는 함수
: 매개변수가 있다는 것은 함수를 사용할 수 있는 경우의 수가 더 많아졌다는 의미(재사용 가능, 유연성 높아짐)

<head>
	<script type="text/javascript">
		function test2(num1,num2){
			document.write("<h1>test2함수:"+(num1+num2)+"</h1>");
		}
	</script>
</head>
<body>
	<script type="text/javascript">
		test2(100,200);
		test2(500,600);

//prompt의 실행결과를 매개변수로 전달할수도 있음- 매개변수에 다른 함수의 호출 결과를 전달할 수 있다
		let num1 = parseInt(prompt("숫자를 입력하세요"));
		test2(num1, 1000);
		test2(num1, parseInt(prompt("숫자를 입력하세요")));
	</script>
</body>

3.리턴값이 있고 매개변수가 있는 함수
: 리턴값이 있는 경우 리턴값을 받아서 사용할 수 있도록 코드를 구현하는 작업해야함

<head>
	<script type="text/javascript">
		function test3(num1,num2){
			let result = num1+num2;
			return result;
            //함수의 마지막 명령문에서 리턴을 이용해서 함수의 결과를 호출한 곳으로 전달
		}
		
//4.테스트3의 결과를 사용하는 함수
		function checkdata(data){
			if(myresult>=500){
				alert("통과")
			}else{
				alert("다시작업")
			}
		}
	</script>
</head>
<body>
	<script type="text/javascript">
//1)리턴값을 저장할 변수를 선언하고 받기
		let myresult = test3(1000,2000);
		document.write("<h3>test3의 실행결과=>"+myresult+"</h3>");
		console.log("결과=>"+myresult);
		if(myresult>=500){
			alert("통과")
		}else{
			alert("다시작업")
		}
		
//2)함수의 결과를 또 다른 함수의 매개변수로 전달할수 있다.	
//test2(num1, parseInt(prompt("숫자를 입력하세요"))); 이런거
		alert(test3(10000,20000));
		document.write("<hr/>");
		checkdata(test3(10000,20000))	;	
	</script>
</body>

2) 함수와 변수의 호이스팅이란 개념을 이해해야함. 교재 519p

웹브라우저에서 자바스크립트를 해석할 때 함수선언부를 가장 먼저 해석한다.
메모리에 글로벌영역에 선언된 변수나 함수를 자바스크립트 인터프리터가 최우선의 영역으로끌어올려서 글로벌영역에 추가한다. 이를 호이스팅이라 한다.
글로벌영역에 추가되는 것들이 많게 되면 실제 실행될 코드의 실행시점이 늦어질수있다.
var로 선언된 변수는 global 영역에 끌어올려서 해석한다.
let으로 선언된 변수는 호이스팅이 발생하지 않는다.
표현식으로 함수를 정의하면 함수의 호이스팅이 발생하지 않는다.

3) 표현식으로 함수 정의하기. 535p

=연산자를 이용해서 변수에 함수를 할당해서 사용
정의된 함수를 할당한 변수가 함수의 이름으로 쓰여짐

[형식]

(1) 이름이 있는 함수의 표현식

var 변수명 = function 함수명(매개변수…){

실행할 코드

}

함수명() —> 잘못된방식

변수명() —> 변수명을 함수명처럼 사용하므로 원래 함수이름은 사용할 수 없다.

(2) 익명함수의 사용(이름이 없는 함수의 표현식)

var 변수명 = function(매개변수list){

실행할 코드

}

⇒ 익명함수는 표현식으로 주로 사용하거나 매개변수에서 함수를 정의하고 바로 사용하는 경우 많이 사용

화살표 함수

: ES6버전부터 함수선언 좀 더 간단히 작성하는 방법

일반표현식

const myfunc = function() {
			return "화살표함수연습(화살표함수전의 일반표현식)";
		}
		let result1 = myfunc();
		console.log(result1);

화살표함수 이용- function키워드생략

const myfunc2 = ()=>{
			return "화살표함수연습(화살표함수에서 function키워드 없애기)";
		}
		let result2 = myfunc2();
		console.log(result2);

화살표함수 이용- 함수내부에서 실행할 명령어가 리턴 한줄인 경우
function키워드 {}, 리턴키워드를 없앨 수 있다.

const myfunc3 = ()=> "화살표함수연습(화살표함수에서 {}과 return없애기)";
		
	console.log(myfunc3()); // -> 위와달리 이렇게도할수있음

//

매개변수가 있는 화살표함수 = 함수 내부에서 실행할 명령어가 한줄인 경우에만 {}을 생략할 수 있다. 여러줄이면 {}생략불가

const myfunc4 = (name)=> "화살표함수연습(매개변수):"+name;
	console.log(myfunc4("bts"));

const myfunc5 = (name,age)=> "화살표함수연습(매개변수2):"+name+","+age;
	console.log(myfunc5("bts",30));	
		
		
const myfunc6 = (name,age)=>{
	console.log("화살표함수연습(실행할 명령문이 여러줄):"+name+","+age);
			return "종료";
		}
console.log(myfunc6("bts",30));

출력은 이렇게 됨

전역변수(글로벌변수), 지역변수(로컬변수)

자바스크립트에는 전역변수와 지역변수의 개념이 있음. 517p

function밖(스크립트 위에서 변수를 선언:var, let 등의 키워드 없이)에서 변수를 선언하는 경우 : global변수(전역변수)
function밖(스크립트 위에서 변수를 선언:var, let,const키워드)에서 변수를 선언하는 경우 : global변수(전역변수)
함수 내부에서 변수를 선언하는 경우(선언키워드 없이) : 전역변수
=>변수가 선언된 함수가 먼저 호출되어야 한다.
=>함수에서 함수를 호출해서 사용하는 경우는 일반적 - 다른함수의 실행결과를 사용하는 경우
선언키워드(var,let,const)를 이용해서 함수 내부에서 선언 : 지역변수
=>지역변수는 선언된 위치(블럭)에서만 사용할 수 있다.
=>{}(블럭)안에서 선언된 변수는 {}안에서만 사용할 수 있는 지역변수

4)고차함수

다른함수를 매개변수로 받을 수 있는 함수

map, forEach, filter…

5)콜백함수

다른 함수에 매개변수로 전달되는 함수, 비동기 작업을 처리할 때 사용

4.이벤트

웹브라우저에 마우스나 키보드의 여러 움직임을 발생시키는 것을 이벤트라 한다. 즉, 사용자가 웹페이지에서 마우스나 키보드를 가지고 하는 모든 행위
이벤트처리기:이벤트가 발생하면 처리하는 함수
이벤트종류
click
dbclick

5.내장객체(builtin)

브라우저마다 자바스크립트를 해석하고 실행할 수 있는 엔진이 탑재(프로그램이 포함)되어있다.
자바스크립트 엔진에 포함된 객체를 내장객체한다.

[객체를 사용하는 방법]

브라우저에 포함된 자바스크립트 엔진이 내장하고 있는 객체를 사용하기 위해서 엔진에 포함된 자바스크립트 인터프리터가 실행될때 인식할 수 있도록 만들어야 하는데 이를 객체생성이라한다.

객체생성=인스턴스생성

let(선언문중하나,var,const) 변수명 = new 내장객체명()

1) Date객체

Date객체로 현재 날짜 나타내기

new Date();

출력해보기
let today = new Date();
document.write(today);

Date객체로 특정 날짜 나타내기

new Date("2023-11-28")

Date객체로 특정 날짜와 시간 나타내기

new Date("2023-11-28T09:00:00")

2) Math 객체

3) string 객체

4) Array 객체

1. 배열 요소의 사이즈를 정해서 Array 객체를 생성해서 사용

let myarr = new Array(5);

변수 5개를 선언한 것, 변수 5개를 하나의 array객체에 접근
배열의 크기를 지정(array 안에 5개 변수 들어갈 수 있음)
배열은 index가 0부터 들어감

myarr[0] = 100;
myarr[1] =100;
myarr[2] = 100;
myarr[3] = 100;
myarr[4] = 100;

배열 요소의 값을 초기화하는 작업

document.write("<h3>배열의 요소의 갯수:"+myarr.length +"</h3>")
for(let i=0;i<5;i++){
	document.write(myarr[i]+"<br/>");
}

index를 이용하면 for문으로 접근 가능

2.배열의 사이즈를 지정하지 않고 - 실행 중에 추가가능

let myarr2 = new Array();
document.write("<h3>배열의 요소의 갯수:"+myarr2.length +"</h3>"); 
// 선언 전에는 0
myarr2[0] = "java";
myarr2[1] = "oracle";
myarr2[2] = "JDBC";
myarr2[3] = "servlet";
document.write("<h3>배열의 요소의 갯수:"+myarr2.length +"</h3>"); 
//선언 후 4(0, 1, 2, 3)
		
for(let i=0;i<myarr2.length;i++){
	document.write("<h3>배열의 요소:"+myarr2[i] +"</h3>");
  //이러면 배열 요소 다 출력
}

3. 배열을 사용하는 방법 - 배열의 선언, 생성, 초기화를 한번에 작업

let myarr = new Array("a","b","c","d","e");
for(let i=0;i<myarr.length;i++){
	document.write("<h3>배열의 요소: "+myarr[i]+"</h3>");
}

4.배열을 사용하는 방법 - 배열의 선언, 생성, 초기화를 한번에 작업

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		function showArray(arr) {
			for(let i=0;i<arr.length;i++){
				document.write("배열의 요소:"+arr[i]+"<br/>");
				}
			document.write("<hr/>");
		}
	</script>
</head>
<body>
	<script type="text/javascript">

	//let myarr1=[]; //배열의 사이즈를 지정하지 않고 초기화 let myarr1 = new Array();
	let myarr1=[99,89,10,100,99];
	let myarr2=["a","b","c","d"];
	
	showArray(myarr1);
	showArray(myarr2);
	//어레이 객체의 메소드
	//join메소드는 매개변수로 전달된 문자열과 배열의 요소가 연결되어 하나의 문자열로 리턴//배열->문자열 만들기
	let data1 = myarr2.join(",");//컴마(내가 지정한 기호)로 연결해서 배열이 아니라 문자열로 만듦
	document.write(typeof data1 + "<br/>") //data1은 스트링임(문자임)
	
	//문자열을 구분기호로 잘라서 배열로 변경-split은 string이 갖고있는 메소드//문자열->배열만들기
	let data2 = data1.split(",");
	showArray(data2);
	
	//배열의 요소를 거꾸로
	let data3 = myarr2.reverse();
	showArray(data3);
	
	//배열의 정렬
	/* let data4 = myarr1.sort();
	showArray(data4);*/
 	
	//배열의 요소 넣기
	myarr2.push("mong");
	showArray(myarr2);
	</script>
</body>
</html>

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

6.브라우저객체

html의구성요소를 접근하기 위한 표준방법(DOM의 접근방식을 활용. id, tag, class와 같은 선택자를 이용해서 접근)을 활용해서 접근

[window객체]

1) 대화상자와 관련된 메소드

-alert

-confirm

-prompt

-open : 새창실행

-close : 창닫기

-opener객체 : popup창을 오픈해준 윈도우

3) 데이터처리

-parseInt : 숫자모양을 한 문자열을 숫자로 변환

-isNaN : 낫어넘버, 입력한 문자열이 숫자인지 문자인지 판단(데이터타입을 확인하지 않고 문자모양만 가지고 판단)(문자 : true, 숫자:false

-eval : 매개변수로 전달된 메시지를 실제로 실행(보안에 취약)

-trim : 공백을 제거

4) 자동실행

7.DOM

8.JQuery

백엔드까지 연동하면

1.JSon

2.Ajax

3.프로토타입

고급

자바스크립트 프레임워크 및 라이브러리

본 포스팅은 멀티캠퍼스의 멀티잇 백엔드 개발(Java)의 교육을 수강하고 작성되었습니다.

brave_chicken

이전 포스트

javascript_멀티캠퍼스 240305, 240308

다음 포스트

240311-240314 javascript

잇(IT)생 챌린지

3. 함수

1) 함수를 선언하고 호출하는 방법

리턴값과 매개변수(head:함수, body:호출)

2) 함수와 변수의 호이스팅이란 개념을 이해해야함. 교재 519p

3) 표현식으로 함수 정의하기. 535p

(1) 이름이 있는 함수의 표현식

(2) 익명함수의 사용(이름이 없는 함수의 표현식)

화살표 함수

전역변수(글로벌변수), 지역변수(로컬변수)

4)고차함수

5)콜백함수

4.이벤트

5.내장객체(builtin)

1) Date객체

2) Math 객체

3) string 객체

4) Array 객체

1. 배열 요소의 사이즈를 정해서 Array 객체를 생성해서 사용

2.배열의 사이즈를 지정하지 않고 - 실행 중에 추가가능

3. 배열을 사용하는 방법 - 배열의 선언, 생성, 초기화를 한번에 작업

4.배열을 사용하는 방법 - 배열의 선언, 생성, 초기화를 한번에 작업

6.브라우저객체

1) 대화상자와 관련된 메소드

3) 데이터처리

4) 자동실행

javascript_멀티캠퍼스 240305, 240308

JAVA start_240315

0개의 댓글

240311-240314 javascript

잇(IT)생 챌린지

3. 함수

1) 함수를 선언하고 호출하는 방법

리턴값과 매개변수(head:함수, body:호출)

2) 함수와 변수의 호이스팅이란 개념을 이해해야함. 교재 519p

3) 표현식으로 함수 정의하기. 535p

(1) 이름이 있는 함수의 표현식

(2) 익명함수의 사용(이름이 없는 함수의 표현식)

화살표 함수

전역변수(글로벌변수), 지역변수(로컬변수)

4)고차함수

5)콜백함수

4.이벤트

5.내장객체(builtin)

1) Date객체

2) Math 객체

3) string 객체

4) Array 객체

1. 배열 요소의 사이즈를 정해서 Array 객체를 생성해서 사용

2.배열의 사이즈를 지정하지 않고 - 실행 중에 추가가능

3. 배열을 사용하는 방법 - 배열의 선언, 생성, 초기화를 한번에 작업

4.배열을 사용하는 방법 - 배열의 선언, 생성, 초기화를 한번에 작업

6.브라우저객체

1) 대화상자와 관련된 메소드

2) popup

3) 데이터처리

4) 자동실행

javascript_멀티캠퍼스 240305, 240308

JAVA start_240315

0개의 댓글