JavaScript基础学习--第一部分

JS简介

• 什么是JS  --  JavaScript的简称，是一种动态脚本语言。可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
• 什么是动态页面  --  人机交互     静态页面  --  没有人机交互
• JS需要安装才能使用吗？  --  不需要
• 什么是BOM  --  浏览器对象模型   DOM  --  文档对象模型
• 详细介绍：

1. JavaScript是一种基于对象和事件驱动的客户端脚本语言，最初的设计是为了检验HTML表单输入的正确性，起源于Netscape公司的Livescript语言

2. JavaScript的组成：ECMAsxcript（语法）、Browser Objects(DOM   BOM  特性)组成

JavaScript的标识符

1. 什么是标识符  --  变量、函数、属性的名字，或者函数的参数。
2. 标识符的命名规则

• 由字母、数字、下划线(_)或者美元（$）组成
• 不能以数字开头
• 不能使用关键字，保留字作为标识符

使用script标签在HTML中插入JavaScript，编写内部JavaScript

引用外部JS文件

 

JS变量

1. 与其他程序设计语言相同，用来临时存储信息
2. 创建方法如下： 弱数据类型

1. 1. var x=1;      var x=2,name="zhangsan";        
   2. var x;  x=1;      var name;   name="lisi";

1. 注意：Js中的变量，区分类型，但是没有int之类的关键词

JS调试

1. alert()弹框调试、console.log控制台输出调试  【输出在页面中document.write()】
2. 观察变量值的变化规律，是否符合程序设计的目的
3. 语法：

alert(flag);
console.log(flag);

 

JS自定义函数

1. JavaScript函数：自定义函数、内置函数
2. 自定义函数：是完成某一个功能模块的代码段，可以重复执行，方便管理和维护。
3. 创建方法：

 

     1、这种是函数声明，可以先使用后定义。

 

function fun1(){
  代码段;
  return;
}

     2、这种叫做：函数表达式，必须先定义后使用 

var fun1 = function(x){
  return x+1;
}

JavaScript数据类型

1. ECMAScript：

     a.   简单数据类型：

                     1、 undefined

                     2、 null

                     3、 boolean

                     4、 number

                     5、 string

 b. ECMAScript6:  es6   新增symbol数据类型

 c.  复杂数据类型：Object  -- 对象

 

1、number  --  数字类型，整型、浮点型都包括。

2、string  --  字符串类型，必须放在单引号或者双引号中

3、boolean  --  布尔类型，只有true和false  2种值(布尔常用在条件测试中)

4、undefine  --  未定义，一般指的是已经声明，但是没有赋值的变量,派生自null值，     undefined==null    ---->   返回的是true

全等（===）和不全等（==）

null==undefined会返回true，因为它们是类似的值；但null===undefined会返回false,因为它们是不同类型的值。

5、null  --  空对象类型，var a = null(释放指向对象的引用);  和  var a = "";有区别；

null 和 undefined 的值相等，但类型不等：

typeof undefined             // undefined

typeof null                  // object

null === undefined           // false

null == undefined            // true

var a;    // a 自动被赋值为 undefined

 

特殊类型

1. object  --  对象类型，在js中常见的window  document  array等
2. NaN  --  非数字类型，是Number的一种特殊类型，isNaN() 如果是数字  返回false  不是数字  返回true
3. isNaN()   --  说明：对接受的数值，先尝试转换为数值，再检测是否为非数值。

        它是判断一个值能否被 Number() 合法地转化成数字。

        null、空字符串""、空数组[],都可被Number()合法的转为0,于是被isNaN认为是数,返回false。

        undefined、空对象{}、空函数等无法转数字，返回true

        Number(true)=1,Number(false)=0，所以isNaN对布尔值也返回false

      4. 任何涉及NaN的操作（例如NaN/10）都会返回NaN

      5.  NaN与任何值都不相等，包括NaN本身。

var id="16";
console.log(isNaN(id));//false   转换之后是数字

var id="lisi";
console.log(isNaN(id));//true   转换之后不是数字

 

type of

1. 功能：检测变量类型
2. 语法：typeof    变量   或者  typeof(变量)

  返回值：string  number    boolean   object  undefined   function

typeof "John"                 // 返回 string

typeof 3.14                   // 返回 number

typeof NaN                    // 返回 number

typeof false                  // 返回 boolean

typeof [1,2,3,4]              // 返回 object

typeof {name:'John', age:34}  // 返回 object

typeof new Date()             // 返回 object

typeof function () {}         // 返回 function

typeof myCar                  // 返回 undefined (如果 myCar 没有声明)

typeof null                   // 返回 object

• NaN 的数据类型是 number
• 数组(Array)的数据类型是 object
• 日期(Date)的数据类型为 object
• null 的数据类型是 object
• 未定义变量的数据类型为 undefined

 

类型转换

1. parseInt() - 转换成整型  parseFloat() - 转换成浮点类型，带小数点  

         Number() - 包括整数和小数  可以将字符串转换为数字。

                                                    字符串只包含数字(如 "3.14") 转换为数字 (如 3.14).

                                                    空字符串转换为 0。

                                                    其他的字符串会转换为 NaN (不是个数字)。

                                                    可将布尔值转换为数字。

                                                    (Number(false)     // 返回 0            Number(true)      // 返回 1)

         Boolean() - 转换成逻辑类型(布尔常用在条件测试中)

                         null、空字符串""、 undefined、0, 返回false

                         有值的 返回 true

使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

 

• 如果一个参数值不能转换为一个数字将返回 NaN (非数字值)。
• 强制类型转换       隐式类型转换
• 案例演示
• 

1. 总结：
   1. 除0之外的所有数字，换换成布尔型都是true
   2. 除""之外的所有字符，转换成布尔型都是true
   3. null和undefined转换成布尔型是false

变量作用域

1. 全局变量和局部变量
   1. 局部变量：在函数内部创建的变量，称为局部变量，其他函数不能使用。
   2. 全局变量：在函数外部创建的变量，称为全局变量，在函数之间可以共享使用。

比较运算符

1. 比较运算符：用于比较两个值，结果true或者false
2. 运算符的范围：  >   >=    !=   <   <=
3. 实例：x < 10为true   //x=2

 

比较运算符增加知识点

==：相等，只比较值是否相等。

===：全等，比较值得同时比较数据类型是否相等。

！=：不相等，比较值是否不相等。

！==：不全等，比较值得同时比较数据类型是否不相等。

返回都是boolean类型

 

逻辑运算符

1. 包含逻辑与   或  非   等，结果是true或者false
2. &&   （and） /     ||    （or）   /   !  （非）
3. 例如(x<10&&y>1)    x=2以及y=5    返回true
   1. 对于&&  两个都是true结果是true，如果有一个false结果是false
   2. 逻辑与&&两边布尔值！==，返回布尔值为false的值
   3. 整个求值的结果都为true，那么则返回最后一个布尔值为true的表达式的值
   4. 对于||    ，其中一个是true结果就是true，两个都是false结果才为false
   5. 逻辑或|| ，遇到布尔值true，则返回该值,后面就不读取了
   6. 布尔值都为false，读取到最后一个，返回最后一个值

三目运算符  --  三元运算符

1. 根据不同的条件，执行不同的操作/返回不同的值
2. 格式：条件?"值1":"值2"；(值1表示true满足条件返回的值，值2表示false不满足条件返回的值）
3. 实例：x>1?"大于":"小于";

算数操作符

1. +  加
2. -  减
3. *  乘  
4. /  除
5. %  取余

 

递增和递减

1. 递增   ++a  与  a++   都是对a进行递增的操作
2. 区别
   1. ++a先返回递增之后的a的值   --  先运算（++a=a+1）再赋值（进行当前运算）
   2. a++ 先返回a的原来的值，再返回递增之后的值  --  先赋值（a，进行当前运算）再运算（a++=a+1赋值给下一级相同变量a）
   3. --a/a--递减同理

赋值运算符

1. 简单赋值    =
2. 复合赋值   +=  -=   *=    /=  %=
3. 例如：a+=b  -->  a=a+b

运算符的优先级

1. （）   小括号      --    优先级高
2. ++  --   自加  自减
3. *   /    %  乘  除  取余
4. +  -   加  减
5. <  <=   >  >=   逻辑运算
6. ==   !=   等于  不等于
7. &&  逻辑与
8. ||   逻辑或
9. 条件?"值1":"值2"     三目运算符
10. =   赋值     --     优先级低

 

程序控制语句

1. 条件判断控制语句

if(判断条件){
}else{
}

      多重if嵌套控制语句 

if(判断条件){
}else{
  if(){
  }else{
  }
}

    2.  多条件分支类控制语句演示

//成绩是100分，显示满分
//成绩大于等于90，显示优秀
//成绩大于等于70，显示良好
//成绩大于等于60分，显示及格
//否则，不及格
var myscore=55;
var str;
var n=parseInt(myscore/10);
switch(n){
    case 10:
        str="manfen";
        break;
    case 9:
        str="youxiu";
        break;
    case 8:
    case 7:
        str="lianghao";
        break;
    case 6:
        str="jige";
        break;
    default:
        str="bujige";
        break;
}

 

 

循环类控制语句

1. for循环
2. while循环
3. do-while循环

 

//for循环
//1+2+3+4+5+。。。。+100=5050
var i;
var sum=0;
for(i=0;i<=100;i++){
    //sum=sum+i;
      sum+=i;
}
console.log(sum);

 

//1+2+3+4+5+。。。。+100=5050
//while循环是先判断条件，条件满足了再继续执行
var i=0;
var sum=0;
while(i<=100){
    sum=sum+i;
    i++;
}
console.log(sum);

 

//1+2+3+4+5+。。。。+100=5050
// do-while:  先执行一次，执行完之后再进行判断
var i=0;
var sum=0;
do{
    sum=sum+i;
    i++;
}while(i<=100);
console.log(sum);

 

弹出输入框

1. 语法：prompt();
2. 弹出输入框
3. 返回值：
   1. 点击确定，返回输入的内容
   2. 点击取消，返回null

 字符串的长度

1. 语法：string.length
2. 功能：获取string字符串的长度
3. 返回值：number

内置函数

1. 字符函数
2. 日期函数
3. 数学函数
4. 转化函数

var str = "520134199906061234";
//两个参数,索引从0开始，截取到0
//第一个参数表示从哪儿开始，第二个参数表示截取的长度
console.log(str.substr(0,3));
console.log(str.substr(1,3));
console.log(str.substr(3,6));//起始位置 长度

//两个参数,索引从0开始
//第一个参数：起始位置，第二个参数表示：结束位置，算前不算后
console.log(str.substring(0,3));//520
console.log(str.substring(6,10));//1999
console.log(str.substring(6,11));//起始位置   结束位置



var str="Hello world!";
// console.log(str.substr(0,5));//Hello
// console.log(str.substring(0,5));//Hello

console.log(str.substr(3));//一个参数表示索引位置，截取到最后
console.log(str.substring(3));//一个参数表示索引位置，截取到最后


//charAt()获取字符串  但是根据索引位置获取
var str = "520134199906061234";
console.log(str.charAt(16));//3
var n = parseInt(str.charAt(16));
if (n%2 == 0) {
    console.log("nv");
} else {
    console.log("nan");
}



console.log(str.length);//获取字符串的长度


//indexOf()  参数：索引位置  查找1在str字符串中的第一次出现的位置
//索引从0开始
console.log(str.indexOf(1));//3

//两个参数表示  从索引位置4开始查找，找索引位置4后面的1出现的位置（索引1在位置4后面出现的位置）
console.log(str.indexOf(1,4));//6

//有一个自动类型转换  可以加上""
console.log(str.indexOf("1",4));//6


var str="Hello world!";
//返回某个指定的字符串值在字符串中首次出现位置
document.write(str.indexOf("Hello")+"
");//0
//如果某个指定的额字符串在源字符串中不存在，返回-1
document.write(str.indexOf("wwww")+"
");//-1
//返回某个指定的字符串值在字符串中首次出现位置
document.write(str.indexOf("world"));//6
//document.write可以解析html标签
// document.write("
渡课
");


//split  --  将字符串有规律的转换成数组  [11,22,33556,0]
// var str = "aa,ttt,121,gg,kk,aa,bb";
// var arr = str.split(",");
// console.log(arr);
// console.log(arr[7]);

var str = "How are you";
console.log(str.split(" ",2));



var str = "aa,ttt,121,gg,kk,aa,bb";
var arr = str.split(",");
console.log(arr);
console.log(arr[0]);
//concat -- 既可以连接字符串，也可以连接数组
console.log(str.concat(",55",",77",",00"));
console.log(arr.concat("55","77","00"));



//replace:替换(配合正则表达式)
//如下写法只会替换第一个符合要求的字符串
var str = "aa,ttt,121,gg,kk,aa,bb";
console.log(str.replace("aa","dodoke"));

//全部替换的功能
console.log(str.replace(/aa/g,"dodoke"));

 

 

日期函数

1、日期函数：

(1) Date  getDate  getDay  getMonth  getFullYear （getYear） getHours  getMinutes  getSeconds

//2020-5-20 15:58   日期格式化
function fun_FmtDate(){
    var d1 = new Date();
    var yyyy,mm,dd,hh,mi,ss;
    var time;
    //逻辑代码
    yyyy=d1.getFullYear();
    mm=d1.getMonth()+1;
    dd=d1.getDate();
    hh=d1.getHours();
    mi=d1.getMinutes();
    ss=d1.getSeconds();
    time=yyyy+"-"+mm+"-"+dd+" "+hh+":"+mi+":"+ss;
    return time;
}
console.log(fun_FmtDate());

 

 

数学函数

1、数学函数

(1) Math.round  max  min  abs

//数学函数
var n = 16.654789;
console.log(Math.round(n));//js中round只能取整数，不能保留小数，遵循四舍五入。
//保留小数   遵循四舍五入
console.log(n.toFixed(2));
console.log(n.toFixed(0));//17
//取最小
console.log(Math.min(2,6,81,1));
//取最大
console.log(Math.max(2,6,81,1));
//取绝对值
console.log(Math.abs(-3));
console.log(Math.abs(5));

数组 

//声明或者创建一个不指定长度的数组，又称之为实例化创建
var arrayObj = new Array();
//声明或者创建一个数组并指定长度的数组
var arrayObj = new Array(5);
//声明或者创建一个带有默认值的数组
var arrayObj = new Array(2,4,"a","y",8);
//创建一个数组并赋值的简写，又称之为隐式创建数组
var arrayObj = [2,4,"a","y",8];
console.log(arrayObj);
console.log("数组arrayObj的长度为："+arrayObj.length);
//数组的赋值，字符索引下标，数组的遍历
console.log(arrayObj[0]);//2
console.log(arrayObj[4]);//8
console.log(arrayObj[5]);//undefined
for(var i in arrayObj){
    // console.log(i);//获取的是索引值
    console.log(arrayObj[i]);
}

var i;
var n=arrayObj.length;
for(i=0;i

数组的栈方法

1. push()
2. unshift()
3. pop()
4. shift()

push()

1. 把它的参数顺序添加到数组的尾部
2. arr.push(l1,l2...)
3. 返回值：把指定添加到数组后的新长度。number

 

unshift()

1. 把它的参数顺序添加到数组的头部
2. arr.unshift(l1,l2...)
3. 返回值：把指定添加到数组后的新长度。number

 

pop()

1. 删除arrayObj的最后一个元素
2. 语法：arr.pop()
3. 返回值：被删除的那个元素

 

shift()

1. 删除arrayObj的第一个元素
2. 语法：arr.shift()
3. 返回值：被删除的那个元素

数组的方法

join()

1. 用于把数组中的所有元素放入一个字符串
2. 语法：arr.join("  "),可以自定义转换后的字符串分隔符
3. 返回值：字符串

reverse()

1. 用于颠倒数组中的元素的顺序
2. 语法：arr.reverse()
3. 返回值：数组

sort()

1. 用于对数组的元素进行排序（依据数值的首位字母或数字进行从小到大排序）
2. 语法：arr.sort()
3. 返回值：数组
4. 说明：
   1. 即使数组中每一项都是数值，sort()方法比较的也是字符串
   2. sort()方法可以接收一个比较函数作为参数

sort()

1. 用于对数组的元素进行排序（依据数值的首位字母或数字进行从小到大排序）
2. 语法：arr.sort()
3. 返回值：数组
4. 说明：

1. 1. 即使数组中每一项都是数值，sort()方法比较的也是字符串
   2. sort()方法可以接收一个比较函数作为参数

sort()

1. 用于对数组的元素进行排序（依据数值的首位字母或数字进行从小到大排序）
2. 语法：arr.sort()
3. 返回值：数组
4. 说明：
   1. 即使数组中每一项都是数值，sort()方法比较的也是字符串
   2. sort()方法可以接收一个比较函数作为参数

（a-b从小到大，b-a从大到小排序）

 

数组操作方法

concat()

1. 用于连接两个或多个数组
2. 语法：arr.concat(arr1,arr2...)
3. 返回值：数组

slice()

1. 从已有的数组中返回选定的元素
2. 语法：arr.slice(start,end)  --  截取
3. 参数：
   1. start -- 必须  规定从何处开始选取，如果是负数，从数组的尾部开始算起,                                                                                           只有start值，表示从索引位置开始截取到最后
   2. end  --  可选  规定从何处结束选取，是数组片段结束处的数组下标
   3. start和end指的是数组中的索引值
   4. 截取从start到end（不包含的元素），正确的是从start到end-1的元素  -- 算前不算后
4. 返回值：数组

 

DOM基础

1. JavaScript由ECMAScript+DOM+BOM组成的。
2. DOM:   DOCUMENT OBJECT MODEL(文档对象模型)的缩写

掌握基本的DOM查找方法

• document.getElementById()  --  根据id获取唯一的一个元素
• document.getElementsByTagName()  --  返回所有的tag标签引用的集合  --  返回的是数组
• document.getElementsByName()  --  返回所有的name属性引用的集合  --  返回的是数组
• document.getElementsByClassName()  --  返回包含带有指定类名的所有元素的集合  --  返回的是数组

设置元素的样式（css）

1. 语法：ele.style.styleName = styleValue
2. 功能：设置元素的样式
3. 说明：
   1. ele表示要设置样式的DOM对象
   2. styleName表示要设置的样式名称  --  使用驼峰命名方式  --  fontSize
   3. styleValue  --  要设置的样式的值

innerHTML

1. 语法：ele.innerHTML
2. 功能：返回ele元素开始和结束标签之间的HTML
3. 语法：ele.innerHTML=“html”
4. 功能：设置ele元素开始和结束之前的HTML内容为html

className

1. 语法：ele.classname
2. 功能：返回ele元素的class属性
3. 语法：ele.classname = "cls"
4. 功能：设置ele元素的class属性为cls

 

设置DOM元素属性或添加属性

获取属性

1. 语法：ele.getAttribute("attribute  ")
2. 功能：获取ele元素的属性
3. 说明;
   1. ele  --  要操作的DOM对象
   2. attribute  --  是要获取的html属性（id  type class）

设置属性

1. 语法：ele.setAttribute("attribute",value)
2. 功能：在ele元素上设置属性
3. 说明：
   1. ele  --  要操作的dom对象
   2. attribute  --  要设置的属性名称
   3. value  --  要设置的attribute属性值  

删除属性

1. 语法：ele.removeAttribute（“attribute”）
2. 功能：删除ele元素上的attribute属性
3. 说明：
   1. ele  --  要操作的对象
   2. attribute  --  要删除的属性名称

删除属性值

 

JavaScript对表单元素进行设置

JavaScript对表单操作分为三种：初始化   赋值   取值

 

DOM事件

事件

1. 就是文档或者浏览器窗口中发生的一些特定的交互瞬间。

HTML事件

1. 直接在HTML元素标签内添加的事件，执行脚本。
2. 语法：
3. 功能：在html元素上绑定事件
4. 说明：执行脚本可以是一个函数的调用

鼠标事件

1. onload  --  页面加载时触发
2. onclick  --  鼠标点击时触发cu
3. onmouseover  --  鼠标滑过时触发
4. onmouseout  --  鼠标离开时触发
5. onfocus  --  获得焦点时触发   --  input标签type为text  password  /  textarea标签
6. onblur  --  失去焦点时触发
7. onchange  --  域的内容发生改变时触发  --  一般作用在select、chaecbox、radio
8. onsubmit事件  --  表单中的确认按钮被点击时发生  -- 不是加在按钮上而是表单上
9. onmousedown  --  鼠标按钮在元素上按下时触发
10. onmouseup  --  在元素上松开鼠标按钮时触发  --  2和3成就了onclick事件
11. onmousemove  --  在鼠标指针移动时触发
12. onresize  --  当调整浏览器窗口大小时触发
13. onscroll  --  拖动滚动条滚动时触发

键盘事件与keycode属性

1. onkeydown  --      在用户按下一个键盘按键时触发
2. onkeypress  --  在按下键盘按键时发生（只会响应字母和数字符号）
3. onkeyup  --  在键盘按键松开时发生
4. keycode：返回onkeypress   onkeydown  或者onkeyup事件触发的键的值得字符代码，或者键的代码

this的指向

1. 在事件触发函数中，this是对该DOM对象的引用

DOM0级事件

1. 通过DOM获取HTML元素
2. （获取HTML元素）.事件 = 执行脚本
3. 语法：ele.事件 = 脚本
4. 功能：在DOM对象上绑定事件
5. 说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用

总结

• DOM：将文档表现为结构化的表示方法，使得每一个页面元素都是可操控的。DOM将网页和脚本以及其他编程语言联系起来。
• 常见的DOM操作：
• (1) getElementById   返回带有指定的ID元素

• (2) getElementsByTagName  返回的是包含带有指定标签名的所有元素的节点列表

• (3) getElementsByClassName   返回的是包含带有指定类名的所有元素的节点列表

• (4) getElementsByName    获取相同名称（name）的元素的所有节点列表