アプリケーションの開発開始-JavaScript構文の強化

「この記事は、私がアプリケーションを開発したときに、知っている内容や感じなどを記録するために書いたものです.」「スパルタエンコーディングクラブ」の「アプリケーション開発総合クラス」のレッスンを受けています.私たちに対する反論とフィードバックに感謝します.
<ディレクトリ>
1.JavaScriptについて
2.基礎文法1:変数
3.基本構文2:リスト(配列)&ディック系列(オブジェクト)
4.基礎文法3:関数
5.基礎文法4:条件文&複文
6.アプリケーションでよく使われるJavaScriptの開発

1.JavaScriptについて

JavaScriptは、ウェブサイト(Webドキュメント)上で移動する画像を描く(または表示する)ために一般的に使用されるコンパクトで軽量な言語です.サイト内のポップアップメニュー、タイミングを表示します.だからJavaScript=Webテクノロジー!かつてこのような固定観念があったが、今はそうではない.JavaScriptでアプリケーションを開発することもできます!反応はもともとJavaScriptベースだったので
したがって、JavaScriptを学習することで、Webとアプリケーションを作成することができます.
ChromeコンソールウィンドウでJavaScriptに初めてアクセスしました.「クロムコンソール」ウィンドウを開くには、크롬 브라우저～F12を押します.(alt(option) + command + i)をクリックして開発者コンソールを開きます.)
コンソールウィンドウの上にあるConsoleをクリックして、コードを記述します.

console.log("Hello World!");

コードの初めてはやっぱりハローワールド!そうですね.JavaScriptでは、console.log()は画面に文字列を出力する関数です.C言語のprintf()のような感じです.

2.基礎文法1:変数

JavaScriptには、変数を宣言する2つの方法があります.

let a = 20;

var b = 30; 

letとvarの2種類として宣言することができる.私はこの文章でletを使って声明します.

let a = 20;
a = 'eeeun' // 한 번 선언했으면, 그 다음부터는 선언하지 않고 그냥 값을 넣어도 됩니다.

次は4つの演算と文字列のプラス記号です.
JavaScriptは他の言語のように基本的な機能を提供することもできます.

let a = 1
let b = 2

a+b // 3
a/b // 0.5

let first = 'eunseo'
let last = 'Lee'

first+last // 'eunseoLee'

first+' '+last // 'eunseo Lee'

first+a // eunseo1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.

変数宣言にはletとvarの2種類があり、実際にはconstという子供もいます.contは、管理コードで容易に変更できない固定値を宣言します.

let value_box = '값'
value_box = '변경한 값';

console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다.

const value_fix = '값';
value_fix = '변경한 값';

console.log(value_fix) // 오류 발생 : const로 선언한 변수엔 새로운 값을 재 할당(다시 입력)할 수 없습니다.

基本構文2:リスト(配列)&ディック系列(オブジェクト)

リストは配列とも呼ばれます.対象と呼ぶこともできます.
リスト:順番に持つ形態
バイナリ:キー-Valueのセット
まず、リストを宣言する方法を見てみましょう.

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능

// 또는,

let b_list = [1,2,'hey',3] // 로 선언 가능

JavaScriptでリストを宣言する方法は、他の言語でリストを宣言する方法と似ています.難しくないですね.

b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력

// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력

// 리스트의 길이 구하기
b_list.length // 5를 출력

リストに保存されている値を出力すると、インデックス値として出力されます.b_list.push()で値が追加されました.追加した値が最後に貼り付けられます.スタックのようです.スタックを考慮すると、b_list.pop()の最後の値が失われる可能性があります.
次はディック・シャナリーのコード例です.
まずは宣言

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능

// 또는,

let b_dict = {'name':'Bob','age':21} // 로 선언 가능

ディック・シャナリーはリストに似ているが、違う.まず、リストは[]、ディクシャナリーは{}の形式です.
ディクシャナの声明をよく見ると、キー値とキー値が関連付けられていることがわかります.上記のコードは、キー値が'name'および'age'であり、キー値の値に応じてそれぞれ'Bob'および21であることを示している.

b_dict['name'] 	// 'Bob'을 출력
b_dict.name	// 'Bob'을 출력

b_dict['age'] 	// 21을 출력
b_dict.age	// 21을 출력

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력

ディックシリーズを出力するときもリストと似ています.[]にキー値が入力されると、キー値が出力される.
私たちはリストとDickShowneryを一緒に学ぶ理由があります.この2つはよく一緒に使います.一緒に使えば、電話帳やサイン帳などの形になります.

names = [
  {'name':'bob','age':20},
  {'name':'carry','age':38}
]

names[0]['name']	// 'bob'
names[1]['name']	// 'carry'

同様に、リストとバイナリが混在するデータ構造をJSONデータ構造と呼ぶ.JSONデータ構造は、大量のデータを管理するのに役立ちます.

new_name = {'name':'john','age':7}
names.push(new_name)

names			//[{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
names[2]['name']	//'john'

また、新しいバイナリファイル(new name)を宣言し、.pushコマンドでリストに追加することもできます.

基本構文3:関数

上記の4つの演算に加えて、デフォルトで提供される関数も多数存在します.
一般的な関数には「これがあるような気がする」というものがありますやりたい関数はまずグーグルにしよう私は主にMDNで関数の説明を見ます.
MDN Webドキュメントショートカット:Mozillaの公式サイトで、Web標準とMozillaプロジェクトの開発ドキュメントが含まれています。

**나눗셈의 나머지를 구하고 싶은 경우**

let a = 20
let b = 7

a % b = 6

**모든 알파벳을 대문자로 바꾸고 싶은 경우**

let myname = 'spartacodingclub'

myname.toUpperCase() // SPARTACODINGCLUB

**특정 문자로 문자열을 나누고 싶은 경우 1**

let myemail = '[email protected]'

let result = myemail.split('@') // ['sparta','gmail.com']

result[0] // sparta
result[1] // gmail.com

let result2 = result[1].split('.') // ['gmail','com']

result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com

myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

**특정 문자로 나누고 싶은 경우 2**

let txt = '서울시-마포구-망원동'

****let names = txt.split('-'); // ['서울시','마포구','망원동'

**특정 문자로 합치고 싶은 경우**

let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)

さらに、組み込み関数も多数用意されています.
次に、自分で関数を作成します.

function 함수이름(필요한 변수들) {
	내릴 명령들
}

함수이름(필요한 변수들);

基本的な顔ですこのように見ると感じられない直接コードで書きます

// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
	let res = num1 + num2;
  	console.log(res);

	return res;
}

sum(3, 5);	// 8
sum(4, -1);	// 3

そうですか.function関数名(){}この構造は他の言語でもよく使われるのでよく知られています.
JavaScriptにはもう一つの関数を宣言する方法があります.

let a = function(){
	console.log("리터럴 방식이라고 합니다");
}

a()	//리터럴 방식이라고 합니다

変数aを宣言し、関数をaに挿入します.この方式を「伝統的な方式」と呼ぶ.

基礎文法4:条件文&複文

条件文や複文も他の言語と構造が似ているので難しくありません.
条件文と重複文は、確認するだけでサンプルコードを記述します.C言語とJAVAを学んだ時は本当に有意義でしたほほほ

//성인, 청소년, 어린이를 구분하는 조건문
function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('어린이예요')
	}
}

is_adult(12)	// 청소년이에요

//1부터 99까지 숫자를 순서대로 출력하는 반복문
for (let i = 0; i < 100; i++) {
	console.log(i);
}

//리스트의 모든 원소를 한 번에 출력하는 반복문
let people = ['철수','영희','민수','형준','기남','동희']

for (let i = 0 ; i < people.length ; i++) {
	console.log(people[i])
}

//점수가 70점 미만인 학생들의 이름만 출력하기
let scores = [
	{'name':'철수', 'score':90},
	{'name':'영희', 'score':85},
	{'name':'민수', 'score':70},
 	{'name':'형준', 'score':50},
  	{'name':'기남', 'score':68},
  	{'name':'동희', 'score':30},
]

for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	}
}

アプリケーションの開発に使用される一般的なJavaScript

1.関数をより短く表示する:矢印関数

functionキーワードを使用して関数を宣言します.「矢印関数」(Arrow Function)構文を使用して宣言することもできます.

//기존 방식
let a = function() {
  console.log("function");
}
a();

//화살표 방식
let a = () => {
  console.log("arrow function");
}
a();.

functionに代わって=>に入りました=>を見て、それが関数だと思っています.

2.ディクシャナリキと値の迅速な取り出し:非構造配分

ディックシーケンスから値を取り出して変数に入れると、ディックシーケンスキー値を割り当てずに使用できます.言語で書くのは難しいし、コードで見るのは簡単です.

//딕셔너리
let blog = {
	owner : "noah",
	url : "noahlogs.tistory.com",
	getPost() { 
		console.log("ES6 문법 정리"); 
	}
};

//기존 할당 방식
let owner = blog.owner
let getPost = blog.getPost()

//비구조 할당 방식
let { owner, getPost } = blog;       
//이 때, blog의 키 값과 이름이 꼭 같아야 합니다. owner2로 쓰면 x

これを利用して、本アプリケーションに反応する方法を作成し、最も一般的な方法を紹介します.これが非構造化分配関数パラメータの伝達方式である.

//함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
let blogFunction = ({owner,url,getPost}) => {
	console.log(owner)
	console.log(url)
	console.log(getPost())
}

blogFunction(blog)

3.JavaScriptで自由に改行:ステレオの

キーボードの感嘆符の横にあるキーを使って自由に改行します.

const message = "기존에는 줄바꿈을 하려면 \n 이 기호를 써야 했습니다"

const message = ` 줄바꿈도 마음대로
사용이 가능합니다. ` 

4.ディックシリーズ:オブジェクトシリーズを簡単に作成しましょう

//기존 방식
var name = "스파르타";
var job = "developer";

var user = {
  name: name,
  job: job
}

console.log(user);
//{name: "스파르타", job: "developer"}

最新の方法は次のとおりです.

//객체 리터럴 방식
var name = "스파르타";
var job = "developer";

var user = {
  name,
  job
}

console.log(user);
//{name: "스파르타", job: "developer"}

key: value シェイプに変数名を作成するだけで、変数名と同じフィールドを作成し、その値を代入できます.

5.複文のもう一つの方法:map

リスト(配列)を巡り、値を取り出して検証する場合は、次のfor replicationsを使用します.

//기존 방식
let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
	console.log(numbers[i]);
}

そのためには、リストの長さの値を知る必要があります.
mapはリストの長さの値を知る必要はありません.逆に、リストのいくつかの値の順序を教えてくれます.

//map 방식

//화살표 함수 선언 방식
let numbers = [1,2,3,4,5,6,7];

numbers.map((value,i) => { 
	console.log(value,i) 
})

//기존 함수 선언 방식
numbers.map(function(value,i) {
    console.log(value,i)
})

//1 0
//2 1
//3 2
//4 3
//5 4
//6 5
//7 6

mapという名前のツール(?)関数を宣言する方法のようです.ドアに慣れすぎたせいか、個人的にはmap方式が少し混乱していると思います
ここまで来て1週間目の勉強内容をまとめました私たちに対する反論とフィードバックに感謝します.

👉 参考内容

スパルタエンコーディングクラブ「アプリケーション開発総合クラス」第1週講義と講義資料