1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

HTML&CSS~初級編~, JavaScript Ⅰ,Ⅱ,Ⅲ

Last updated at Posted at 2020-05-23

プログラミングの勉強日記

今までのまとめ(2020年5月14日から5月23日まで)
これから勉強した内容をQiitaでまとめていきたいと思います。

HTML&CSS~初級編~

HTMLの全体構造
全体構造
<!DOCTYPE html> 
<html>
  <head>
  </head>
  <body>
    <h1>program</h1>
    <p>HTML</p>
  </body>
</html>

1行目はDOCTYPE宣言と呼ばれるHTMLのバージョンを宣言する

要素にはwebページの設定に関する情報(ここに記述した内容はWebページには表示されない) 要素の中には実際に表示したい内容を入れる

######paddingとmarginの使い分け

〇padding:borderの内側の余白を作る
〇margin:borderの外側の余白を作る

1.paddingは背景の色や背景画像が設定されるが、marginで設定された余白には背景の色や背景画像が表示されない。
 →背景画像や背景の色を表示させたい場合はpaddingを使う

2.marginには変なバグが生じることがある
 marginが重なり合うときは相殺されることやmarginが親要素をはみ出すことなど。
 →marginを使用するときには、極力上下方向についてはどちらか片方のみにする
  親要素と子要素の余白を開けるときはpaddingを使用する
  隣り合うHTML同士の余白を開けるときはmarginを使う

#####テキスト入力を受け取る要素:input要素 textarea要素

テキスト入力
<form>
  <p>input要素</p>
  <input>
  <p>textarea</p>
  <textarea></textarea>
  <input type="submit">
  <input type="submit" value="保存">
</form>

input要素:1行のテキストを受け取るための要素(※終了タグが不要)
textare要素:複数行のテキスト入力を受け取るための要素
value属性:ボタンに表示させる名前を変更できる
送信ボタン:input要素を使う。input要素にはtype属性を指定することができ、submitを指定すると入力欄ではなく送信ボタンになる。

##JavaScript(Ⅰ,Ⅱ,Ⅲ)
######コンソールの出力:console.log("〇〇");
 〇〇に入る文字列はダブルクオーテーションかシングルコーテーションで囲まれる。数値の場合は囲まない。文字列の連結には+を使う。

######変数の定義:let 変数名 = 値;
 変数は文字列や数値と同様に扱うことができる。
 変数のメリット:同じ値を繰り返し使える。変更に対応しやすい。値の意味がわかりやすい
 変数のルール:英単語を用いる2語以上は大文字で区切る
 変数の更新:変数名=新しい値(letはつけない)
 
######定数の定義:const 定数名 = 値;
 定数は値を更新することができない。
 定数のメリット:更新ができないので、予期せぬ更新を防ぐことができる

#####テンプレートリテラル(連結方法) 
 以下のように文字列の中で${定数}を使う。文字列事態をバッククォーテーションで囲う。(文字列の連結には+を用いることもできる)

テンプレートリテラル
const name="田中";
const age=18;
console.log(`${name}${age}歳です`); //テンプレートリテラル
console.log(name+""+age+"歳です");  //+を用いた文字列の連結

#####オブジェクト
 配列に定数と同様に複数のデータをまとめて管理するのに用いられる。それぞれの値にプロパティと呼ばれる名前を付けて管理する。「プロパティ:値1, プロパティ:値2」のように作る。(定数に代入可)
 →オブジェクトを取り出すためには「オブジェクト.プロパティ名」を使う。

#####オブジェクトを要素に持つ配列
 配列の要素には文字列や数字だけでなくオブジェクトも使うことができる。

const profile=[
  {name:"田中",age:16},
  {name:"斎藤",age:18}
];
console.log(profile[1]);     //コンソール結果:{name:"斎藤",age:18}
console.log(profile[1].age); //コンソール結果:18

同様にして、オブジェクトの値の部分にも文字列や数値だけでなく、オブジェクトを用いることができる。

#####関数
 いくつかの処理をまとめたもの。下の例のように「function()」と書いて、その後ろに中括弧でまとめた処理を書くことで関数を定義(用意)できる。

const introduce=function(){
  console.log("こんにちは");
  console,log("私は田中太郎です");
};
introduce(); //関数の呼び出し

また、これはconst introduce = ()=>{と各こともでき、「()=>」の書き方をアロー関数という。

#####戻り値
 呼び出しもとで受け取る処理結果のことである。return 値とかく。returnは戻り値だけではなく、関数の処理を終了させる性質を持つ。なので、returnの後にある関数内の処理は十個されない。

#####スコープ
 関数の引数や関数内で定義した定数や変数はその関数内でしか使うことができなく、その範囲のことをスコープという。

#####その他
 for文やwhile文などはC言語と書き方は同じである。ただ、比較演算子であるaとbが等しいときは「===」と書くため、C言語とは異なる。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?