【Web: JavaScript】常用

JavaScript

1、初识JavaScript

什么是JavaScript

JavaScript简称js, 负责给页面添加动态效果的一门编程语言,和Java语言没有关系只是为了蹭Java热度
语言特点:
- 属于脚本语言,不需要编译直接由浏览器解析执行
- 属于弱类型语言:
  - 强类型: int x=10; String s = “abc”; x=“xyz”;报错
  - 弱类型: let x=10; let s=“abc”; x=“xyz”; 不报错
- JavaScript是基于面向对象的语言
- 安全性比较高: JS只能访问浏览器内部数据
- 交互性高: JS语言可以直接嵌入到html页面中在客户端执行,而Java语言需要客户端发出请求之后才能执行到.

2、三种引入方式

三种引入方式:
- 内联:在标签的事件属性中添加js代码, 当事件触发时执行.
  
  事件:系统给提供的一些特定时间点
  
  点击事件: 当用户点击元素时会触发的事件
```
<input type="button" value="按钮" onclick="alert('按钮点击了!')">
```
- 内部: 在页面的任意位置添加script标签,标签体内写js代码
```

<script>
    alert("内部成功!");
</script>
```
- 外部:在单独的js文件中写JavaScript代码,在html页面中通过script标签引入
  
  扫描二维码关注公众号，回复： 12404467 查看本文章
```

<script src="my.js"></script>
```

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--内联引入方式：1、点击事件 onclick:鼠标点击  alert：弹出-->
<input type="button" value="按钮" onclick="alert('点击了')">
<!--2、内部引入方式-->
<script>
    alert("内部成功")
</script>
<!--引入外部js文件  script标签不能同时写代码和引入文件，二者择其一 -->
<script src="my.js"></script>
</body>
</html>

3、JavaScript语法

3.1 变量声明和赋值

JavaScript语言属于弱类型语言
在javaScript语言中通过let(推荐)或var声明变量
java中:

for(int i=0;i<10;i++){

}

int x = i;// 直接报错, 因为出了i的作用域
JavaScript中:

for(var i=0;i<10;i++){

}

var x = i; //不报错,因为使用var声明变量可以理解为声明的是一个全局变量

for(let i=0;i<10;i++){

}

let x = i; //直接报错, 因为出了i的作用域

3.2 数据类型

在javaScript中只有对象类型
常见的几种对象类型:
- number: 相当于java中所有数值类型的总和
- string: 和java中字符串类似可以用单引号或双引号修饰
- boolean: true/false
- undefined: 未定义 ,当变量只声明不赋值时变量的类型为未定义类型

3.3 运算符 + - * / % > < >= <= = != 和=

运算符和java大体相同
和=, ==:先同意两个变量的类型再比较值, ===先比较两个变量类型再比较值

666==“666” true 666===“666” false
typeof 变量; 获取变量类型

typeof 66+6=? “number6”

3.4 语句 if else ,for, while, switch case

和java大体相同
for循环 int i改成 let i

4、方法声明

java: public 返回值类型方法名(参数列表){方法体}
JavaScript: function 方法名(参数列表){方法体}
常见的四种方法:
- 无参无返回值
- 无参有返回值
- 有参无返回值
- 有参有返回值
声明方法的三种格式:
- function 方法名(参数列表){方法体}
- let 方法名 = function(参数列表){方法体}
- let 方法名 = new Function(“参数1”,“参数2”,“方法体”);

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*css注释*/
    </style>
</head>
<body>
<!--通过按钮触发时间时调用方法-->
<input type="button" value="按钮" onclick="fn1()">

<!--html注释-->
<script>
    //单行注释
    /*多行注释*/

    //1、无参无返回值方法
    function fn1() {
     
     
        alert("fn1：无参无返回值")
    }

    //调用方法
    // fn1();

    //2、有参无返回值
    function fn2(name, age) {
     
     
        alert(name + ":" + age);
    }

    //调用方法
    // fn2("司马懿",23);

    //3、无参有返回值
    function fn3() {
     
     
        return "无参有返回值";
    }

    // s = fn3();
    // alert(s);

    //4、有参数有返回值
    function fn4(x, y) {
     
     
        return x * y;
    }
    // o = fn4(4, 5);
    // alert(o)

    //第二种声明方法的格式
     fn5 = function (name,age) {
     
     
        alert(name+","+age);
    }
    // fn5("刘备",20)

    //第三种声明方法的格式
    fn6 = new Function("name","age","alert(name+';'+age)");
    fn6("诸葛",12);
</script>
</body>
</html>

4.1 和页面相关的方法

通过元素的id获取元素对象

let d = document.getElementById(“元素id”);
获取和修改元素的文本内容

div.innerText = “xxxx”; 修改

div.innerText 获取
获取和修改文本框的值

i1.value=“xxxx”;修改

i1.value 获取
获取和修改元素的html内容

div.innerHTML = “标签内容”; 修改

div.innerHTML += “标签内容”; 追加内容

div.innerHTML 获取

NaN: Not a Number 不是一个数 , isNaN(变量) 返回值为布尔值

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="text" id="i2">
<input type="button" value="加" onclick="myfn1(1)">
<input type="button" value="减" onclick="myfn1(2)">
<input type="button" value="乘" onclick="myfn1(3)">
<input type="button" value="处" onclick="myfn1(4)">
<div id="d1">结果：</div>
</body>

<script>
    function myfn1(x) {
     
     
        a = document.getElementById("i1");
        b = document.getElementById("i2");
        d = document.getElementById("d1");
        //判断用户输入是否是数字
        if (isNaN(a.value) || isNaN(b.value)) {
     
     
            d.innerText = "输入有误"
        } else {
     
     
            switch (x) {
     
     
                case 1:
                    d.innerText = "结果：" + (a.value * 1 + b.value * 1);
                    break;
                case 2:
                    d.innerText = "结果：" + (a.value - b.value);
                    break;
                case 3:
                    d.innerText = "结果：" + a.value * b.value;
                    break;
                case 4:
                    d.innerText = "结果：" + a.value / b.value;
                    break;
            }
        }
    }
</script>
</html>

5、JavaScript对象分类

内置对象: number,string,boolean等
BOM浏览器对象模型 BrowserObjectModel, 包含和浏览器相关的内容
DOM文档对象模型 DocumentObjectModel,包含页面相关的内容

5.1 BOM浏览器对象模型

window对象: 该对象里面的方法和属性称为全局属性和方法, 访问时可以省略window.
window对象中的常见方法
- alert() 弹出提示框
- confirm() 弹出确认框
- prompt() 弹出文本框
- isNaN() 判断变量是否是NaN
- parseInt() 将字符串或小数转成整数
- parseFloat() 将字符串转成小数
- let timer = setInterval(方法,时间间隔) 开启定时器
- clearInterval(timer); 停止定时器
- setTimeout(方法,时间间隔) 只执行一次的定时器

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1" placeholder="数量">
<input type="text" id="i2" placeholder="时间">
<input type="button" value="添加" onclick="myful()">
<div id="d1"></div>
</body>
<script>
    function myful() {
     
     
        num = 0;
        timer = setInterval(function () {
     
     
            num++;
            d1.innerHTML+="<img src='s1.jpg'>";
            if (num==i1.value){
     
     
                clearTimeout(timer);//停止定时器
            }
        },i2.value)
    }
</script>
</html>

6、window中常见的属性

location:位置
- location.href 获取和修改浏览器的请求地址
- location.reload() 页面刷新
history:历史 ,指浏览器当前窗口历史
- history.length 获取历史页面数量
- history.back() 返回上一页面
- history.forward() 前往下一页面
screen:屏幕
- screen.width 屏幕宽分辨率
- screen.height 屏幕高分辨率
navigator:导航/帮助
- navigator.userAgent 获取浏览器的版本信息

7、事件相关

什么是事件?

事件就是系统提供的一些特定时间点, 包括鼠标事件/键盘事件和状态改变事件
鼠标事件:
- onclick:鼠标点击事件
- onmouseover: 鼠标移入事件
- onmouseout:鼠标移出事件
- onmousedown: 鼠标按下事件
- onmouseup: 鼠标抬起事件
- onmousemove:鼠标移动事件

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
     
     width: 200px;height: 200px; background-color: red}
    </style>
</head>
<body>
<div onmouseover="overfn()" onmouseout="outfn()" onmousedown="downfn()" onmouseup="upfn()"
 onmousemove="movefn()"></div>
<script>
    function overfn() {
     
     
        console.log("鼠标移入");
    }
    function outfn() {
     
     
        console.log("鼠标移出");
    }
    function downfn() {
     
     
        console.log("鼠标按下")
    }
    function upfn() {
     
     
        console.log("鼠标抬起")
    }
    function movefn() {
     
     
        console.log("鼠标抬起")
    }
</script>
</body>
</html>

键盘事件:
- onkeydown:键盘按下
- onkeyup: 键盘抬起
状态改变事件:
- onload: 页面加载完成事件
- onchange:值改变事件
- onblur: 失去焦点事件

栗子：

<body>
<input type="text" onkeydown="downfn()" onkeyup="onfn()">
<script>
    function downfn() {
     
     
        console.log("键盘按下"+"按键编码："+event.keyCode);
    }
    function onfn() {
     
     
        console.log("键盘抬起"+"字符："+String.fromCharCode(event.keyCode));
    }
</script>
</body>

事件传递

事件传递顺序:从最底层往上层传递,类似气泡从下往上所有又称为事件冒泡

事件绑定: 给元素添加事件的方式

事件属性绑定:通过标签的事件属性绑定

<input type="button" value="事件属性绑定" onclick="alert('事件属性')">

动态绑定: 通过JavaScript代码给元素添加事件

/*动态绑定*/
btn.onclick = function () {
        
        
    alert("动态绑定");
}

栗子：

<body>
<!--事件传递顺序：从最底层往上传递，类似于气泡从下往上 所以又称：事件冒泡-->
<div οnclick=alert('div')>
    <p οnclick=alert('p')>
        <input type="button" value="按钮" οnclick=alert('按钮')>
    </p>
</div>
<input type="button" value="事件属性绑定"οnclick=alert("事件属性")>
<input type="button" value="动态绑定" id="btn">
<script>
    /*动态绑定*/
    btn.onclick = function () {
     
     
        alert("动态绑定")
    }
</script>
</body>

【Web: JavaScript】常用

JavaScript

1、初识JavaScript

2、三种引入方式

3、JavaScript语法

3.1 变量声明和赋值

3.2 数据类型

3.3 运算符 + - * / % > < >= <= = != 和=

3.4 语句 if else ,for, while, switch case

4、方法声明

4.1 和页面相关的方法

5、JavaScript对象分类

5.1 BOM浏览器对象模型

6、window中常见的属性

7、事件相关

猜你喜欢