DAY 3 JavaScript&jQuery

DAY 3 JavaScript & jQuery 【ウェブカツ】

本日のプログラミング学習

JavaScript Lesson5~7  2hour

jQuery Lesson8 0.5hour

 

Total 12.5hour

 

JavaScript

DOM (Document Object Model)

→HTMLの要素にアクセスして、情報を操作するための仕組み

 

DOMツリー

→要素を「ノード」として捉え、処理が実行される順番と、各ノードの関係性を示す。

*JavaScriptはこのノードが作られないと実行されない。コンピューターはDOMツリーの上から順番に処理をするため。

 

オブジェクト

プロパティ オブジェクトの情報・属性=そのオブジェクトがどういった情報を持っているのか →「変数」

メソッド  オブジェクトの処理=そのオブジェクトがどういった処理、行動をするのか →「関数」

 

どう記述するのか?

オブジェクトのプロパティを変更した場合 「オブジェクト名.プロパティ名 = 値;」

オブジェクトのメソッドを実行するには  「オブジェクト名.メソッド名.(引数値);」

 

例えばdocumentオブジェクトを操作するには

HTML5以前→getElementsBYTagNam(タグ名)

HTML5以降→querySelector(セレクター)

 

参考サイト

MDN Web Docs

Document Object Model (DOM) は、ウェブ上の文書のコンテンツと構造からなるオブジェクトのデータ表現です。このガイドでは、簡単に DOM を紹介します。[…]

 

jQuery

jQueryとは

JavaScriptのライブラリの一つで簡単なコードでJavaScriptを実行できるようになる。

 

書き方

$(function(){

$(‘セレクター’).メソッド(引数);

});

 

セレクター=「何を」

メソッド=「どうするか」

 

例)

$(function(){

$(‘p’).addClass(‘color’);

});

 

→「p」という要素を取得して、「color」という名前のクラス属性を追加せよ。

 

ここで使用するメソッド一覧

jQueryの主要メソッドの一覧です。 要素関連 【jQuery要素関連メソッド】 メソッド説明 .text()要素の値をテキストとして取得する .html()要素の値をHTMLとして取得する .prepend()要素内の先頭にタグを追加す[…]

全て覚えるというのは難しいので、主要なメソッドを覚えつつあとは実装した時に参照する。

 

 

学習は全てこちらの学習は全てウェブカツ!!というプログラミングスクールで学んでいます。

プログラミングスクール「ウェブカツ!!」

大手スクール生徒や現役エンジニアが多数学び直している「実務レベル」に特化した「稼ぐ」ためのプログラミングスクール[…]

 

 

 

 

 

 

 

 

 

DAY 3 JavaScript&jQuery
最新情報をチェックしよう!

Java Scriptの最新記事8件