210831[46]大邱AI学院普通課程Webプログラミング1 javascript変数とデータ型start+月末評価


1.勉強の内容


JavaScriptについて始めました.初期概要は整理するところが多いので、簡単に整理しておきます.
月末評価を見ました.間違ったところについては、さらにコメントしたいと思います.

月末評価コメント



20問のうち1問と2問が間違っていて、いずれも位置に関する問題です.
第18題右の言葉を見て、急いで右の50 px方向に答えた.
親要素に対して右に移動するには、「相対」に設定し、子要素は「絶対」に設定し、「左:50 px」に設定する必要があります.に設定する必要があります.左を基準に50 pxが落ちます両方が相対的である場合、最初に出力される値自体は、問題で示されているようになります.
ただし、絶対値を設定し、親の基準値で絶対移動する必要があります.
19番目の質問では、ブラウザビューポートに基づいている場合は、ブラウザで固定された表示値fixed(親が絶対に設定されている)を適用する必要があります.
以前学習時にまとめた内容から
明確な答えが見つかった.
(reference : https://bky373.tistory.com/226 )
(reference : https://velog.io/@rimu/css-%EC%9A%94%EC%86%8C%EC%9D%98-%EC%9C%84%EC%B9%98position-%EC%A0%95%EB%A6%AC )
評価に対する総評は今まで位置に対する特性を忘れていた!今週は勉強を繰り返すかもしれません.

JavaScriptの概要


JAvascriptはもともとウェブサイトにモバイル効果をもたらすための言語なので必要ありませんが、現在はサーバの作成やWeb上で実行されるプログラムなど、Webのすべての部分を処理できるコア言語です.
  • GSAP(GreenSockAnimationPlatform) = Small JavascriptFiles
    各種APIの1つ.主に操作(interactive)、アニメーション(animation)、インタフェース(interface)などの関連内容がある.
    https://greensock.com/gsap/
  • ( reference : http://45.32.49.113/wiki/index.php/%EB%A6%AC%EB%B7%B0:_GreenSock_GSAP )

  • Hybridアプリケーション
    従来とは異なり、Javascript、HTML、CSSを熟知するだけでGoogleやApple関連のアプリケーションを作成できます.


  • node.js
    フロントエンド開発で使用されるjavascriptのバックエンド開発で使用されるフレームワーク.通常、バックエンド開発言語ではPHP、Java、.NETが考慮されますが、Javaスクリプトを理解するだけでサーバ開発の分野に拡張できます.

  • JavaScript IOTプラットフォーム
    ユビキタスネットワーク(IOT)を実現することができる.

  • 高度な言語->使いやすい言語
    JavaScriptは高度な言語です
    低級言語→機械にやさしい言語
  • JavaScriptの3つの側面



    node.jsのような場合はバックエンド領域です.

    JavaScript基本


    1.変数と変数名



    △変数と変数名の定義

    △データ型

    2.基本特性


    JAvascript言語の大きなクラスは式と文です.
    式は式とも呼ばれ、演算式だけでなく、実際の値と関数を実行する式です.
    すなわち、任意の値を生成できる場合は、式であってもよく、式は変数に格納されます.
    それに比べて、ドアは命令だと考えられます.セミコロン(;)区別するために使う.
    広義には、ゲートは値または式を含む.(レシピゲート)
    (参考資料:1冊で終わるWeb基本チュートリアル(HTML+CSS+JavaScript Web標準の慣例)

    開発者ツールでコンソールウィンドウをクリックし、コンソールウィンドウに出力します.log()文で出力できます.これは通常のブラウザウィンドウには表示されません.
    Webブラウザ画面で出力するにはdocumentを使用します.write()文を1つ書けばいいです.
    HTML code
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    
    	<title></title>
    	<link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    
    
    
    <!--  밑에 스크립트 자체가 자바 스크립트 코드이다. -->
    <!-- console.log 콘솔에 특정 정보를 print할때 사용 -->
    
    <!-- 위에서부터 순차적으로 진행이 된다. -->
    	<script src="js/main.js">
    		console.log("AAA");
    	</script>
    <!-- 위와 같이 하면 안쪽에 있는것은 작동 x -->
    <!-- 자바스크립트 주석 다는 방법 -->
    	
    
    
    	<script> 
    
    		/*
    		console.log("Hello");	
    		console.log("Comment");
    		*/
    
    
    	//	console.log("Hello");	한줄 주석 방식
    	//	console.log("Comment");
    
    
    
    	</script>
    
    
    
    
    
    
    
    
    
    
    
    
    </body>
    </html>
    上記のHTMLコードのように、<script>というコードで直接HTMLに入れることもできます.あるいは、css操作のように外部ファイルに接続できます.<script src="js/main.js"> scriptでは、srcにファイルの場所を設定すればよい.

    4.JavaScriptスタイルガイド


    JavaScript符号化ルールは、スタイルガイドまたは符号化会議、符号化スタイル、標準スタイルとも呼ばれます.
    JavascriptはWebドキュメントにダイナミックな効果をもたらすために出発した言語なので、他のプログラミング言語に比べてデータ型が柔軟なので、ユーザーがどこにも注意しないとエラーが発生します.
    基本ルール
    1.インデント.(HTML、CSSと同じ)
    2.文をセミコロンで区切る.
    セミコロン(;)加算しなくても実行できますが、スタイルガイドでは文を終了するときに必ずセミコロンを付けることをお勧めします.文をはっきりマークすれば、ソースコードをデバッグしやすいからです.
    ex) var n = 10 x, var n = 10;
    3.空白を埋め、読みやすいようにする.
    4.コメントを適切に使用します.(//(単行コメント)または/**/(複数行コメント)(複数行コメントなどcssと同じ)
    5.識別子は規定の規則を守らなければならない
    識別子(identifier)は、開発者がJavaScriptの変数、関数、属性を区別するために命名した特定の単語です.
    varname=prompt(「名前を入力してください」);
    ここでnameは識別子です.
    識別子の最初の文字は、英語の文字または参照バー()またはドル記号($)で始まる必要があります.
  • 予約語(キーワード)は識別子として使用できません.
    たとえばvarは変数を宣言する際に使用される保持語であり、識別子名として使用できません.
  • 4.変数、基本ルール、演算子の内容


    css code
    // comic 박스를 생성한 상태
    // 변수 선언 (변수를 만든 상태)
    
    
    // var comic;
    
    // comic 박스 안에 원피스 데이터를 할당한 상태
    // 변수 초기화 : 등호를 사용해서 데이터를 할당한 상태
    // comic = "원피스";
    
    // console.log(comic);
    
    
    // 변수를 선언한과 동시에 초기화를 진행함
    // var apple = "사과";
    
    /*
    var a;
    var b;
    var c;
    */
    
    //변수 동시 선언
    var a, b, c;
    
    
    // 변수 동시 초기화
    /*
    var d = 10;
    var e = 20;
    var f = 30;
    
    */
    
    // var d = 10, e = 20, f = 30;
    
    
    // 모든 변수는 선언과 동시에 undefined가 자동으로 할당된다.
    
    // var computer; 
    
    // console.log(computer);
    
    
    /*
    var house;
    house = "집";
    
    
    console.log(house);
    
    house = "아파트"; 
    
    console.log(house);
    */
    
    
    /*
    var house; 
    console.log(house);
    
    //undefined -> 집으로 바뀜
    
    house = "집"
    console.log(house);
    */
    
    
    // 변수 작성방법
    
    // 캐멀 케이스
    
    // var mathScoreStudent = 10;
    
    // 스네이크 케이스
    
    // var math_score_student = 10;
    
    
    // 주의점
    //  밑에 작성방식은 오류가 생긴다.
    // var math-score-student = 100;
    
    // var _math;
    // var $math;
    
    // 위의 특수문자 2개 빼고는 서두에 특수문자를 넣을수 없다.
    
    
    
    // var apple10;
    // var 10apple;
    
    //  숫자가 먼저 나오면 오류가 생긴다.
    
    
    // 변수를 자세하게 작성해야 한다.
    
    
    /*
    
    
    //  데이터 타입 (데이터의 종류들)
    // 문자열 (String)
    
    var msg1 = "Hello World";
    var msg2 = 'Welcome';
    
    
    console.log(msg1);
    console.log(msg2);
    
    // var msg3 = "Nice to meet you'; 큰 따옴표, 작은 따옴표 혼용하면 안된다.
    
    
    
    // 축약어 표현하기
    // She is a girl
    // She's a girl
    
    var msg4 = "She's a girl ";
    var msg5 = 'She\'s a girl';
    
    
    console.log(msg4);
    console.log(msg5);
    
    //  결과 값은 동일
    
    */
    
    
    /*
    // 숫자 (Number)
    var num1 = 10;
    var num2 = -10;
    var num3 = 3.14;
    var num4 = -3.14;
    
    console.log(num1);
    console.log(num2);
    console.log(num3);
    console.log(num4);
    
    
    // 연산 작업 진행 가능 (정수와 실수 합도 가능)
    console.log(num1 + num2);
    console.log(num1 + num3);
    
    
    
    
    
    // 연산자 
    // 숫자 사칙연산
    
    var a = 20;
    var b = 10;
    
    console.log(a + b);
    console.log(a - b);
    
    console.log(a * b);
    console.log(a / b);
    console.log(a % b);
    
    // 나누기를 하여서 나머지값만 알고 싶을때는 %로 처리
    
    //  문자열이다. 큰 따옴표 안에 들어갔기 때문에 
    // 글자를 이어 붙이게 되어서 2012을 나온다.
    var str1 = "20";
    var str2 = "10";
    
    console.log(str1 + str2);
    console.log(str1 - str2);
    console.log(str1 * str2);
    console.log(str1 / str2);
    console.log(str1 % str2);
    
    
    var firstName = "Yeonsu";
    var lastName = "Hong";
    
    // 공백을 만들어준다. HTML과의 차이점
    console.log(firstName + "    " + lastName);
    
    
    var str11 = "현재 시간은";
    var time = 10;
    var str12 = "시 입니다.";
    
    
    console.log(str11 + time + str12);
    
    */
    
    
    
    
    
    
    // ++, -- 연산자
    var num10 = 10;
    
    // num10 = num10 - 1;
    // console.log(num10);
    
    //  뒤에서 부터 해석하는 것이 좋다.
    
    //console.log(--num10); // 결과 값 9
    //console.log(--num10); // 결과 값 8
    
    
    console.log(++num10); 	// 11  +1씩 증가
    console.log(++num10);	// 12
    
    
    
    
    // console.log(num10--); //num10을 먼저출력하고 그다음 마이너스
    console.log(--num10); // 선차감의 의미
    console.log(num10);
    
    /*
    
    // +=, -=, *=, /=, %= 연산자
    
    var num20 = 20;
    
    // num20 = num20 + 10;
    
    // 자기 자신을 업데이트
    
    num20 += 10; //위와 같은 뜻이다.
    
    console.log(num20); // 결과 값 30
    
    
    */
    
    
    //  비교 연산자 >, <, ==, ===, !=, !==, <=, >=
    /*
    var a = 10;
    var b = 20;
    var c = 30;
    
    console.log( a > b);
    console.log(a < b);
    console.log(a >= b);
    console.log(a <= b);
    
    
    console.log(a == b);
    console.log(a === b);
    
    console.log(a != b);
    console.log(a !== b);
    
    // != 값이 다른지를 검사하는 것!
    */
    /*
    var num10 = 10;
    var num20 = 20;
    
    
    var str10 = "10";
    var str20 = "20";
    
    console.log(num10 == str10); //
    console.log(num10 === str10); // 데이타 타입까지 같은지 따지는 것 등호 3개
    
    console.log(num20 != str20);
    console.log(num20 !== str20); // 두개의 데이터 타입이 달라서 true로 나타난다.
    */
    
    //  논리 연산자 : AND(&&), OR (||)
    /*
    var num30 = 30;
    var num40 = 40;
    var num50 = 30;
    
    
    console.log(num30 === num40 && num30 === num50); // 양쪽 모두 참인경우 참, 하나라도 거짓이면 false
    console.log(num30 === num40 || num30 === num50); // 둘중에 하나가 참이면 참으로
    */
    
    
    // 불리언(boolean) : true, false 논리연산자와 결합해서 사용. ex> 포탈아이디 비번 하나라도 틀리면 x니까 여기서 활용
    
    console.log(true);
    console.log(false);
    console.log(1 === 2 );
    console.log(10 < 20);
    
    console.log(10 === 10 || 20 === 30 );
    
    基本内容はコメント処理を経て、説明は整理されています.

    2.実習


    ダウンソース:
    https://github.com/Yeonsu-Hong/Daegu-AI-school-files

    3.困難な内容&解決方法


    これはjavascriptの基礎内容で、何の困難もありません.

    4.感想


    最後の月末評価が終わりました.職階に関する内容は実習を通じてもっと熟知し、足りないところは再び受講しなければならない.
    JavaScriptの内容は見慣れないところが多いです.やはり大学院時代のポートランドとは違います.こまめに整理しなくちゃ