Js.初学.笔记

一、JavaScript简介

1.什么是JavaScript

JavaScript简称JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行

Web前端三层：

• 结构层HTML，定义页面的结构
• 样式层CSS，定义页面的样式
• 行为层JavaScript用来实现交互，提升用户的体验

2.JavaScript作用

• 在客户端浏览器上动态的操作页面
• 在客户端浏览器上做数据的校验
• 在客户端上发送异步请求

二、引用方式

1.内联方式

在页面中使用script标签，在script中编写JS代码

script标签可以放在页面的任意位置，一般放在头部位置

    <script>
        JS代码
    </script>

2.行内方式

在普通标签中编写JS代码，一般需要结合时间的属性，如onclinck、onmouseover等

提示：什么是事件属性？…面向对象

eg：对象…外观修饰…CSS实现

​ 行为、事件…某一事件发生的对象不一样，所引发的反应也各不相同——对象的多态性

     <!--行内方式-->
     <input type="button" value="点我" οnclick=alert("我被点了")>
     <!--<a href="" οnclick="alert('超链接被触发')">超链接</a>-->
     <a href="javascript:alert('超链接被触发')">超链接</a>

     <div onmouseover="alert('走开')">把鼠标移上来</div>

3.外部方式

使用单独的 .js. 文件定义，然后在页面中使用script标签引入外部脚本文件

    <!--外部方式-->
    <script type="text/javascript" src="js/hello.js"></script>

注意：如果某个script标签用于引入外部js文件，则该script标签的标签体中不能再写js代码

三、基本语法

1.变量

变量是用来存放常量的量

常量就是固定值—常数项

js是一门弱类型语言，声明变量时使用var关键字，不需要指定变量的类型

语法：var 变量名常量或表达式;

在ECMAScript 6规范中新增let关键字，也用于声明变量

使用 let 声明的变量支持块级作用域，而使用var声明的变量不支持块级作用域

注：在IDEA中配置ES版本 settings–>lauguage & frameworks —>javascript—>javascript lauguage version

变量的命名规则：

• 由字母、数字、下划线、汉字组成
• 由字母、下划线开头
• 不能和系统关键字重名
• 区分大小写

了解：变量名的命名：

2.输入和输出

输出：

• alert()弹出警号框
• console.log()输出到浏览器的控制台
• document.write()输出到页面

输入：

• prompt()弹出一个输入框，获取用户输入的数据

​ 使用 typeof变量 判断变量的类型

​ 使用Number(变量)将字符串转换为数值

3.转义字符

常用转义符：

• ‘\n’ 换行
• ‘\t’ 缩进
• " 双引号
• \ ‘ 单引号
• \\ 斜杠

4.注释

单行注释 //

多行斜杠 /* 注释内容 */

5.编码规范

代码是区分大小写的

每个语句以分号结尾

代码缩进

四、核心语法

常量：具体值，不变的量…常数项

变量：变化的值，存储常量的量

• string字符串
• number数值(NaN表示非数字 Not a Number，其自身是number类型，表示数值的不正常状态)
• boolean布尔
• null空类型
• undefined未定义类型

类型转换：

• 转换number

​ 使用Number()、parseInt()、perseFloat()

• 转换为字符串

​ 拼接空字符串

• 转换为布尔boolean

​ 使用Boolean()

注：0、空字符串、null、undefined、NaN会被转换为false，其他值都会被转换为true

2.运算符

算术运算符：+ - * / %求余 **乘方 ++ –

比较运算符：> 、 >=、 < 、<= 、== 、===、!=

赋值运算符：=、+=、-=、*=、/=、%=

逻辑运算符：&&并且 、||或者、！非

条件运算符：条件？表达式1：表达式2

3.选择结构

if…else…、switch

4.循环结构

while、do…while、for、for…in

break、continue

break：退出整个循环

continue:结束本次循环返回到条件判断处继续进行下一次执行循环的条件判断

        var str ='welcome';//将字符串看作是由多个字符组成的集合
        for(var index in str)
        {
            // console.log(index);//输出了str索引
            //console.log(str[index]);
        }

5.数组

5.1 定义方式

语法：

var arr = new Arrat();
var arr = new Array(值1，值2，....);
var arr = [值1，值2，....];

注意：

• 数组的长度会自动扩展
• 数组中元素的默认值为undefined
• 使用length属性获取数组的长度

5.2 常用方法

sort()	排序，默认按字符编码进行升序排序，非string类型会自动转换为string课自定义比较规则
reverse	反转，将数组元素倒序排列
join	将数组中的元素使用指定的分隔符连成字符，默认通过逗号进行连接
indexOf	返回指定元素，在数组中首次出现的位置
slice(begin,end)	截取数组中索引从begin到end之间的元素，左闭右开，如果省略第二个参数，则表示截取到末尾
toString	将数组转换为字符串

5.2 二维数组

二维数组可认为是一个特殊的一维数组，即一维数组中的每个元素又是一个一维数组

var arr =  new Array();
arr[0] = new Array();
arr[1] = new Array();
arr[][] = 值;

var arr = [
    [值1，值2，...],//定了一个具有m行个元素的特殊的一堆数组
    [值1，值2，...],//第0行有n个元素
    [值1，值2，...]//第1行有n个元素
]

6、函数

6.1 自定义函数

语法：

function 函数名(参数1，参数2，...)
{
    函数体;
}

注意：

• 定义函数时不需要指定参数的类型
• 实参的个数和形参的个数可以不同，未指定实际参数时形参的默认值为undefined
• 不需要指定返回值的类型，如果有返回值，直接使用return语句返回即可
• 如果函数中没有return语句返回值，默认返回undefined

变量的作用域：

• 局部作用域

​ 在函数中声明的变量，只能在该函数内访问，函数运行结束变量自动销毁

• 全局作用域

​ 在函数外声明的变量，在任何位置都可以访问

• 块级作用域

​ 使用let关键字声明的变量，只能在声明它的代码内访问

6.2 回调函数

不立即执行的函数调用，免租一定条件时会执行或者由别的代码调用执行，称为回调函数callback

调用时只写函数名，没有小括号和参数

应用：

• 作为事件绑定的函数
• 作为另一个函数的参数

6.3 匿名函数

没有名字的函数，称为匿名函数，一般用于回调

应用场景：

• 用于函数的回调

  window.onclick = function () {

  console.log(‘111’);
  };

• 用于一次性执行的函数，会自动执行，称为自执行

(function () {
            console.log(333);
})();

6.4 箭头函数

ES6中允许使用 箭头 => 定义函数，称为箭头函数，也叫ambda表达式，是一种特殊匿名函数

五、复合类型

1.String

1.1 定义方式

语法

var str = 'welcome to js';//基本数据类型
var str = new String('welcome to js');//对象数据类型/引用数据类型

使用length属性获取字符串的长度

1.2 常用方法

方法名	说明
charAt()	返回在指定索引位置的字符，也可以使用[索引]的方式
indexOf()	返回某个指定的字符在字符串中首次出现的位置
lastindexOf()	返回某个指定的字符在字符串中最后出现的位置
toLowerCase()	将字符串转换为小写字符
toUpperCase()	将字符串转换为大写字符
subString()	提取字符串中两个指定索引号之间的字符
replace()	将指定的字符串替换为新的字符串
split	把指定的字符串分割为字符串数组
trim	去除字符串前后空格

2.Date

2.1 定义方式

语法：

var date = new Date();
var date = new Date(year,month,day,hour,minute,second);//参数为指定的年月日，时分秒
var date = new Date

2.2常用方法

方法名	说明
getFullYear()	以四位数字返回年份
getMonth()	返回月份[0,11]，0表示1月
getDate()	返回一个月中的某一天(1-31)
getHours()	返回小时[0,23]
getMinutes()	返回分钟[0,59]
getSeconds()	返回秒数[0,59]
getmillseconds()	返回毫秒(0,999)
getDay()	返回一周中的某一天(0-6),0表示周日
getTime()	返回从1970-1-1 0:0:0至今的毫秒数

setXxx方法与getXxx方法类似，用于设置对应的值

3.JSON

3.1 JSON简介

JavaScript object Notation是一种轻量级的数据交换格式，用于表示javascript对象的一种方式，采用与编程语言无关的文本格式，易于阅读和编写，同时易于解析和生成

3.2 基本用法

语法：{“属性名”:属性值，“属性名”:属性值,…}

注意：

• JSON结构是由一系列的键值对所组成的，称为JSON对象
• 属性名必须使用双撇号括起来

使用：

• 简单的JSON对象
• 复合属性，属性的值也为JSON对象
• JSON对象的集合

3.3 JSON转换

• JSON转换为字符串

var person = {
    "name":"hahaha",
    "age":18,
    "height":160,
};
var str = JSON.stringify(person); 

• 字符串转换为JSON

var str = '{"name":"tom","age":20,"sex":"男"}'; var obj = JSON.parse(str);
 
var users = '[     {"id":1,"username":"tom","password":"123"},                         {"id":2,"username":"jack","password":"111"} ]' console.log(typeof users); var objs = JSON.parse(users);

4.对象类型

4.1 对象简介

补充：

​ 1、对象：客观存在的并且可以相互区别的事物， eg：一个同学，一本书，页面上的命令按钮 ，复选框

​ 2、描述一个对象

​ 属性------外观，长相

​ 方法-------行为模式------干什么

​ 事件--------单机，双击

​ 3、对象有三个基本特征：封装、继承、多态

对象类型可以理解为JAVA中的引用数据类型

javascript是面向对象的语言，但并不是人们常说的纯粹的面向对象的语言，因为它不支持某些特征

4.2 创建对象

三种方式

• 使用Object

//新创建的对象没有属性和方法 
var 对象名 = new Object();
//为对象添加属性
对象名.属性名 = 属性值;
//为对象添加方法
对象名.方法名 = function {    方法体; };
//调用属性和方法 
对象名.属性名 或 对象名['属性名']
对象名.方法名

• 使用构造函数，模拟类的定义，相当于自定义了一个类型

function 构造函数名(形参1，形参2，....){//为了区别于普通函数，构造函数名建议首字母大写
    this.属性名 = 形参1;
    this.属性名 = 形参2；
    this.方法名 = function(){
        方法体;
    };
}

• 使用JSON格式定义对象，一般只在JSON对象中定义属性

var JSON对象 ={ 
    属性名:属性值,//属性名和方法名可不用加引号
    属性名:属性值,  
    ...
}

六、DOM操作

1.DOM简介

Document Object Model 文档对象型

浏览器加载html文档，会将html文档解析为一个树形结构，称为DOM树

• html文档和DOM树是一一对应的关系
• 当DOM树被改变时，与之对应的html文档也会随之变化
• 当需要对html文档中的内容进行动态改变时，可以使用DOM来进行操作
• DOM提供了一组用来操作html文档的API，即提供了一套属性、方法和事件
• 树上的每一个节点都是一个DOM对象。，树的顶层称为Document对象，表示整个文档

2.查询操作

即获取DOM对象

方法和属性	含义
document.getElementById(“id值”)	根据id属性来查询节点，返回匹配的第一个节点
document.getElementsByName(“name属性值”)	根据name属性来查询
document.getElementsByTagName(“标签名”)	根据标签名来查询，返回所有匹配的节点集合
document.querySelector(“选择器”)	根据CSS选择器来查询，返回匹配的第一个节点
document.querySelectorAll(“选择器”)	根据css选择器来查询，返回所有匹配的节点集合
parentNode属性	查询当前节点的父节点
previousSibling属性	查询当前节点的上一节点
nextSibling属性	查询当前节点的下一个节点
firstChild	查询当前节点的第一个节点
lastChild属性	查询当前节点的最后一个节点

3.访问操作

3.1 访问属性

即获取/设置DOM对象属性

DOM对象的属性和html标签的属性几乎是一样的，一般情况下，DOM对象都会存在一个与对应html标签同名的属性

用法：DOM 对象.属性

3.2 内容访问

即获取设置标签中的内容

两种方式：

• 使用innerHTML

  用法：DOM对象.innerHTML 即内容解析为HTML

• 使用innerText

3.3访问CSS

即获取/设置CSS样式

两种方式：

• 使用style属性

​ 用法：DOM.style.样式属性

• 使用classname

​ 用法：DOM对象.className

4.添加操作

方法	含义
document.createElement(“标签名”)	创建一个元素节点，也就是创建一个标签
document.createTextNode(“文本内容”)	创建一个文本节点，标签中的文本内容
li.appendChild(newNode)	将一个新的节点newNode添加到指定的节点Node中子节点的末尾
node.insertBefore(newNode,refNode);	将一个新的节点newNode插入到Node节点中子节点refNode前面
node.replaceChild(newNode,refnode);	用一个新的节点newNode替换原有的Node节点refnode

5.删除操作

方法	含义
node.remove	删除当前节点
node.removeChild(refNode)	删除当前节点中指定的子节点