前端学习4（javascript基础）

使用的方式

1. 在body head 中写script；

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

2. button 中直接嵌套

<button type="button" οnclick="myFunction()">Try it</button>

3. 导入js文件

<script src="myScript.js"></script>

展示的方式

• innerHTML

document.getElementById("demo").innerHTML ="5 + 6 =" + z + ".";

• document.write().
• window.alert().
• console.log(). ／／debuging

变量初始化

var x,y,z;

数字可以带小数点；字符串单双都可以。“”==‘’ "John" + " " + "Doe"

string + number 返回string  

eg: "happy"+5+4     -->  happy54

5+4+"happy"  --> 9happy //因为javascript是从左到右开始计算的。

数据类型   typeof car  // 返回car的数据类型

• number

var x = 100 / "Apple";  // x will be NaN (Not a Number)

isNaN(x);

var x = 100 / "10";     // x will be 10 特殊情况

var x =  2 / 0;          // x will be Infinity
var y = -2 / 0;          // y will be -Infinity

var y = new Number(123); // objects

myNumber.toString();   // returns string 

myNumber.toString(2);   // returns 二进制 10000000

myNumber.toFixed(2);    // returns 9.66小数点两位，四舍五入

Number(true);          // returns 1 把其他类型转化为number
Number(false);         // returns 0
Number("10");          // returns 10
Number("  10");        // returns 10
Number("10  ");        // returns 10
Number("10 20");       // returns NaN 
Number("John");        // returns NaN

Math.round(4.7);    // 四舍五入

Math.pow(8, 2);      // returns 64

Math.sqrt(64);      // returns 8

Math.abs(-4.7);     // returns 4.7

Math.ceil(4.4);     // returns 5向上去

Math.floor(4.7);    // returns 4向下取

Math.random();     // returns a random number 0-1

Math.floor(Math.random() * 10) + 1;  // returns a random number 0-10

• string

string 中 'It \' s alright.'   "ab is \"angelababy \"" 可以显示引号

var x = "John";    // typeof x will return string

var  y =  new  String( "John" );// typeof y will return object

var z = new String("John");

// x==y 因为value一样

// y!=z 因为是不一样的object

@@string涉及的方法：

var txt = "Please locate where 'locate' occurs!";
var sln = txt.length;
var pos = str.indexOf("locate"); // locate 开始的地方 7
var pos = str.lastIndexOf("locate");// 结束
var pos = str.indexOf("locate",15);// 15以后的locate
var pos = str.search("locate");// 寻找第一个locate

• object eg: var x = {firstName:"John", lastName:"Doe"}; 

【name:value】 

x.firstname =====  x["firstname"]

value can be a function 但是调用的时候要加括号！！

document.getElementById("demo").innerHTML =person.fullName();

fullName : function() {
       return this.firstName + " " + this.lastName;
    }

• Arrays 是object的一种 eg: var cars = ["Saab", "Volvo", "BMW"]

In JavaScript,  arrays  use  numbered indexes .  In JavaScript,  objects  use  named indexes .

fruits.push("Lemon");  //添加新元素
person["firstName"] = "John"; //object
person[0] = "John";//number
var points = [40, 100, 1, 5, 25, 10];          // array的赋值就直接赋，不要加new array 变成object
Array.isArray(fruits);     // returns true

document.getElementById("demo").innerHTML = fruits.toString(); //输出array 以，链接

document.getElementById("demo").innerHTML = fruits.join(" * "); //输出array 以*链接

x = fruits.pop();//去除array的最后一个并赋值给x

fruits.push(“kiwi”);//加到array的最后一个

fruits. shift ();  //去除第一个

fruits.unshift("lemon"); //第一个加入lemon，其余后移

fruits.splice(2, 0, "Lemon", "Kiwi");//在2的位置加入lemon和kiwi，删除0个元素

fruits.splice(0, 1); //在0的位置删除1个元素，并加入。。（不加东西）

var myChildren = arr1.concat(arr2, arr3); //在arr1后面合并arr2和arr3

var citrus = fruits.slice(3); //切除前三个，剩余赋值给citrus

fruits.sort();   //排序，按string第一个字符，不适用于数字 100和5

fruits.reverse();         // Reverses the order of the elements

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});//适合于数字的排序，由小到大递增

cars.sort(function(a, b){return a.year - b.year});//数组里面是object

null 与 undefined  null设为空但类型还是原来的，undefined 的类型也是undefined。

作用域scope

事件events

οnclick="document.getElementById('demo').innerHTML = Date()"

οnclick="this.innerHTML = Date()" //大小写区分

οnclick="displayDate()"

onchange	An HTML element has been changed
onclick	The user clicks an HTML element
onmouseover	The user moves the mouse over an HTML element
onmouseout	The user moves the mouse away from an HTML element
onkeydown	The user pushes a keyboard key
onload	The browser has finished loading the page