반응형
❤ 김춘장이의 위키백과 - 나만의 공부 기록 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한번더 점검
배열의 특징
- 길이가 고정되어 있는 고정길이형이다
- 인덱스가 0 부터 시작한다
- 메모리에 연속적으로 할당한다
- 길이를 중간에 변경할 수 없다
ArrayList 와 차이점
- 가변길이이다
- 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>개발공부중인 개린이의 포스팅 입니다📝
반응형
'👩🏻💻 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞 > ⠀⠀⠀⠀ JᴀᴠᴀSᴄʀɪᴘᴛ' 카테고리의 다른 글
| 🌱Inflearn🌱 호이스팅 (0) | 2023.12.19 |
|---|---|
| 🌱Inflearn🌱 자료형 간단 정리 (0) | 2023.12.19 |
| 🌱Inflean🌱 DOM (1) | 2023.12.18 |
| 🌱Inflean🌱 자바스크립트의 함수 (0) | 2023.12.18 |
| 🌱Inflean 🌱 자바스크립트 (0) | 2023.12.18 |
