👩🏻‍💻 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/⠀⠀⠀⠀ JᴀᴠᴀSᴄʀɪᴘᴛ

2023/12/11🕹️ 드디어 JavaScript를 시작하다

유리쯔의일상 2023. 12. 11. 21:30
반응형

 

 

 

❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤ 

 

 

 

 

 

 

 

 

수업 시작 전

  • 기술노트를 작성하자
    템플릿을 갖고 작성
    구분 / 기술스택 / 이론정리 / 샘플코드 / 솔루션 / 내가 발견한 팁 / 응용할 아이디어
  • 작성시 주의점
    증빙할 수 없는 표현은 금지한다, 효율적, 좋다 등등
    최대한 구체적으로 설명해야한다
  • 문제가 있을대 어떤 기술로 해결 할것인기, 해결할 기술스택까지 기분을 지어서 사용하자
  • 구체적 표현이란 해당 스택에 대한 설명과 과정
  • 솔루션은 절차적으로 기술
  • 발견한 팁은 본인이 스스로 느낀점을 적어야한다
  • 우리가 공부하는 목적은 문제 해결 능력 향상이다

 

 

Today Study : JavaScript

  • Skill : 변수 / Block scope / function scope
    부제 : java의 전역변수, 지역변수와 비교해보자
  • 실습환경
    크롬 : 개발자 모드로 진행
    주의점 : 창을 닫거나 F5를 누르면 소스도 사라진다
  • 오전 학습내용
    var
    let
    const
    Block Scope
    Funtion Scope

웹 브라우저는 html, css, js 모두 랜더링 할 수 있다.
javascript는 변수 선언시 자료형 선언을 따로 하지않는다.
값에 따라 자료형을 자동으로 결정한다

💡질문💡 우리가 자료형을 왜 공부하는걸까 ? 
👨🏻‍💻 자료형 마다 처리하는 연산자나 처리 로직이 달라지기 때문이다.

+ 연산자 우선순위 절대 놓치지말자

 

예제코드  

var a = 30 a = a+10  console.log(a) // 40 출력 
console.log(a+10) // 50 출력 
console.log(a) // 40 출력  

대입을 따로 하지 않았음으로 a 의 값은 변하지않는다

 

 

 

 

 

 

 

 

Block Scope

JavaScript는 Java처럼 변수의 영역이 존재한다
Block , function 으로 나뉜다

Block Scope 
--------------------------------- 
if(true){ 	var a = 30 	console.log(a) }
Function Scope 
--------------------------------- 
function test1(){ 	
	let b = 40 	
    console.log(b) 
 }

 

 

 

 

🚧 차이점 🚧

Block Scope인 a 는 외부 호출이 가능하다
var 변수 자체가 function scope이다
Function test의 B는 호출시 값이 없다며 출력된다
let 변수는 Block Scope 이다
Block Scope는 해당 블록 안에서만 유효하다

  var let const
function Scope O O O
Block Scope X O O

 

JavaScriptdptjs Function Scope가 더 큰 범위이다


👩🏻‍💻 주의할점 👩🏻‍💻
Block Scope 내부에 var를 쓴다는건 선언 자체가 애매모호해진다, 의미가 이상해지는 것 이다

 

💡질문 : function 과 메서드의 차이 💡

객체화를 시키지 않는 차이가 있다
메서드는 Class 안에 메서드를 정의한다 : 객체화 시키는것
Function은 객체화를 하지 않는다

[예제]  var k1 = 20; var k2 = "20";  
if(k1==k2){ 	
	console.log("같다") 
} // 콘솔에 같다고 나옴  

if(k1===k2){
	console.log("같다") 
} // 콘솔에 같다가 찍히지 않음

비교 연산자 == 비교는 얕은비교로 값만 비교한다
비교 연산자 === 비교는 깊은비교로 값과 자료형을 비교한다

 

 

 

 

 

 

 

 

Class 와 생성자

Class, constructor (생성자 키워드), 메서드는 메서드명()

Class Person{ 	
	// 이것은 생성자이다  	
	constructor(name, age, city){
    	this.name = name; 		
    	this.age = age; 		
    	this.city = city; 	
    } 	 	
    
    // 이것은 메서드 이다  	
    nextYearAge(){ 		
    	return Number(this.age)+1; 	
    } 
}  

let kim = new Person('kim', '24', 'seoul');  
console.log(kim.nextYearAge()) // 출력값 25 
console.log(typeOf(kim)) // 출력 object

 

 

 

 

 

 

 

 

Array

예제 
------------------------------------  
var a1 = new Array(10); 
console.log(a1.length); // 출력값 10

한번더 점검
배열의 특징

  1. 길이가 고정되어 있는 고정길이형이다
  2. 인덱스가 0 부터 시작한다
  3. 메모리에 연속적으로 할당한다
  4. 길이를 중간에 변경할 수 없다

ArrayList 와 차이점

  1. 가변길이이다
  • JavaScript의 배열은 Java와 다르게 자료형을 구별하여 대입하지 않는다. 그냥 다넣어 !! 💢

 

 

 

 

 

 

웹 브라우저

alert : 브라우저에서 팝업창을 띄어주는 키워드
document.write : 웹 브라우저에 작성하는 키워드
console.log : 콘솔에 출력하는 키워드

 

 

 

 

 

 

 

Form 태그

폼태그는 폼태그 안에 있는 정보만 전달한다

  • 키워드
  • submit : 전송하는 키워드
  • get, post : 가져오는 키워드
  • reset : 초기화 키워드
    get과 post는 가져오는 키워드가 맞지만
    get은 url 주소를 보면 ? 뒤에 정보가 출력된다
    post는 액션은 보이지만 데이터는 html 에 숨겨져서 전달하는 차이가 있다

 

 

 

과제

1번부터 4번까지는 f12번 개발자 모드에서 작성하시오.
5분 문제은 html문서에 출력하게 하시오.
** 모든 문항은 기술노트의 형식으로 분석하여 작성하세요.

1. 1부터 10까지 합을 구하는 프로그램을 작성하시오.
2. 1부터 10까지의 숫자에서 짝수만 더하고 그 결과값을 출력하시오.
3. var a = [10,23,31,40,46]
   배열의 값이 짝수인 경우만 총합을 구하시오.
4. var a = [10,23,31,40,46]
   배열의 값이 짝수인 경우는 그 값에 -10을 하여 저장하세요.
   그리고 배열의 모든 값을 출력하세요.

5. 다음과 같은 별을 출력하세요
  *
  ***
  *****
  *******

6 해당 HTML 문서 생성하시오 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1> IT 뉴우스 </h1>
    <div id="abcd">
        <span id="abc">
            차세대 스마트폰들이 모두 생성 인공지능(AI)과 
            온디바이스 AI 기술을 탑재할 것으로 예상되는 가운데 
            삼성 갤럭시S24와 애플 아이폰16의 램 용량은 변화가 없을 것이라는 
            전망이 제기됐다.

            IT매체 폰아레나는 10일(현지시간) 일본 미즈호 증권 보고서를 
            인용해 삼성 갤럭시S24 시리즈와 애플 아이폰16 시리즈가 
            전작과 동일한 램 용량을 갖게 될 것이라고 보도했다.            
        </span>
        <br>
        찾을 문자열 <input type="text" id="sword"> 
        <input type="button" onclick="sfun()" value="검색">
        <h1> 페이지정보 </h1>
    </div> 
    <h1> 정보 : 휴먼언론</h1>  
</body>
</html>

 6-1. h1 태그의 문자열을 모두 출력하시오. 
** 6-1, 6-2는 문자열 함수를 찾아서 해결하시오...
 6-2. 검색어를 입력하면 검색어가 몇 번 나오는지 카운팅 하고 알림창으로 확인
 6-3. 검색어를 입력하면 검색어 부분만 배경으로 노란색을 칠하시오.
  
 6-1. h1 태그의 문자열을 모두 출력하시오. 
** 6-1, 6-2는 문자열 함수를 찾아서 해결하시오...
 6-2. 검색어를 입력하면 검색어가 몇 번 나오는지 카운팅 하고 알림창으로 확인
 6-3. 검색어를 입력하면 검색어 부분만 배경으로 노란색을 칠하시오.

 

 

 

 

 

 

 

풀이

// 1번 문제
function totalNumber(){
	let num = 0;
	for(let i=1;i<=10;i++){
		num+=i;
	}
	console.log(num);
}

  
  

// 2번 문제
function divNumber(){
	let num = 0;
	for(let i=1;i<=10;i++){
		if(i%2==0){
			num+=i;
		}
	}
	console.log(num);
}

  

//3번문제
let a=[10,23,31,40,46];
let result = 0;
for(let i=0;i<a.length;i++){
	if(a[i]%2==0){
		result+=a[i];
	}
}
console.log(result);

  

// 4번문제
var aa = [10,23,31,40,46];
for(let i=0;i<aa.length;i++){
	if(aa[i]%2==0){
		aa[i] -= 10;
	}
}
console.log(aa);

// 5번문제
function starprt() {
	for (let i = 0; i < 5; i++) {
		for (let j = 0; j <= i; j++) {
			document.write('*')
		}
	document.write('<br>');
	}
}


// 6번 문제
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
	.backYellow {
		background-color: yellow;
	}
</style>
<script>
	function sfun() {
	// 6-1. h1 태그의 문자열을 모두 출력
		var h1Elements = document.querySelectorAll('h1');
		h1Elements.forEach(function (element) {
		console.log("6-1:", element.textContent);
	});
	// 6-2. 검색어를 입력하면 검색어가 몇 번 나오는지 카운팅
		var searchString = document.getElementById('sword').value;
		var spanText = document.getElementById('abc').textContent;
		var count = 0;
		var index = spanText.indexOf(searchString);
		while (index !== -1) {
			count++;
			index = spanText.indexOf(searchString, index + 1);
		}
		alert("6-2: 검색어 '" + count + "번 나옵니다.");

  

	// 6-3. 검색어 부분 배경으로 노란색 칠하기
		var mod = spanText.replaceAll(searchString, '<span class="backYellow">' + searchString + '</span>');
		document.getElementById('abc').innerHTML = mod;
	}

</script>
</head>
<body>
<h1> IT 뉴우스 </h1>
<div id="abcd">
<span id="abc">
차세대 스마트폰들이 모두 생성 인공지능(AI)과
온디바이스 AI 기술을 탑재할 것으로 예상되는 가운데
삼성 갤럭시S24와 애플 아이폰16의 램 용량은 변화가 없을 것이라는
전망이 제기됐다.
IT매체 폰아레나는 10일(현지시간) 일본 미즈호 증권 보고서를
인용해 삼성 갤럭시S24 시리즈와 애플 아이폰16 시리즈가
전작과 동일한 램 용량을 갖게 될 것이라고 보도했다.
</span>
<br>
찾을 문자열 <input type="text" id="sword">
<input type="button" onClick="sfun()" value="검색">
<h1> 페이지정보 </h1>
</div>
<h1> 정보 : 휴먼언론</h1>
</body>
</html>

개발공부중인 개린이의 포스팅 입니다📝

반응형