JavaScript基本使用

JAVAScript

简介：一种客户端脚本语言
组成：ECMAScript+BOM+DOM
作用：用于静态页面的美化；

导入

1、当前页面直接编写

<script>
    alert("nihao!");
</script>

2、在js文件中写javaScript代码，之后将js文件导入

注意加载顺序：页面由上到下加载，要想使用就要在使用之前加载（即同一个页面加载有上下之分）

js文件

alert("hello!");

当前页面导入

<script src="js/myjs.js"></script>

注释

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

输入输出语句

prompt("弹框数据框);
alert(“弹框提示信息”);
console.log(“控制台输出”);
document.write(“页面输出”);（无自动换行）

变量和常量

1、js里面定义变量不去风数据类型，直接赋值即可；
2、变量类型
3、常量

<script>
    //局部变量
    {
        let a=1;
        document.write(a);
    }
    //全局变量
    var b = 2;
    document.write(b);
    //常量，常量是局部变量
    const f = 1;
    alert(f);
</script>

数据类型

1、String
2、boolean
3、number
4、underfined
5、object
6、function；函数也可以作为数据类型
7、NaN；一种不是数字的数字类型(与任何值比较都为false，包括自己，isNaN()专门用于判断是否为NaN类型)
获取变量类型typeof(变量名);

<script>
    let a ="dahjdo";
    document.write("数据类型"+typeof(a)+"<br/>");
    let b =1;
    document.write("数据类型"+typeof(b)+"<br/>");
    let c = null;
    document.write("数据类型"+typeof(c)+"<br/>");//object
    let d = true;
    document.write("数据类型"+typeof(d)+"<br/>");//boolean
    let f;
    document.write("数据类型"+typeof(f)+"<br/>");//underfined
    document.write("数据类型"+typeof(NaN)+"<br/>");//number
</script>

运算符

算数运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YSs1aDMe-1592966835484)(C:\Users\computer\AppData\Local\Temp\1592648993867.png)]

赋值运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fKH0cFQ0-1592966835492)(C:\Users\computer\AppData\Local\Temp\1592649028721.png)]

比较运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8pr0K1ih-1592966835497)(C:\Users\computer\AppData\Local\Temp\1592649058616.png)]

和=区别

let s1 = 5;
let s2 = "5";
document.write((s1 == s2) + "<br/>");  //true 比较值是否相等
document.write((s1 === s2) + "<br/>");  //恒等于，既比较值，又比较类型
document.write((s1!=s2) + "<br/>");  //false
document.write((s1!==s2) + "<br/>");  //恒不等于 true

逻辑运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3SJbPhEg-1592966835502)(C:\Users\computer\AppData\Local\Temp\1592649149214.png)]

三元运算符

判断条件 ？为真的值：为假的值

流程控制和循环语句

if语句
switch语句
for循环
while循环

<script>
    //if语句
    if(1<2){
        document.write(1 + "<br/>");
    }else{
        document.write(2 + "<br/>");
    }
    document.write("======================" + "<br/>");
    //switch语句
    switch(2){
        case 1:
            document.write(1 + "<br/>"); 
            break;
        case 2:
            document.write(2 + "<br/>");
            break;
        default:
            document.write(2 + "<br/>");
            break;
    }
    document.write("======================" + "<br/>");
    //for循环
    for (let i = 0; i < 10; i++) {
        document.write(i + "<br/>");
    }
    document.write("======================" + "<br/>");
    //while循环
    var i = 0;
    while(i<10){
        i++;
        document.write(i + "<br/>");
    }
</script>

if判断中可以填入其他类型

				真       假
number      	非0      0
string     		非空串   空串 ""
object      	非空     null
undefined            永远为假
NaN (Not a Number)   永远为假

数组

JavaScript中数组长度和类型都不固定；

<script>
    let arr = [4,5,6];
    document.write(arr[3]+"<br/>");
    arr[5] = "djai";
    document.write(arr+"<br/>");//4,5,6,,,djai
    document.write(arr.length+"<br/>");//6,显示已赋值长度，从最后一个赋值索引算
    document.write("==============<br>");
    //运算符...
    //复制数组
    let arr2=[...arr];
    document.write(arr2+"<br/>");
    //合并数组
    let arr3 = [...arr,...arr2];
    document.write(arr3+"<br/>");
    //转转换字符串为数组
    let arr4=[..."heima"];
    document.write(arr4+"<br/>");//h,e,i,m,a
</script>

函数

函数中，传入参数不需要写类型，返回值可有可无；
匿名函数一般用于后期学的事件；（function(){},不命名）

<script>
    function fun01(){
        document.write("无参无返回值;"+"<br/>");
    }
    fun01();//调用
    function fun02(){
        let a = 2;
        return a;
    }
    let b = fun02();
    document.write("无参有返回值;"+b+"<br/>");
    function fun03(x,y){
        let c = x+y; 
        return c;   
    }
    let d = fun03(1);
    document.write("有参有返回值;"+d+"<br/>");
    function fun04(...abs){
        let e = abs[0]; 
        return e;   
    }
    let f = fun04(1,2);
    document.write("有可变参有返回值;"+f+"<br/>");
	function fun05(){
        document.write("函数作为参数"+"<br/>");
    }
    function fun06(a){
        a;
    }
    fun06(fun05());
</script>

注意事项

1、在JS中没有函数的重载，后面出现的同名函数会覆盖前面的同名函数
2、实参个数与形参的个数无关，只会按函数名字去调用
3、在每个函数的内部都有一个隐藏的数组，名字叫arguments

隐藏数组的执行过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vj3cHhIE-1592966835507)(C:\Users\computer\AppData\Local\Temp\1592651344764.png)]

DOM

文档对象模型；
其中包括：元素对象（element）、属性对象（attribute）、文档对象(text);

Element元素

获取

方法	说明
getElementById()	根据id值获取元素
getElementsByClassName()	根据class属性值获取一个元素对象数组
getElementsByName()	根据name属性值获取一个元素对象数组
getElementsByTagName()	根据标签名获取一个元素对象数组
parentElement:这是一个属性	获取当前元素的父元素

增删改

方法	说明
createElement(标签名)	创建新元素
appendChild(子元素)	新增子元素到父元素，父元素调用
removeChild(子元素)	通过父元素删除子元素，父元素调用
replaceChild(新元素)	新替换旧

remove()方法（自己删除自己）只在有些浏览器中生效，所以不；

attribute属性

方法	说明
setAttribute(属性名，值)	添加属性
getAttribute(属性名)	获取属性
removeAttribute(属性名)	删除属性
style属性	添加样式
className属性	添加指定样式

<style>
    .b{
        color:blue;
    }
    
</style>
<body>
    <a>点我</a>
</body>
<script>
    let el = document.getElementsByTagName("a")[0];
    el.setAttribute("id","a");

    let i = el.getAttribute("id");
    console.log(i);

    el.removeAttribute("id");

    // el.style.color="red";

    el.className="b";
</script>

text文本

方法	说明
innerText	添加文本
innerHTML	添加标签和文本

<script>
    var div1 = document.getElementById("div1");
    // div1.innerHTML = "<input type='text'>";  //将文本替换为一个文本框
    div1.innerHTML += "<input type='text'>";   //追加一个文本框
</script>

事件

某些组件执行了某些操作后（如点击，按键等），会触发某些代码的执行；

常用事件

事件	说明
onload	某个页面或图像被加载完成
onsubmit	当表单提交时触发
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onbchange	用户改变内容

<script>
	var in_id = document.getElementById("in_id");
	in_id.onblur = function () {
	    alert("失去焦点。。。");
	}
</script>

了解事件

事件	说明
onkeydown	某个键被按下
onkeypress	某个键被按下或按住不放
onkey	某个键被松开
onmousedown	某个鼠标按键被按下
onmouseup	某个鼠标按键被松开
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

使用函数什么时候加();

onclick属性实际上就是一个函数变量；其可以接受：普通函数名、匿名函数的变量名、匿名函数；

JavaScript面向对象

类定义

第一种方式（了解，无限类似JAVA）

<script>
	class 类名{
	//构造方法
	    constructor(属性1，属性2){
	        this.field1 = 属性1；
	        this.field1 = 属性2；
	    }
	    方法名(参数...){
	        方法体；
	        return；
	    }
	}
	//使用
</script>

第二种方式：字面量定义；实际是直接创建对象使用

<script>
    let person = {
        name : "张三",
        age :23，
        hobby ： ["听课","学习"],
        eat : function(){
        	document.write("吃饭！");
    	}
    }
    //使用
    变量民.字段；
</script>

继承(了解)；让类与类产生子父类关系，使子类可以使用父类权限变量；（与java类似）

内置对象

javaScript中提供的带有属性和方法的特殊数据类型；

Number

方法名	说明
parseFload()	将传入的字符串浮点数转为浮点数
parseInt()	将传入的字符串整数转为整数（从数字开始，在不是数字处停止）
isNaN()	判断是否为NaN

Math

成员方法	说明
ceil()	向上取整
floor()	向下取整
round()	四舍五入
random()	随机数，[0.0,1.0）
pow(x,y)	x的y次方

Date

构造方法	说明
Date()	根据当前时间创建对象
Date(value)	根据指定毫秒值创建对象
Date(year,month,[dat,hours,minutes,seconds,millisecond])	根据指定字段创建对象（月份0~11）

成员方法	说明
getFullYear()	获取年份
getMonth()	获取月份
getHours()	获取小时
getMinutes()	获取分钟
getSeconds()	获取秒数
getTime()	返回从1970年1月1日0时起至今的毫秒值
toLocalString()	返回当地日期格式的字符串

String

成员方法	说明
length属性	获取字符串长度
charAt(index)	获取指定索引处的字符
indexOf(value)	获取指定字符串出现的索引位置
substring(start,end)	根据指定索引范围截取字符串（含头不含尾）
split(value)	根据指定规则切割女字符串，返回数组
replace(old,new)	使用新字符串替换老字符串

RegExp

构造方法	说明
RegExp(规则)	按指定规则创建对象
let reg=/^规则$/	直接赋值（^代表开头；$代表结束）

成员方法	说明
test(匹配字符串)	验证字符串是否符合规则

常用规则

表达式	说明
[a]	只能是a
[abc]	只能是abc中的某一个
[1]	只能是1
[123]	只能是123中的某一个
[a-z]	可以是a到z中的某一个
[A-Z]	可以是A到Z中的某一个
[0-9]	可以是0到9中的某一个
{5}	只能出现5次
{4,6}	只能出现4到6次

Array

成员方法	说明
push(元素)	添加元素到数组的末尾
pop()	删除数组末尾的元素
shift()	删除数组最前面的元素
include(元素)	判断数组中是否包含指定对的元素
reverse()	反转数组元素
sort()	对数组元素排序

set(了解)

元素唯一，存取顺序一致，即元素有序（和java不同）

构造方法	说明
Set()	创建set集合对象

成员方法	说明
add(元素)	向集合中添加元素
size属性	获取长度
keys()	获取迭代器对象
delete(元素)	删除指定元素

map(了解)

key唯一，存取顺序一致

构造方法	说明
Map()	创建Map集合对象

成员方法	说明
set(key,value)	向集合中添加元素
size属性	长度
get(key)	通过key获取值
entries()	获取迭代器对象
delete(key)	通过key删除元素（成功true，失败false）

JSON

一种轻量级数据交换格式；
json字符串是一种规范。在不同语言中都有对应实现；
简洁易读，也便于计算机解析，极大地提高了数据的传输效率；
格式：

{"city":"北京","date":"2088-08-08","shidu":"22%","wendu":"10° ~ 23°"}

语法

方法	说明
stringify(对象)	将相应对象转换为json格式字符串
parse(字符串)	将json格式字符串转为js对象

Json | JS对象 | java Map | java 对象

1、json对象，key和value对应的字符串格式
2、js对象，也是kv形式存储，多了方法；
3、map；以kv形式存储数据
4、java对象；变量也是以kv形式存储，多了方法；

共同点

均有以key和value形式存储的数据；所以相互之间有方法可以转化

BOM

浏览器对象模型；
将浏览器各个部分封装成不同的对象，方便我们操作；
Navigtor:浏览器对象
Window窗口对象；（主要使用）
Location：地址栏对象；（主要使用）
History：历史记录对象；（只包含当前窗口的历史记录）
Screen：显示器屏幕对象；

Window窗口对象

其他对象均是该对象的属性；使用时可以省略前面的window；如：
location == Window.location；

定时器

方法	说明
唯一标识 setTimeout(功能，毫秒值)	设置一次性定时器
clearTimeout(标识)	消除设置的一次性定时器
唯一标识 setInterval(功能，毫秒值)	设置循环定时器
clearInterval(标识)	消除循环定时器

<script>
    //一次性计时器
    // setTimeout("alert('你好')",2000);//传入js代码
    /*var id = setTimeout(fun,2000);//传入方法
    clearTimeout(id);//取消计时*/
    function fun(){
        alert("hello");
    }

    //循环计时器
    var id = setInterval(fun,2000);
    clearInterval(id);
</script>

加载事件

window.onload；当前页面全部加载完毕触发某事件；

Location地址栏对象

href属性

用于设置要跳转的URL；

<script type="text/javascript">
    //1. 获取属性值，得到当前访问的地址
    //document.write(location.href + "<br/>");
    //2. 设置属性值，跳转到指定的页面
    //location.href = "http://www.itcast.cn";

    //获取?后面的参数字符串
    //document.write(location.search + "<br/>");

    //显示现在的时候
    document.write(new Date().toLocaleString() + "<br/>");
</script>

;//传入方法
clearTimeout(id);//取消计时*/
function fun(){
alert(“hello”);
}

//循环计时器
var id = setInterval(fun,2000);
clearInterval(id);

```

加载事件

window.onload；当前页面全部加载完毕触发某事件；

Location地址栏对象

href属性

用于设置要跳转的URL；

<script type="text/javascript">
    //1. 获取属性值，得到当前访问的地址
    //document.write(location.href + "<br/>");
    //2. 设置属性值，跳转到指定的页面
    //location.href = "http://www.itcast.cn";

    //获取?后面的参数字符串
    //document.write(location.search + "<br/>");

    //显示现在的时候
    document.write(new Date().toLocaleString() + "<br/>");
</script>