・参考
ブラウザにはデフォルトフォントというのがある。
font-familyで何も指定しなければ、デフォルトフォントが適用される。
IEの場合は
の3つ。
多分、普通のテキストはMS-P Gothicで、ｈ1とかがMS-P 明朝。
MS ゴシック (欧文:Courier New)はどこで使われているかわからず。
ちなみに参考サイトに
とあるのだが
ゴシック体とか明朝体ってのは1つのフォントではないらしい。
ゴシック体と明朝体から派生したフォントが沢山あるようで、フォントの親のようなもの。
知らなかったなあ。
確かな力が身につくJavaScript「超」入門 第2版 | SBクリエイティブ
JavaScript Primer - 迷わないための入門書 #jsprimer
document.querySlector('要素名');
document.querySlectorAll('要素名'); //要素を全て取得します。配列で返ってきます
document.getElemntById('id名');
document.getElementsByClassName('クラス名');
ちなみに、要素を作る場合
document.createElement('要素名');
要素.cloneNode(true); //複製する場合はtrue
親要素.childNodes //親要素の子ノードを取得 親要素.children //親要素の子要素を取得 親要素.firstChild //親要素の最初の子ノードを取得 親要素.lastChild //親要素の最後の子ノードを取得 親要素.firstElementChild //親要素の最初の子要素を取得 親要素.firstElementChild //親要素の最初の子要素を取得 小要素.parentNode //小要素の親ノードを取得 要素.previousSibling //要素の1つ前の兄弟ノードを取得 要素.nextSibling //要素の1つ後の兄弟ノードを取得 要素.previousElementSibling //要素の1つ前の兄弟要素を取得 要素.nextElementSibling //要素の1つ後の兄弟要素を取
要素.appendChild(子要素); //要素に小要素を追加します 要素.insertBefore(子要素, 指定要素); //要素の指定要素の前に子要素をいれます 要素.removeChild(子要素); //要素の子要素を削除します 要素.innerHTML = ''; //要素にHTMLを追加する
要素.textContent = 'text'; //要素の中身がtextになります
要素.style.color = 'red'; //要素の色がredになります
要素.classList.add('クラス名'); //要素にクラス名をつけます
要素.classList.remove('クラス名'); //要素のクラス名を除きます
要素.classList.contain('クラス名'); //要素にクラス名が付いているか判定します
要素.classList.toggle('クラス名'); //クラス名が付いていれば外し、付いてなければつけます
要素.setAttribute('属性名' '属性値') // class/id/name/styleなど色々なhtml属性に値を追加できて便利
insertAdjacentHTML(‘挿入する場所’, ‘挿入する要素’);
document.getElementById('list').insertAdjacentHTML('beforeend', hoge)
'beforebegin' 取得した要素 の直前に挿入
'afterbegin' 取得した要素の子要素として挿入。すでに子要素がある場合はその前に挿入。
'beforeend' element 取得した要素の子要素として挿入。すでに子要素がある場合はその後に挿入。
'afterend' 取得した要素の直後に挿入
function(event) { event.preventDefault(); }
取得したform要素.読み取りたいフォーム部品のname属性.value
document.getElementById('form').word.value;
引数のeventにイベントオブジェクトが入る。
function(event) { }
location.href = ‘https://google.com’
querySelector(‘div’);
querySelectorAll(‘div’); //全div要素を取得する
htmlにdata-hogeと書いてJavaScriptからdataset.hogeでアクセスする仕組み。
参考
<article id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars"> </article>
const article = document.getElementById('electric-cars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
要素.属性
getElementById('electric-cars').src // 読み取り
getElementById('electric-cars').value //読み取り
getElementById('electric-cars').class = ‘new’; // 変更
getElementById('electric-cars').textContent = ‘abc’; // 変更
【JavaScript入門】初心者でも分かるreduce()の使い方とサンプル例まとめ | 侍エンジニアブログ
reduce() メソッドは、配列の各要素に対して (引数で与えられた) 関数を実行して、単一の出力値を生成します。
配列.reduce(function(累積値, 要素, インデックス番号, 配列) { })
すべてのオブジェクトは可変。StringもObjectも。でもネイティブオブジェクトの変更は非推奨。
instanceOfは何のインスタンスかを判定。Objectは常にtrue.全てのオブジェクトはObjectを継承しているから。
let s = “aaa”; console.log(s instanceof String); // true console.log(s instanceof Object); // true
プリミティブ型をオブジェクトのように扱うと、その時だけオブジェクト扱いになり、そのあとはプリミティブ型に戻る。
let s = “abc”; s.length; // オブジェクト扱い
ドット記法。cody.living ブラケット記法。cody[“living”]
ブラケット記法なら変数使える。
let s = “liv”; let s2 = “ing”; cody[s + s2];
オブジェクト内に存在しないプロパティにアクセスしようとすると、JavaScriptはその関数がコンストラクタを持つ限り、プロトタイプチェーンをさかのぼって上位オブジェクト内まで見る。最上位はObject.prototype。P44
プロパティが見つからずにundefinedが返された場合は、プロトタイプチェーンをさかのぼった結果、上位のオブジェクト内にも該当のプロパティ見つからなかったということ。
hasOwnPropertyはプロトタイプチェーンをさかのぼらず探す。inはさかのぼって探す。
let test = {“foo”};
console.log(test.hasOwnProperty(“toString”)); // false
console.log(“toString” in test); // true
全てのオブジェクトはObject.prototypeから継承する。
関数もオブジェクト。つまり値。変数や配列に値として格納できる。戻り値にもできる。
グローバルオブジェクトはすべてのオブジェクトを格納する唯一無二のオブジェクト。
グローバル変数、グローバルプロパティはグローバルオブジェクト直下に格納されている。
ブラウザでのグローバルオブジェクトはwindow。
グローバル直下には全てのスコープがアクセスできる。だからwindow.alert()のようなグローバルメソッドはどこからでも呼べる。
JavaScriptを記述する際はグローバルオブジェクトに記述しているということらしい。
var myStringVar = 'myString'; // letにするとfalseになるんだが？
console.log('myStringVar' in window); // 出力：true(*)
グローバルスコープのthisはグローバルオブジェクトを参照する。
関数の中で使われるthisは親オブジェクトを参照する。
var body = {
living : true,
age : 33,
gender : 'male',
getGender : function() { return body.gender; } //下と同じ
getGender : function() { return this.gender; } // genderの親プロパティはbody
};
thisの値の決まり方。
window.hoge = 'hoge'; // グローバルオブジェクト直下
window.myObject = {hoge: 'I am myObject.hoge'};
window.sayhoge = function() {
console.log(this['hoge']);
};
window.myObject.sayhoge = sayhoge;
window.myObject.sayhoge(); // こっちのsayhoge()のthis（親オブジェクト）はmyObjectなので'I am myObject.hoge'を出力
window.sayhoge(); // こっちのsayhoge()のthisはwindow（グローバルオブジェクト）なので'hoge'を出力
コンストラクタはreturnを書かなくても、インスタンス自身が返される。つまりreturn this。JavaScriptではコンストラクタ内のthisは自分自身のインスタンスのこと。だからnewするとインスタンスが返ってくる。
クロージャはスコープチェーンに存在する変数への参照を（囲い込んで）保持している関数。
prototypeプロパティははすべてのFunction（）インスタンスに自動的に付与される。
var func = function(){};
console.log(typeof func.prototype); // object
プロトタイプチェーンはprotoプロパティによって構成される？
Array.prototype.foo = 'foo'; // Array()のすべてのインスタンスがfooプロパティを継承 var myArray = new Array(); // *.constructor.prototypeを使用する（冗長な）方法でfooの値をトレース console.log(myArray.constructor.prototype.foo); // 出力：'foo' console.log(myArray.__proto__.foo); // 出力：'foo' // プロトタイプチェーンを使うこともできる console.log(myArray.foo) // 出力：'foo'
undefinedは未定義で存在すらない。nullは値が代入されていない。
未定義というのはプロトタイプチェーンでも発見できないもの。
・参考
複雑なクエリ演算子 - EF Core | Microsoft Docs
ここで言うViewModelとはテーブル結合の結果表示用のモデルクラス。
public class Blog
{
public int BlogId { get; set; }
public string Url { get; set; }
}
public class Post
{
public int PostId { get; set; }
public string Title { get; set; }
public string Content { get; set; }
public int BlogId { get; set; } //外部キー
}
上記のBlogテーブルとPostテーブルの結合結果表示用のViewModel↓
2つのモデルクラスをがっちゃんこするだけ。
public class BlogPostViewModel
{
public int BlogId { get; set; }
public string Url { get; set; }
public int PostId { get; set; }
public string Title { get; set; }
public string Content { get; set; }
}
var query = from blog in context.Set<Blog>()
join post in context.Set<Post>()
on blog.BlogId equals post.BlogId
select new BlogPostViewModel{ BlogId = blog.BlogId, Url = blog.Url, PostId = post.PostId, Title = post.Title, Content = post.Content };
ECMAScriptはJavaScriptの中のどの実行環境でも共通する部分。
"use strict";基本的には常に使う。
const 再代入できない変数。厳密には定数ではないらしい。
let 再代入可能な変数。初期値を指定しない変数も定義できます。 初期値が指定されなかった変数はデフォルト値としてundefinedという値で初期化されます。
varは使わない。同じ名前の変数名を定義できたり、巻き上げやら色々問題があるらしい。
varが危険な理由。宣言だけがスコープの先頭に巻き上げられ、代入はその位置のままだから。
int/doubleがない。数字は基本Number型。
JavaScriptのデータ型はプリミティブ型とオブジェクト型の２つ。ラッパークラスもオブジェクト。
NaNとはNot a Numberのこと。Number型と互換性のない性質のデータをNumber型へ変換した結果はNaNとなります。
** べき乗演算子
=== 厳密等価演算子 同じ参照値かを判定
== 等価演算子 値が同じかを判定。型が違くても等価判定！使わないでおこう。
// 文字列を数値に変換してから比較 console.log(1 == "1"); // => true
例外的に、等価演算子（==）が使われるケースとして、nullとundefinedの比較があります。
シングルクォートとダブルクォートは全く同じ。
テンプレートリテラルはバッククォート。改行も反映される。
// 改行も反映される
contst str =
`名前は${name}です。
年齢は${age}です。`;
オブジェクトのプロパティの追加
// `key`プロパティを追加して値を代入 obj.key = "value";
オブジェクトのプロパティの削除
// プロパティの削除 delete obj.key;
配列は可変長。あとから要素足せる。オブジェクトと一緒。array.push(1)など。
console.errorでスタックトレース。
tryブロックはそのブロック内で発生した例外をキャッチする構文です。 しかし、非同期処理は同期処理の後に完了します。非同期処理が実行されて例外を投げるのは、すべての同期処理が終わった後となります。つまりcatchできない。
エラーファーストコールバック。非同期処理中に発生した例外を扱う仕様。
fs.readFile("./example.txt", (error, data) => {
if (error) {
// 読み込み中にエラーが発生しました
} else {
// データを読み込むことができました
}
});
JavaScriptでは、エラーが発生するのではなく、暗黙的な型変換が行われてしまうケースが多くあります。
暗黙的に変換が行われた場合、プログラムは例外を投げずに処理が進むため、バグの発見が難しくなります。 このように、暗黙的な型変換はできる限り避けるべき挙動です。
// 暗黙的な型変換が行われ、数値の加算として計算される 1 + true; // => 2
次のコードでは、定義したfn関数をmyFunc変数へ代入してから、呼び出しています。
function fn() {
console.log("fnが呼び出されました");
}
// 関数`fn`を`myFunc`変数に代入している
const myFunc = fn;
myFunc();
名前を持たない関数を変数に代入できます。
// 関数式は変数名で参照できるため、"関数名"を省略できる
const 変数名 = function() {
};
// 関数宣言では"関数名"は省略できない
function 関数名() {
}
JavaScriptは静的スコープ。ある変数がどの値を参照するかは実行前（静的）に決まる。
クロージャー（関数閉包）とは。クロージャーは「静的スコープ」と「参照され続けている変数のデータが保持される」という2つの性質によって成り立っています。
クラス宣言。
class MyClass { }
getter setter
class クラス {
// getter
get プロパティ名() {
return 値;
}
// setter
set プロパティ名(仮引数) {
// setterの処理
}
}
const インスタンス = new クラス();
インスタンス.プロパティ名; // getterが呼び出される
インスタンス.プロパティ名 = 値; // setterが呼び出される
・参考
一部ですが一覧。
ContentResult：生のテキストコンテンツをブラウザーに送信する。
EmptyResult：ブラウザーにコンテンツを送信しない。
FileContentResult：ファイルの内容をブラウザーに送信汁。ファイルの内容はバイト配列。
FileStreamResult：ファイルの内容をブラウザに送信する。ファイルの内容はStreamオブジェクト。
LocalRedirectResult：HTTP302をブラウザに送信することで、現在のサイトに対してローカルなURLにリダイレクトさせる。指定できるのは相対URLのみ。
JsonResult：JSON文字列をブラウザに送信。
NotFoundResult：４０４を返す。
PartialViewResult：ページビューの一部を表すHTMLコンテンツをブラウザに送信。
PhysicalFileResult：ファイル内容をブラウザに送信。ファイルはパスとコンテンツタイプによって識別される。
RedirectResult：HTTP３０２をブラウザに送信することで、特定のURLへリダイレクト。
RedirectToActionResult：RedirectResult同様。URLはアクションとコントローラーのペアに基づいて識別。
RedirectToRouteResult：RedirectResultと同様。URLはルート名に基づく。
StatusCodeResult：指定されたステータスコードを返す。
ViewComponentResult：ビューコンポーネントから取り出したHTMLコンテンツをブラウザに送信。
ViewResult：完全なページビューを表すHTMLコンテンツをブラウザに送信。
VirtualFileResult：ファイルの内容をブラウザに送信。ファイルはその仮想パスに基づいて識別。
・参考書籍
「プログラミング ASP.NET CORE」のP103 カスタムヘッダー
モデル↓
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc.Filters;
namespace TeamMember.Models
{
public class FilterTest : ActionFilterAttribute
{
// アクションメソッド発動後にフィルター作動する時はExecuted
public override void OnActionExecuted(ActionExecutedContext context)
{
//セッションの取得
context.HttpContext.Session.GetString("name");
base.OnActionExecuted(context);
}
// アクションメソッド発動前にフィルター作動する時はExecuting
public override void OnActionExecuting(ActionExecutingContext context)
{
DateTime date = DateTime.Now;
base.OnActionExecuting(context);
}
}
}
コントローラにカスタムヘッダーを付ける↓
[FilterTest] //コントローラに付けると全てのアクションメソッドにフィルターかかる
public class CharactersController : Controller
{
[FilterTest] //アクションメソッドに付けるとここだけにフィルターかかる
public IActionResult Index() {
return View();
}
}
