原生js基础入门

Posted 2020-12-06 讲明白

目录

• 一、基础语法
  • 1、js语法嵌入页面的方式
  • 2、注释
  • 3、变量
  • 4、数类类型
  • 5、运算符
  • 6、条件语句
  • 7、函数
  • 8、对象
  • 9、 循环
• 二、js页面操作
  • 1、DOM简介
  • 2、获取页面标签
  • 3、操作标签内容---子集
  • 4、修改标签属性
  • 5、事件操作

一、基础语法

1、js语法嵌入页面的方式

html中的脚本必须位于标签之间，脚本可放置在body和head中

1.行间事件（主要用于事件）

<input type="button" value="按钮" onclick="alert(‘被点击了‘)">

2.页面script标签

<script type="text/javascript">
    window.onload = function () {
        document.getElementById("box1").style.background = "red"
    }
</script>

3.外部引入

<script type="text/javascript" src="js/main.js"></script>

2、注释

我们可以添加注释对js进行解释，或者提高代码的可读性

• 单行注释：//
• 多行注释：/* */

3、变量

变量命名

• 变量可以使用端名称（比如x和y）也可以使用描述性更好的名称（age，name，sum）
• 变量必须以字幕开头
• 变量也能以$和_开头（不推荐）
• 变量名称对大小写严格区别

声明变量：var

• js中可以变量可以先声明在赋值
• 也可以在声明的时候赋值
• 也可以同时声明多个或者多都赋值
• 声明未赋值会打印：undefined（区别于null）

var name; //声明不赋值
var age = 18; //声明时赋值
var id = 1, text = "js基础" // 同时声明多个

4、数类类型

字符串、数字、布尔、Null、undifined、数组

js也是一门弱类型语言，类似于python，所以定义变量时也不需要声明类型

number:数字类型

• var y = 3;

string 字符串类型

• var str = "javascript";

boolean 布尔类型

• var status =true or false;

undefined 类型：只定义没赋值

• var status;

null 类型：类似python中的None

• var status = null;

arry 数组类型

• 数组类似python中的list，也可以通过下表取值
• length属性：获取数组的长度：
• pop():删除最后一个值，并返回和pyhton一样
• push(): 像数组最后添加一个元素，类似python中的append

// 执行代码
//创建数组 Array
var data_array = Array("html", "css", "js");
//一样可以通过下标取值，可以for遍历得到下标
console.log(data_array[0]);
//通过length获取数组长度
console.log(data_array.length);
//pop()方法从数组删除最后一个元素并返回，和python中一样
data_array.pop();
console.log("删除之后:", data_array);
//push 方法把元素添加到数组最后一个位置
data_array.push("javascript");
console.log("添加之后：", data_array)

5、运算符

• 算数运算符：++ 、-- 、** 、// 、%
• 赋值运算符：=、+=、*=、/=、%=
• 条件运算符: == 、=== 、> 、>= 、< 、<= 、!=（不管类型，只管值） 、!==（值和类型必须都不等）
• 逻辑运算符：&&（且）、||（或）、!（否）

6、条件语句

通过条件来控制程序的走向、就需要用到条件语句/

1、if语句：if(条件){逻辑}

2、else if语句：else if(条件){逻辑}

3、else语句：else{逻辑}

var age = 19;
if (age > 18) {
    console.log("大于18")
} else if (age === 18) {
    console.log("等于18")
}else {
    console.log("小于18")
}

4、switch语句

switch(表达式){
    case n1:
        代码块
        break;
    case n2:
        代码块
        break;
    case n3:
        代码块
        break;
    default：
        默认代码块
}

• 计算一次switch表达式
• 把表达式的值与每个case的值进行对比
• 如果存在匹配，则执行关联代码
• 遇到break关键词，会跳出switch语句
• case匹配都不存在时，会执行default的代码
• 案例：

var a = 5, b = 7;
switch (b-a) {
    case 6:
        console.log("等于6");
        break;
    case 7:
        console.log("等于7");
        break;
    default:
        console.log("不等于6 7 ")
}

7、函数

定义函数的关键词function，函数内的代码块、包裹在花括号中：

// 定义函数：关键字+函数名+参数+{代码块}，
// 细节和python一样:
// 1、参数定义和形式
// 2、return 返回值
function func(param1, param2 = 3) {
    console.log(param1);
    console.log(param2);
    return param1 + param2
}
// 调用
var sum = func(55);
console.log(sum)

8、对象

创建对象：对象用花括号分割，在括号内部，类似python中字典, 也时key:value形式，value接收任意类型数据，包括函数

1、创建方式一：

// new Object 初始化一个字典
// 然后可以像python中一样添加键值对
obj_1 = new Object();
obj_1["name"] = "张三";
console.log(obj_1)

2、创建方式二：

直接定义变量接收花括号{}

// 对象中可以接收任意类型，包括函数，
// 跟python字段非常相似。
// js中的key 可以不不加引号。
// 操作属性，可以和python中一样用[],也可以直接点出来，而python是get()方法
var obj_2 = {
    name: "李四",
    age: 16,
    gender: "男",
    sum: function (var1) {
        console.log(var1+12)
    }
};
// 调用
console.log(obj_2.sum(20))

9、 循环

主要分为三种： while(条件)、for(语句1,语句2,语句3)、 for (i in iteration)==遍历

1、while循环

和python基本一样，基本不用。for更省代码

while(条件语句){
    循环体
}

案例循环打印1-5

var a = 1;
while (a<=5){
    console.log(a);
    a++;
}

2、for循环

一般都用for循环来取代while循环

for(语句1,语句2,语句3){
    循环题
}

• 语句1：在循环开始之前执行
• 语句2：循环条件，成立则执行循环体
• 语句3：每一轮循环执行之后执行的语句

案例循环打印1-5

// 注意三个语句要用分号分割，不是逗号
for (i = 1; i <= 5; i++) {
    console.log(i)
}

3、for遍历

for(i in Array("a","b","c"){
    循环体
}

• 遍历和python中的遍历一样
• 需要注意的是遍历数组，遍历出来的 i 不是元素，是元素的下标， 一样可以根据下标取值
• 遍历对象，遍历出来的是属性，可以通过[属性]获取值，但是不能点属性出来，因为遍历出来的是字符串

 // 遍历数组
var list_data = Array("a","b","c");
for (i in list_data){
    console.log(i);   // 下标
    console.log(list_data[i])
}



// 遍历对象
var obj_2 = {
    name: "李四",
    age: 16,
    gender: "男",
    sum: function (var1) {
        console.log(var1 + 12)
    }
};
for (i in obj_2){
    console.log(i); // 属性，也就是key
    // console.log(obj_2.i)  不能点i了
    console.log(obj_2[i])
}

二、js页面操作

1、DOM简介

通过HTML DOM，js可访问HTML文档的所有元素

当页面子被加载时，游览器会创建页面的文档对象模型（Document Object Model）

HTML DOM 模型会呗构造成树结构

节点树中的节点彼此拥有层级关系

• 父（parent）、子（chidren）、同胞（sibliing）、等术语用于描述这些关系，父节点拥有子节点，同级节点称为同胞或兄弟姐妹

通过可编程的对象模型，js获得了足够的能力来动态创建HTML

• 如何改变HTML元素的内容（innerHTML）
• 如何改变HTML元素的css样式（style）
• 如何添加或删除HTML元素
• 如何对HTML DOM事件做处反应

2、获取页面标签

1、获取标签的方式

通常通过javascript才周一HTML元素，可以使用内置对象document的提供的三种方法找到该标签

// 1、通过id属性
document.getElementById("id")

// 2、通过标签名
// 返回的时一个数组
document.getElementsByTagName("div")

// 3、通过类属性名称
// 返回一个数组
document.getElementsByClassName("class")

2、获取标签注意的问题

当我们在head标签中 或 js文件中 直接写js代码获取页面元素时，会报错元素不存在

是因为，代码是从上往下执行的，加载js代码时，html还没加载，导致无法找到元素

解决办法

方法一：把js代码带在body标签 元素最后面，这样元素加载完，在执行代码就能找到元素了

方法二：js代码加入 window.onliad = function(){} js代码放在函数内，这样就会等html页面加载完在执行js

// 加入windos.onload 就会等页面加载完在执行js
window.onload = function () {
    document.getElementById("box1").style.background="red";
};

3、操作标签内容---子集

• innerHTML 属性
  • 获取元素的子集的最简单的方法时使用innerHTML属性，innerHTML属性对与获取或替换HTML元素的内容很有用
• 读取节点文子集

<div id="box3">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

# 读取的时整体ul，只有文本时，就等于文本读取
window.onload = function () {
    console.log(document.getElementById("box3").innerHTML)
};

• 写入节点文本

// 注意会把元素子节点先清空在赋值
window.onload = function () {
    document.getElementById("box3").innerHTML="box33333333333";
};

• 仅获取元素下文本或子元素文本- innerText

window.onload = function () {
    console.log(document.getElementById("box3").innerTEXT)
};

4、修改标签属性

• 操作属性的方法

  • element.属性名 = "属性值" ;

• 案例-修改input type属性值

//html 
输入框：<input type="text" name="user" id="user">

// js 修改type为 button
document.getElementById("user").type = "button";
document.getElementById("user").value = "按钮";

5、事件操作

主要就是触发鼠标事件后的一系列捕捉，及捕捉后的操作,后面学到jquery操作这些更加方便简单，原生js仅稍微介绍一下。。。

//html
<div id="box2" >box2</div>

// click, 程序自动触发click事件，操作元素更换背景颜色,
// 不能接收回调函数
ele = document.getElementById("box2");
    ele.click(
        ele.style.background = "red",
        console.log("自动化触发变更颜色")
    );

//onclick 程序没有自动出发，激发点击事件时触发
// 可以接收回调函数
ele.onclick = function () {
    this.style.background = "cyan";
    console.log("主动点击变色")
}