JavaScript基础

一.对象

对象：
   我们将对象分为了几类：
 1.宿主对象 （host Objects） 是由JavaScript宿主环境提供的对象
 它的行为完全由宿主环境决定
 2.内置对象（Built in Objects） 是由JavaScript语言提供的对象
   固有对象 由标准规定的随着JavaScript运行时而创建的对象实例
   原生对象 可以由用户通过 Array、RegExp
   普通对象 由{} 语法 或者 Object构造器 或者 class关键字创建的对象

 Object类型 是一个对象，是JavaScript中的引用数据类型

创建对象
方式一：

var student = new Object();
 student.name = '张三';
 student.age = 18;
 console.log(student.name);

方式二：

var student = {
        name:'张三',
        age:18,
        sex:'男'
    }
    console.log(student);
    console.log(student['name']);

遍历对象

for (var studentKey in student) {
    console.log(studentKey +"-"+student[studentKey]);
}

数据类型
 基本数据类型 引用数据类型
 JavaScript 基本数据类型 中
 String Number Boolean Undefined Null

引用数据类型
 是保存在内存中的对象
 当一个变量是一个对象时 ，实际上变量中保存的并不是对象本身，是对象的引用
 当从一个变量向另一个变量复制引用类型的值时，将会对对象引用复制到变量中并不是创建了一个新的对象

栈和堆
 JavaScript在运行时 数据是保存在栈和堆内存中的
 栈内存中用来保存变量和基本类型，堆中存的对象
 我们在声明一个变量是，实际上就是在栈内存中创建一个空间来保存变量

var a = 789;
var b = 'hello';
var c = false;
var d = {name:'张三',sex:'男'};

二.函数

函数

函数是一连串子程序的组成 可以被外部程序调用

可以向函数中传递参数之后 函数可以选择返回一定值

JavaScript 从上而下执行 但是函数的内部不是这样

如果只是对函数进行了声明 那么其中的代码不会执行 只有在调用函数时才会执行函数内部代码 JavaScript中的函数也是一个对象

函数的创建

  使用函数对象创建函数 几乎不用 

  var 函数名 new Function("执行的语句");

var funA = new Function("console.log('测数数据')");

函数表达式

var 函数名 = function(形参1,形参2.....形参5){
   语句
 }

   js中所有的参数的传递 都是按值传递，也就是说吧函数外的值赋值给了函数内部的参数，就是把值从一个变量赋值给了另一个变量

 var sum = function (num1,num2) {
    var result = num1 + num2;
    return result;
 }
 var result =  sum(1,2);
 console.log(result)

function fu() {
    function zi() {
       console.log("这是zi函数")
  }
  zi();
}
fu();

匿名函数 没有名字的函数就匿名函数可以让一个变量来接收  （函数表达式方式）

立即执行函数函数定义完成后 立即执行 只会执行一次

(function () {
   alert("这是立即执行函数");
 })();

使用工厂模式创建对象

function createPerson(name,sex) {
      var obj = new Object();
      obj.name = name;
      obj.sex = sex;
      obj.sayHello = function () {
         console.log(this.name);
     }
     return obj;
  }
var person1 = createPerson('张三','男');
var person2 = createPerson('王五','男');
console.log(person1)
console.log(person2)

this

解析器在调用函数时 每次都会向函数的内部传递一个隐含的参数
就是this ，this执行是一个对象
这个对象被称为函数执行的上下文对象，根据函数调用方式不同
this会指向不同的对象
函数式形式调用时 this是window
以方法的形式调用时 this就是调用方的的那个对象

构造方法

构造方法就是一个普通的函数，创建方式和普通函数没有区别
不同的是构造函数一般首字母大写
需要使用new关键字 来调用

function Person(name, sex) {
        this.name = name;
        this.sex = sex;
        this.sayHello = function () {
            console.log(this.name);
        }
    }
    var person1 = new Person('张三','男');
    var person2 = new Person('王五','男');
    console.log(person1);
    console.log(person2);

    if(person1 instanceof Person){
        console.log("是person类型的")
    }

三.RegExp

正则表达式

用于定义一些字符串的规则，计算机可以根据正则表达式
 来检查一个字符串是否适合标准
 var 变量名 =  new RegExp('正则表达式','匹配模式');
 匹配模式
 i: 忽略大小写
 g: 全局匹配功能
 ig: 忽略大小写并且全局匹配

创建正则表达式

var aeg = new RegExp("ab",'i');

 

//使用正则表达式检查内容
var result = aeg.test(str);
console.log(result);

// 使用字面量创建
// var 变量名 = /正则表达式/匹配模式;
var reg = /a/i;
var str = 'ABc';
var result = reg.test(str);
console.log(result);

 | 或者
 [a-gA-G0-9] 区间判断
 [^A-Z]  除了A-Z之间的内容
 [35879] 可以为 3 5 8 7 9
 \d : 任意的数字 相当于[0-9]
 \D ：非数字
 \w 任意的字母 数字  下划线 相当于[A-Za-z0-9_]
 \W 除了字母 数字  下划线 相当于[^A-Za-z0-9_]
 \s 空格
 \S 除了空格
 {} 向前匹配一次
 {n} 最少出现n次
 {n,} 最少出现n次,最多无上线
 {n,m} 最少出现n次,最多出现m次
 + 至少一次 相当于{1,}
      * 0或多个 相当于{0,}
 ? 0或1个 相当于{0,1}
 \. 表示 .
 \\ 表示 \
 ^[\u4e00-\u9fa5]{0,}$ 汉字

四.JavaScript DOM

 DOM 当页面加载时 浏览器会创建页面的文档对象模型
 (Document Object Model)
                     文档
                     HTML
          head                   body
          title           属性 元素 [a  ul h1 table p sp b e ]
                           li     tr  th
                                      td
 HTML DOM模型 结构化的对象树
  获取 更改  添加 删除HTML元素
  节点 Node：是构成网页的最基本的组成，网页中每一个部分都可称为节点
  文档节点  整合HTML文档
  元素节点 HTML文档中的HTML标签
  属性节点 元素的属性
  文本节点 HTML标签的文本内容
  文档节点（Document）代表整合HTML文档，网页中所有的节点都是它的子节点
  元素节点 (Element) 各种标签都是元素节点
  属性节点(Attribute) 表示的是标签中一个属性
  文本节点 (Text) 表示的是HTML标签以外的文本内容

<p id="p1">这是一个<strong>段落</strong></p>
<p>这是一个段落</p>
<p class="class_p">这是一个段落</p>
<hr/> <!-- 水平线-->
<ul class="list1">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>
<hr/>
<a id="a1" href="8.内置对象.html"  >单击跳转</a>
<hr/>
<div id="div1" style="width: 100px;height: 100px;background: red;">
</div>

 var p = document.getElementById('p1');
 console.log(p);

 var p = document.getElementsByTagName("p");
 console.log(p[1]);

 var p = document.getElementsByClassName("class_p");
 console.log(p);
// 通过css的 选择器 获取页面元素
 var list = document.querySelectorAll(".list1 li");
 console.log(list);

var p = document.getElementById('p1');
// 获取文本内容
console.log(p.innerText);

console.log(p.innerHTML);
p.innerHTML = '<strong>这是一个段落</strong>';

var a = document.getElementById("a1");
// 获取a标签的属性
console.log(a.href);
a.href = 'https://www.baidu.com';

var div = document.getElementById("div1");
console.log(div.style.width);