JavaScript 入门

var a = 10;
console.log(window.a);  //得到的结果是--10
?
function fun() {
    console.log(‘我是fun函数‘);
}
window.fun();   //执行结果--我是fun函数

function Person(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.infoName = function() {
        alert(this.name)
    }
}
?
var obj = new Person(‘红孩儿‘, 15, ‘男‘);
console.log(obj);

function Person(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.infoName = func;
    }
// 在全局定义函数方法然后赋值给infoName
function func() {
        alert(this.name);
    };
var obj = new Person(‘红孩儿‘, 15, ‘男‘);
var obj1 = new Person(‘jack‘, 25, ‘男‘);
?
console.log(obj.infoName == obj1.infoName);     // true

function MyClass() {
   alert(‘hello‘);
}
?
// 向MyClass的原型中添加属性a
MyClass.prototype.a = 123;
?
// 向MyClass的原型中添加方法func
MyClass.prototype.infoName = function() {
    alert(‘hello world‘);
}
?
// 创建MyClass的实例
var mc = new MyClass();
var mc1 = new MyClass();
console.log(mc.__proto__ == MyClass.prototype);     // true
?
// 向mc中添加属性a
mc.a = ‘我是mc中的a‘;
?
// 如果自己没有，原型中也没有，则会返回undefined
console.log(mc.b);
?
// Object原型没原型，找到最后会返回null
console.log(mc.__proto__.__proto__.__proto__);

function Person(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    }
?
// 向原型中添加infoName方法
Person.prototype.infoName = function func() {
    alert(this.name);
    };
?
var obj = new Person(‘红孩儿‘, 15, ‘男‘);
var obj1 = new Person(‘jack‘, 25, ‘男‘);
?
console.log(obj.infoName == obj1.infoName);     // true

eg: //等待3秒之后执行
var startTime = new Date().getTime();
var stopTime = new Date().getTime();
while (stopTime - startTime < 3000) {
    startTime = new.Date().getTime();
}

//on事件
div.onclick = function() {
    
}
?
// 非on事件
var fn = function() {
?
}
div.addEleventListener(‘click‘,fn);

//on事件
div.onclick = null;
s
//非on事件
div.removeEleventListener(‘click‘,fn);

sub.oncontextmenu = function(ev) {
    // 方法一：
    ev.preventDefault();
    // 方法二：
    return false;
}

div.onmousemove = function(ev) {
    ev.clientX; //获取X坐标
    ev.clientY; //获取Y坐标
}

var div = document.querySelector(‘div‘);
document.onkeydown = function(ev) {
    console.log(ev.keyCode);    // 打印对应的键盘编码
}
// 移动div
switch(ev.keyCode) {
    case 37:
        div.style.left = div.offsetLeft - 3 + ‘px‘; 
        break;
    case 38:
        div.style.top = div.offsetTop - 3 + ‘px‘;
        break;
}

sub.onclick = function(ev) {
    // 方法一：
    ev.stopPropagation();
    // 方法二：
    ev.cancelBubble = true;
}

for(①初始化表达式； ②条件表达式； ④更新表达式) {
    ③语句、、、
}
for(var i = 0; i < 10; i++ ) {
    alert(i);
}

for(; ; ) {
    alert(‘hello‘);
}   // 会一直执行下去

var i = 0;
for(; i < 10; ) {
    alert(i++);
}

var arr = [‘jack‘,‘Bob‘,‘alina‘];
var res = arr.push(‘peter‘,‘zero‘);
console.log(arr);   // ["jack", "Bob", "alina", "peter", "zero"]
console.log(res);   // 5

res = arr.unshift(‘李哥‘,‘牛哥‘);
console.log(arr);   // ["李哥", "牛哥", "jack", "Bob", "alina", "peter", "zero"]
console.log(res);   // 7

// 接收返回值 res
res = arr.pop();
console.log(arr);   // ["jack", "Bob", "alina", "peter"]
console.log(res);   // zero

res = arr.shift();
console.log(arr);
console.log(res);

var arr = [‘孙悟空‘,‘唐僧‘,‘沙僧‘];
for(var i=0; i < arr.length; i++) {
    console.log(arr[i]);
}

var arr = [‘孙悟空‘,‘唐僧‘,‘沙僧‘,‘猪八戒‘];
arr.forEach(function(value, index, obj) {
    console.log(value);
});

var arr = [‘孙悟空‘,‘唐僧‘,‘沙僧‘,‘猪八戒‘];
var res = arr.slice(0,2);   // 顾头不顾尾
console.log(res);   // ["孙悟空", "唐僧"]
console.log(res == arr);    // false

var arr = [‘jack‘,‘peter‘,‘bob‘];
var res = arr.join(‘-‘);
console.log(res);   // jack-peter-bob

var arr = [‘jack‘,‘peter‘,‘bob‘];
arr.reverse();
console.log(arr);   // ["bob", "peter", "jack"]

var arr = [1,3,5,2,7,11];
arr.sort(function(a, b) {
    return a - b;
})
console.log(arr);   // 1,2,3,5,7,11

var str = ‘hello‘;
console.log(str.length);    // 5

var str = ‘hello jack,how are you‘;
var res = str.indexOf(‘h‘);     // 0
res = str.indexOf(‘h‘,3);   // 11
console.log(res);

var str = ‘please hold on‘;
// 自动交换参数的位置
console.log(str.substring(2,0));    // pl

var str = ‘hello‘;
console.log(str.charAt(3)); // l

var str = ‘hello‘;
console.log(str.charCodeAt(1)); // 101

console.log(String.fromCharCode(101));  // e
console.log(String.fromCharCode(20013));    // 中

var str = ‘bob,jack,peter,lee‘;
console.log(str.split(‘,‘));

var 变量名 = new RegExp(‘正则表达式‘,‘匹配模式‘);   // 构造函数
var 变量名 = /正则表达式/匹配模式;  // 字面量

var str = ‘1a2b3c4d5e6D7G9‘;
var res = str.match(/[a-z]/ig);
console.log(res);   // ["a", "b", "c", "d", "e", "D", "G"]

var res = ‘you looked so good‘;
console.log(res.search(/[A-z]oo[a-z]/));    // 4

var str = ‘hello jack how are you‘;
console.log(str.replace(/o/g,‘@‘));     // hell@ jack h@w are y@u
?
// 删除所有字母
var str = ‘1A2b3c4d5e6F7H‘
console.log(str.replace(/[a-z]/ig,‘‘));     // 1234567

var str = ‘a2b5c1F6d7‘;
console.log(str.split(/[A-z]/));

<button id=‘btn‘>我是一个按钮<button>
    
<script>
    // 获取到一个对象
    var btn = document.getElementById(‘btn‘);
?
    // 修改对象的内容
    btn.innerHTML = "I‘m a button";
</script>

1. getElementById()       // 通过id属性获取一个元素节点对象
2. getElementsByTagName() // 通过标签名获取一组元素节点对象
3. getElementsByName()    // 通过name属性获取一组元素节点对象

1. getElementsByTagName()  // 方法，返回当前节点的指定标签名后代节点
2. childNodes   // 属性，表示当前节点的所有子节点
                // 注意：childNodes属性会获取包括文本节点在内的所有节点，空白符也会被当做节点处理
    children // 属性，可以获取当前元素的所有子元素（建议使用）
3. firstChild         // 属性，表示当前节点的第一个子节点
   firstElementChild  // 属性，获取当前节点的第一个子元素
                      // 不支持IE8及以下
4. listChild    // 属性，表示当前节点的最后一个子节点