numpyをさわってみる ~その1~

「numpyをさわってみる」は、numpyを初めてさわる人が学習した内容を確認するために書いていくブログです。間違っているところなどがあれば、ご指摘お願いします。

内容

  • numpyとは
  • インストール
  • 使い方
  • 配列

numpyとは

numpyとは、配列(pythonのリストが何重にもなったようなもの)を、簡単に扱うことができるようにするモジュール(pythonをもっと便利にする便利ツール)です。

インストール

anacondaやminicondaを使っている場合、numpyは元からインストールされています。

インストールされているかチェックする方法は、コマンドプロンプトで

python

と打ってpythonの対話シェルを起動してから、

import numpy

として、エラーが出なければインストールされています。 (pythonの対話シェルはexit()で終了できます。)

インストールされていない場合は、コマンドプロンプトで

pip install numpy

とすることでインストールできます。

使い方

import numpy as np

これを最初のほうに書いておきます。numpyをnpという名前に省略してインポートするという意味です。

こうすることでnumpyをnpという名前で使うことができるようになります。 (numpyはnpとするのが流儀みたいです。)

配列

numpyでは、配列をndarrayクラス(配列の設計図)で表します。 ndarrayは、n-dimensional arrayの略で、N次元配列という意味です。 このクラスには

  • 同じ型を持つ要素しか扱えない
  • 各次元ごとの要素数は必ず一定

というルールがあります。

初めてJavaScriptをやってみよー日記 ~19日目~

javascriptを学習した時の記録としてブログを書いていきます。

内容

演算子の優先順位

  • 結合性
  • 優先順位

結合性

結合性とは、優先順位が同じ演算子があった場合に処理をする順番のことを言います。

3 + 5 - 6; // 2

このような場合は"右結合性"といい、(3 + 5) - 6という解釈がされています。

a = b = 5;

このような場合は"左結合性"といい、a = (b = 5)という解釈がされています。

優先順位

優先順位とは、どの演算子から優先して、先に計算をするかを決めているものです。優先順位が高い、先に演算するものから20~0で優先順位が決められています。ここでは算術演算子などを優先順位が高い順に書いておきます。

詳しくはここを参考にしてください。

  • ( ... )
  • **
  • *, /, %
  • +, -
  • ==, !=, ===, !==
  • =

初めてJavaScriptをやってみよー日記 ~18日目~

javascriptを学習した時の記録としてブログを書いていきます。

内容

計算をする演算子

演算子 機能
+ 加算
- 減算
* 乗算
/ 除算
% 剰余
** べき乗
++ +1
-- -1

+

+は加算演算子です。足し算をします。

1+5 // 6
4.6 + 2.4 // 7

-

-は減算演算子です。引き算をします。

6-3 // 3
7-12 // -5

*

*は乗算演算子です。掛け算をします。

3*4 // 12
4 * -5 // -20

/

/は除算演算子です。割り算をします。/0はInfinityになります。

8/2 // 4
4 / 0 // Infinity

%

%は剰余演算子です。割り算の余りを計算します。少数を割られる数にすると、正しく計算できない時があります。

5 % 3 // 2
5.2 % 1 // 0.20000000000000018

**

**はべき乗演算子です。A ** BでAのB乗を表します。

2 ** 3 // 8
5.2 ** 3 // 140.608

++

++は+1を表します。

var n = 2;
n++;
console.log(n) // 3

--

--は-1を表します。

var n = 5
n--;
console.log(n) // 4

初めてJavaScriptをやってみよー日記 ~17日目~

javascriptを学習した時の記録としてブログを書いていきます。

内容

比較演算子とは

比較演算子とは、２つの値を比較してtrueかfalseを返す演算子です。

比較演算子の種類と機能

演算子 簡単な説明
== 等しい
!= 等しくない
=== 厳密に等しい
!== 厳密に等しくない
> 右が左より小さい
>= 右が左以下
< 右が左より大きい
<= 右が左以上

==

==は、左右の値の型が同じなら値自体を等しいか比較し、左右の値の型が違うなら型をそろえてから値を等しいか比較します。

"abc" == "abc" // true
"abc" == 123 // false
123 == 123 // true
"256" == 256 // true
null == undefined // true

!=

!=は、左右の値の型が同じなら値自体を等しくないか比較し、左右の値の型が違うなら型をそろえてから値を等しくないか比較します。

"abc" != "abc" // false
"abc" != 123 // true
123 != 123 // false
"256" != 256 // false
null != undefined // false

===

===は型の変換をせずに、厳密に等しいかを比較します。

"abc" == "abc" // true
"abc" == 123 // false
123 == 123 // true
"256" == 256 // false
null == undefined // false

!==

!==は型の変換をせずに、厳密に等しくないかを比較します。

"abc" !== "abc" // false
"abc" !== 123 // true
123 !== 123 // false
"256" !== 256 // true
null !== undefined // true

>

>はNumber型の値の大きさを比較します。右側の値が左側より小さければtrueになります。

3 > 4 // false
4 > 4 // false
5 > 4 // true

>=

>=はNumber型の値の大きさを比較します。右側の値が左側以下ならtrueになります。

3 >= 4 // false
4 >= 4 // true
5 >= 4 // true

<

<はNumber型の値の大きさを比較します。右側の値が左側より大きいならtrueになります。

3 < 4 // true
4 < 4 // false
5 < 4 // false

<=

<=はNumber型の値の大きさを比較します。右側の値が左側以上ならtrueになります。

3 <= 4 // true
4 <= 4 // true
5 <= 4 // false

初めてJavaScriptをやってみよー日記 ~16日目~

javascriptを学習した時の記録としてブログを書いていきます。

内容

Jqueryとは

"Jquery"とは、HTMLのcssを動的に変化させるためのJavaScriptのツールです。基本的にcssと似ている部分があります。

Jqueryを使う準備

Jqueryを使うには2つの方法があります。

  1. ダウンロードする
  2. インターネットから使う

1. ダウンロードする

Jqueryのデータをダウンロードして、それを使う方法です。

  1. Jqueryの圧縮版(.min)をダウンロードします。(バージョンに注意)
  2. ダウンロードしたJqueryを好きな場所に置きます。
  3. <script src="<パス>/jquery-<version>.min.js"></script>をHTMLのjqueryを使うスクリプトの前に書きます。

※<version>はバージョンを表すx.y.zのような数字の並びを表します。

※src="<パス>/jquery-<version>.min.jsはおいている場所によって書き換えてください。

2. インターネットから使う

インターネットにあるスクリプトを使う方法です。

  1. <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-<version>.min.js"></script>をHTMLのjqueryを使うスクリプトの前に書きます。

※<version>はバージョンを表すx.y.zのような数字の並びを表します。

Jqueryの基本的構文

Jqueryでは、下のような構文を使います。

jQuery(function(){
    /*実行する内容*/
});

jQuery(document).ready(function(){
    /*実行する内容*/
});

これらを下のように省略することができます。

$(function(){
    /*実行する内容*/
});

基本的には下のように書いていきます。

$(function(){ // ここはjQueryで書いてありますよ
    $("#test").click(function(){ // もしtestというidを持つ要素がクリックされたら
        $("#test").text("CLICKED!"); // testというidを持つ要素のtextを"CLICKED!"にしますよ
    });
});

意味はコメントの通りです。ここでいう#testが"セレクター"、clickが"イベント"と呼ばれます。

様々なセレクター

ここではセレクターといわれる、要素を選択する方法を書いていきます。

idセレクター

id属性の値を指定して要素を参照します。

$("#test").click(function(){
    /*id属性の値がtestの要素がclickされたら実行されます*/
});

classセレクター

class属性の値を指定して要素を参照します。

$(".test").click(function(){
    /*class属性の値がtestの要素がclickされたら実行されます*/
});

要素セレクター

要素の名前を指定して要素を参照します。

$("p").click(function () {
    /*pタグの要素がclickされたら実行されます*/
});

子孫セレクター

～の中の〇〇というような指定で要素を指定します。

$("div p").click(function () {
    /*divタグの中のpタグの要素がclickされたら実行されます*/
});

様々なイベント

ここでは、イベントといわれるどのタイミングで実行するかというものをいくつか書いていきます。

  • clickイベント
  • mouseoverイベント
  • mouseoutイベント

clickイベント

クリックされたときに実行します。

$("#test").click(function(){
    /*idがtestの要素がクリックされたら実行されます*/
});

mouseoverイベント

マウスオーバー(カーソルを要素に重ねる)されたときに実行されます。

$("#test").mouseover(function(){
    /*idがtestの要素がマウスオーバーされたら実行されます*/
});

mouseoutイベント

マウスアウト(カーソルを要素から外す)されたときに実行されます。

$("#test").mouseout(function(){
    /*idがtestの要素がマウスアウトされたら実行されます*/
});

誤字脱字、間違えなどがあればご指摘ください。

初めてJavaScriptをやってみよー日記 ~15日目~

javascriptを学習した時の記録としてブログを書いていきます。

内容

正規表現とは

正規表現とは、文字列の表し方の一つで、複数の文字列を一つの文字列で表すことができるものです。特殊な文字列を使って表します。

/abcde/, /^a/

正規表現の使い方

正規表現での表し方

  • 単純なパターン
  • 特殊な文字
単純なパターン

単純なパターンとは、通常の文字列と同じように、一つの文字列を表す正規表現のパターンです。

/abc/ // "abc" と同じ文字列を表す正規表現
特殊な文字

正規表現には、通常の文字では表すことができないものを表すために特殊な文字が用意されています。ここではそのうちのいくつかを紹介します。

  • \
  • ^a
  • a$
  • ab*
  • a{n}
  • [xyz]
  • [^xyz]
\

\は直後の文字が一文字で特殊な意味を持つ文字だった場合、その特殊な意味をなくし、その字そのものにします。

直後の文字が、nのような\の後ろに書くことで特殊な意味を持つ場合、その意味を持ちます。

また、特に意味を持たない文字の場合は、ないものとして扱われます。

"/\*/" // *
"/\n/" // 改行
"/\a/" // a
^a

^は行の先頭を表す文字です。

"/^a/" // 行先頭にある a
a$

$は行の一番最後を表す文字です。

"/a$/" // 行の一番最後にある a
ab*

*は直前の文字が0以上あるものを表す文字です。

"/ab*/" // abbb, abbbbbbb, a
a{n}

a{n}はaがn個あることを表します。

"/a{4}/" // aaaa
[xyz]

[]は括弧の中のどれか一文字を表します。[a-z]とかくと、aからzのことを表すことができます。

"/[xyz]/" // x, y, z
"/[a-z]/" // a, b, c ... y, z
[^xyz]

[^]は括弧の中のもの以外の一文字を表します。^が括弧の中にある場合、先頭という意味ではなく、否定の意味を持ちます。

"/[^xyz]/" // x, y, z 以外の何か一文字

正規表現での比較

様々な比較の方法がありますが、今回はその中のいくつかを書きます。

  • match()
  • test()

match()

match()はその文字列の中に、正規表現と一致するものがあるか先頭から調べ、一番最初に見つけたものを返します。

var str = "abcdefgh";
console.log(str.match(/[^a-c]/)); // d

test()

test()は文字列内に一致するものがあるか調べ、trueかfalseを返します。

var str = "abcdefgh";
console.log(/abc/.test(str)); // true
console.log(/ijk/.test(str)); // false

初めてJavaScriptをやってみよー日記 ~14日目~

javascriptを学習した時の記録としてブログを書いていきます。

内容

  • DOMとは
  • DOMのデータ構造
  • DOMの使い方

DOMとは

DOMとは、HTMLをプログラムで扱う時に、HTMLの中に書いてあるものを、木の枝ような構造(ツリー構造)として扱うことで、わかりやすく、使いやすくする仕組みのことです。

正式名称は"Document Object Model"で、DOMはその略称です。

DOMのデータ構造

DOMは、データをツリー構造として扱い、そのデータ一つ一つを"ノード"と呼びます。一つ前のノード(自分自身が入っているノード)を"親ノード"、一つ後のノード(自分自身の中に入っているノード)を"子ノード"と呼ぶこともあります。

HTMLの場合は、一番上にあるDocumentの子ノードとして、<html>タグがあり、その子ノードとして<head>、 <body>タグがあります。

  • Document
    • <html>
      • <head>
        • <meta>
        • <title>
      • <body>
        • <p>

ノードには、種類が3種類あります。それぞれ"要素ノード"、"属性ノード"、"テキストノード"と言います。

要素ノードは、"HTMLタグ"を、属性ノードは"タグの属性"を、テキストノードは"タグ以外のテキスト"のノードです。

上の図は、要素ノードの関係性を表した図です。

DOMの使い方

  • ノードの参照
    • 全体の配列から参照
    • HTMLタグの名前で参照
    • IDで参照
  • ノードの値の変更

ノードの参照

説明のためのhtml

<!DOCTYPE HTML> 
<html lang=ja>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset=utf-8>
        <meta http-equiv="Content-Script-Type" content="text/javascript">
        <title>hatena_diary_14</title>
    </head>
    <body>
        <p id="a">1つ目の文章です。</p>
        <p id="b">2つ目の文章です。</p>
        <p id="c">3つ目の文章です。</p>
        <script><!--ここにjavascriptのプログラムを記入--></script>
    </body>
</html>

f:id:yojiyama7:20170930220810p:plain

全体の配列から参照

全てのノードは、配列で参照できます。documentに続く形で、何番目の要素を参照したいかを指定します。

childNodes[番号]でその番号の要素を参照できます。番号は1からではなく、0,1,2...と0から始まっているので注意してください。

また、firstChildはchildNodes[0]と同じ意味で使うことができます。

この方法はツリー構造を配列にしています。ツリー構造はwebブラウザによって異なるので同じコードでも動かない可能性があります。 今回は"GoogleChrome"のツリー構造に対応させて作っています。

for (var i=0, len=document.childNodes[1].childNodes[2].childNodes.length; i<len; i++) {
    console.log(document.childNodes[1].childNodes[2].childNodes[i]);
}

f:id:yojiyama7:20170930221700p:plain <script>タグの中身は気にしない。うん。

※GoogleChromeでは、「改行、空白、タブ」が一つのノードとして判定されてしまうので、それが#textとして本文と本文の間に入っています。

HTMLタグの名前で参照

document.getElementsByTagName()は参照したいノードのHTMLタグを与えると、そのHTMLタグのノードの配列を返します。その配列から番号によって参照することができます。

console.log(document.getElementsByTagName("p")[1].firstChild.nodeValue); // >>> 2つ目の文章です。
IDで参照

document.getElementById()は参照したいノードの"ID"を与えると、そのノードを返します。html内でIDは同じものを複数使うことができないので、文法があっていればエラーを防ぐことができます。

console.log(document.getElementById("c").firstChild.nodeValue); // >>> 3つ目の文章です。

ノードの値の変更

参照したノードに代入することで、ノードの値を変更することができます。

document.getElementById("c").firstChild.nodeValue = "書き換えました。";

f:id:yojiyama7:20170930222159p:plain