【前端】JavaScript学习第一次

一、JS介绍

1. 简介

js是指基于对象和事件驱动，运行在浏览器客户端的脚本语言、基于浏览器的脚本语言。

2. 组成

a.ECMAscript：是js的基本语法和数据类型；
b.DOM：页面文档对象模型；
c.BOM：浏览器对象模型；

3. js书写位置

a. 行内式写法

<input onclick="alert('hi')">

b.内嵌式写法（可放到head或body里）

 <script>
     alert('hi');
 </script>

c.联式写法

新建js文件，通过script标签引入

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

4、几种输入输出

输入框：

prompt（‘请输入’）；
返回的值为字符型

弹出警示框：

alert（‘’）；

输出：

console.log（‘’）；

二、变量

1、定义

变量指保存数据的一个容器。

2、声明

var m=0;
console.log(m);

3、变量数据类型

a.简单数据类型

• 数字型 number：整数型、小数型均属于该类型，其中，NaN表示为一个非数值

isNaN（）判断非数字并返回一个值，若是数字则返回false，否则返回true

• 字符串型 string：用引号包括

若引号有嵌套，则内双外单或相反。
其中，var str=‘’；可以用str.length获取字符串长度。
字符串拼接是conlose.log(‘’ + ‘’);
若布尔型参与加法运算，true=1；flase=0.

• undefined型

undefined+数字型 结果为nan
undefined+‘字符型’ 结果为字符串连接

• null 空值

null+字符串 为字符串连接
null+数字型 为数字型
null返回的为空对象

• 布尔型 boolean

返回值为true或false

有一个特殊的函数typeof，可用来判断数据类型。

console.log(typeof age); 

4、数据类型转换

1. 数字型转换为字符串型
   

可以用toString法；
还可以强制转换；
还可以用num+‘’空字符串。

2. 其他转换为数字型

3. 其余类型转换为布尔型

除了‘’，0，nan，null，undefined外，均为true

三、运算符

1、算术运算符

如+、-、*、/、%等
注意：不能直接判断两个浮点数是否相同。

2、递增、递减运算符

前置递增：++num；先自加后使用
后置递增：num++；先使用后自加

递减同理

3、比较运算符

返回布尔值。如>, <, >=, <=, !=, !==, ==,===等

== 和=== 不同，== 只是数值相同，===是指数值和数据类型全都要一样。

4、逻辑运算符

1. || 或：
   条件只要有一个满足即可，如果条件中有一个结为true(代表有一个条件满足了)，那么通过或运算后最后的结果为true，如果条件中结果都不满足，那么通过或运算后结果为false；

或短路现象 ：1真返回1, 1假返回2。

2. && 与：
   要求所有的条件都必须满足才可以，如果条件都为真（true），那么通过与运算后最后的结果也是真（true），如果条件中自少有一个条件不满足（false），那么通过与运算后的结果为false；

与短路现象：表达式1真，则返回2；表达式1假，返回1。

3. ! 非（取反） :
   对条件取反。

5、赋值运算符

+=，-=，*=，/=，%=等

var a+=b；

等价于a=a+b。

6、优先级

四、流程控制

包括顺序、选择、循环

1、选择语句

a、if语句

b、switch语句

记得break
break和continue区别在于break跳出循环，而continue仅仅跳出当前循环，去执行下一次循环。

c、三元语法

a？b：c；若a判断为true，则返回b，否则返回c

基本语法与c语言相同

2.循环语句

a、while语句

b、do…while语句

两者区别为do while先执行一次再参与循环

c、for循环

基本语法与c语言相同

五、数组

1、创建

a、字面量

var arr=[];

b、空数组

var arr=new Array（）；//空数组

2、数组长度

可以用arr.length判断长度

3、赋值

a、构造函数方式

var ary = new Array（1,2,3,4,5）;

b、字面量方式赋值

var ary = [1,2,3,4,5];

c、索引方式赋值

var ary = [];
ary[0]=1;
ary[1]=2;

4、修改数组

a、修改数组长度

arr.length=n;

b、追加

arr【i】=‘’；

其余基本语法与c语言同

六、函数

1、声明函数

 function 函数名() {
           
        }

2、调用函数

function 函数名（）；

基本语法与c语言同；

3、函数返回值

若有return则返回return值，否则返回undefined

4、arguments函数

是一个伪数组，存储所以传过来的实参。
特性：具有length属性，按照索引存储，但无真正的数组的一些方法。

基本用法同c语言

七、对象

1、创建和调用对象

a、var obj = {}

创建

 var obj = {
            uname : 'zf',  //属性
            age:16,
            sayHi:function() {  //方法

            }
        }

调用

		console.log(obj.age);
        或console.log(obj['age']);//调用属性
        console.log(obj.sayHi());//调用方法

b、var obj = new Object();

var obj = new Object();
        obj.age = 18;
        obj.sayHi = function() {
            
        }
        console.log(obj.age);

c、构造函数

把对象里面一些相同的属性和方法抽象出来封装到函数里。
注意：函数名首字母大写且不需要return

2、遍历对象属性

 for(var k in obj) {
            console.log(k);//得到属性名
            console.log(obj[k]);//得到属性值
        }

3、内置对象

是指设定的函数

a、Math对象

若什么都没有，返回-Infinity，非数字返回NaN

b、随机数Math.random()

不跟参数，返回随机小数，0=<m<1

若想要得到两数之间随机整数，并包含这两个整数

function getRandom(min,max) {
            return  Math.floor(Math.random()*(max-min+1))+1;
        }
        console.log(getRandom(1,10));

c、日期对象

是一个构造函数，必须使用new调用
参数常用写法：数字型 2022,5,19或字符串‘2022-5-19’
获得其毫秒数（从1970.1.1开始）

• 使用时，若没有跟参数

d、倒计时

e、数组对象

1、检测是否为数组

2、添加删除数组元素

3、翻转数组

arr.reverse

4、冒泡排序

5、数组索引

6、数组转换为字符串

join（分隔符）

f、字符串对象

1、某字符出现的位置

2、根据位置返回字符

3、字符串操作方法

拼接concat

截取substr

4、替换字符

replace只会替换第一个字母

5、字符串换为数组

split（‘分隔符’）;

八、DOM

1、获取元素

a、通过ID名

 document.getElementById('');

b、通过标签名

document.getElementsByTagName('');

c、通过父元素获取子元素

Element.getElementsByTagName('');

通过标签名获取
var ol = document.getElementsByTagName(‘ol’);
console.log(ol[0].getElementsByTagName(‘li’));

通过给父元素加id获取
var ol = document.getElementsById(‘ol’);
console.log(ol.getElementsByTagName(‘li’));

d、用class获取

document.getElementsByClassName('');

e、返回第一个元素对象

document.querySelector('选择器');

f、返回所有指定选择器

document.querySelectorAll('选择器');

g、获取body和html元素

 var bodyEle = document.body;
 var htmlEle = document.documentElement;

2、事件

a、组成

1. 事件源（被触发响应的对象）
2. 事件类型（如何触发，什么事件）
3. 事件处理程序（对应的操作，一般通过函数赋值）

b、执行事件步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采用函数赋值形式）

3、鼠标事件