javaEE初阶---JavaScript

在这里插入图片描述

一 : 引言

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。

JavaScript发展历史 : JS发展历史

JS , CSS 和 HTML的关系 :

  • HTML : 网页的结构(骨)
  • CSS : 网页的表现(皮)
  • JS : 网页的行为(魂)

在这里插入图片描述
JS运行过程 :

编写的代码是保存在文件中的, 也就是存储在硬盘(外存上).
双击 .html 文件 , 浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向: 硬盘 => 内存)
浏览器会解析用户编写的代码, 把代码翻译成二进制的, 能让计算机识别的指令(解释器的工作)
得到的二进制指令会被 CPU 加载并执行(数据流向: 内存 => CPU)

在这里插入图片描述
JS的组成 :

  • ECMAScript(简称 ES): JavaScript 语法
  • DOM: 页面文档对象模型, 对页面中的元素进行操作
  • BOM: 浏览器对象模型, 对浏览器窗口进行操作

DOM : 就是浏览器给JS提供的用来操作页面的API .

  • 文档 : 网页 , html就可以视为是"文档" .
  • 对象 : 浏览器把页面中的每个标签/元素抽象成了一个对象, 使用JS可以直接拿到这些对象 , 也就可以基于JS来操作页面内容了 .

BOM : 浏览器给JS提供的用来操作浏览器的API .

二 : 第一个程序

<script>
    alert("第一个JS程序!") ;
</script>

JavaScript 代码可以嵌入到 HTML 的 script 标签中.

在这里插入图片描述

三 : JS的书写形式

3.1行内式

直接嵌入到HTML内部
<body>
    <input type="button" value="点我点我" onclick="alert('点了你就是我儿子.')">
</body>

在这里插入图片描述

3.2内嵌式

写到 script 标签中
    <script>
        alert("路遥知马力,日久见人心.");
        </script>

在这里插入图片描述

3.3外部式

写到单独的 .js 文件中
    <script src = "test.js"></script
		alert("斯是陋室,惟吾德馨");

在这里插入图片描述

3.4输入输出

1.输入

prompt
prompt('请输入你的心情 :');

在这里插入图片描述

2.输出

alert
alert('猪猪侠') ;

在这里插入图片描述

console.log()  在控制台打印日志,供程序猿看
console.log('这是一条日志,打印出来看看');

在这里插入图片描述

注意: 在 VSCode 中直接输入 “log” 再按 tab 键, 就可以快速输入 console.log

3.5 注释

在这里插入图片描述

HTML :   <!-- -->

 CSS : /*  */

JS : // 和 /* */

四 : 语法概览

4.1变量的使用

var 是 JS 中的关键字, 表示这是一个变量.
var name = '张三';
var age = 20;

理解动态类型

  1. 一个变量在运行过程中 ,类型可以发生改变 , 动态类型 . (JS , Python , PHP…)

  2. 一个变量在运行过程中 ,类型不可以发生改变 , 静态类型 . (C , C++ , Java…)

注意 : java和JS之间的语法差异大部分是由"动态类型"带来的 !

var a = 10; // 数字
a = "hehe"; // 字符串
JS中另外一种定义变量的方式 : let
let name = '张三';
let age = 20;

4.2 基本数据类型

boolean: true 真, false 假.
string: 字符串类型.
undefined: 表示未定义的值.
null. 表示空值.

4.3 特殊的数据值

Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
NaN: 表示当前的结果不是一个数字.

var max = Number.MAX_VALUE ;
console.log(max * 2);
console.log(-max * 2);
console.log('hehe' - 10);

在这里插入图片描述

console.log('hehe' + 10);
console.log(isNaN('hehe' + 10));

在这里插入图片描述

可以使用 isNaN 函数判定是不是一个非数字.

4.4 string字符串类型

字符串字面值

var a = "haha" ; 
var b = 'hehe' ;

字符串字面值需要使用引号引起来, 单引号双引号均可 .

求长度

var a = "haha" ; 
var b = 'heh' ;
console.log(a.length);
console.log(b.length);

在这里插入图片描述

字符串拼接 : 使用 +

var a = "haha" ; 
var b = 'baijaiyu' ;
console.log(a + b);

在这里插入图片描述

比较字符串内容

  1. 使用 ==

在这里插入图片描述

  1. 使用 ===

在这里插入图片描述

4.5 boolean类型

Boolean 参与运算时当做 1 和 0 来看待.
console.log(true + 1);
console.log(false + 1);

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.6 undefined 未定义数据类型

  1. 如果一个变量没有被初始化过, 结果就是 undefined, 是 undefined 类型
var a;
console.log(a);

在这里插入图片描述
2. undefined 和字符串进行相加, 结果进行字符串拼接 .

var a;
console.log(a + "123");

在这里插入图片描述
3. undefined 和数字进行相加, 结果为 NaN .

var a ;
console.log(a + 10) ;

在这里插入图片描述

4.7 null

null表示当前的变量是一个空值
var a = null ;
console.log(a + 10);
console.log(a + "10");

在这里插入图片描述

  • null 和 undefined 都表示取值非法的情况, 但是侧重点不同.
  • null 表示当前的值为空. (相当于有一个空的盒子)
  • undefined 表示当前的变量未定义. (相当于连盒子都没有)

4.8 数组

1.创建数组

let arr1 = [1,2,3,4] ;

在这里插入图片描述
JS数组中的元素允许不同类型 (动态类型)

let arr2 = [1,'hello','world',null] ;

在这里插入图片描述

2.访问数组的元素

  1. 下标从0开始
  2. 在JS中 , 数组下标越界是不会报错的 !
let arr3 = ['炎龙侠','风鹰侠','黑犀侠','雪獒侠','地虎侠'] ;
console.log(arr3[0]);
console.log(arr3[-1]);
console.log(arr3[100]);

在这里插入图片描述

3.修改数据 , 会给对应下标位置放上元素

let arr3 = ['炎龙侠','风鹰侠','黑犀侠','雪獒侠','地虎侠'] ;
arr3[100] = '帝皇铠甲' ;

在这里插入图片描述

Q : 如果下标是负数或者字符串会怎样 ?

A : 会以键值对形式存储在数组中 .

let arr3 = ['炎龙侠','风鹰侠','黑犀侠','雪獒侠','地虎侠'] ;
arr3[-1] = '帝皇铠甲' ;
arr3['不退缩'] = '铠甲合体我穿梭光阴' ;

在这里插入图片描述

4.删除元素

let arr3 = ['炎龙侠','风鹰侠','黑犀侠','雪獒侠','地虎侠'] ;
arr3.splice(3,2) ;

在这里插入图片描述

5.替换元素

let arr3 = ['炎龙侠','风鹰侠','黑犀侠','雪獒侠','地虎侠'] ;
arr3.splice(3,2,'猪猪侠','菲菲公主') ;  

在这里插入图片描述

6.插入元素

let arr3 = ['炎龙侠','风鹰侠','黑犀侠','雪獒侠','地虎侠'] ;
arr3.splice(3,0,'猪猪侠','菲菲公主') ; 

在这里插入图片描述

4.9 函数

1.函数定义

在这里插入图片描述

2.函数调用

在这里插入图片描述

JS不要求函数的形参个数和实参个数匹配 .如果实参多了 , 多出来的实参就被忽略了 ; 如果实参少了 , 多出来的形参 , 就是undefined的 , 也不会报错 .

例如 , 写一个函数支持N个数相加 .

function add(a,b,c,d,e,f) {
    if (a == undefined) {
        a = 0; 
    }
    if (b == undefined) {
        b = 0; 
    }
    if (c == undefined) {
        c = 0; 
    }
    if (d == undefined) {
        d = 0; 
    }
    if (e == undefined) {
        e = 0; 
    }
    if (f == undefined) {
        f = 0; 
    }
    return a+b+c+d+e+f;
}                              

let result = add(10,20,30) ;
console.log(result);

在这里插入图片描述
这个代码等价于 ;

function add(a,b,c,d,e,f) {
    a = a || 0 ;
    b = b || 0 ;
    c = c || 0 ;
    d = d || 0 ;
    e = e || 0 ;
    f = f || 0 ;
    return a+b+c+d+e+f;
}                              

let result = add(10,20,30) ;
console.log(result);

在这里插入图片描述

JS函数的内部 , 有一个内部的变量arguments , 相当于一个数组 , 这个数组里就存放了所有的实参 .

3.JS的另一种函数定义的方式

let add = function() {
    let sum = 0;
    for(let i = 0;i < arguments.length; i++) {
        let n = arguments[i] || 0 ;
        sum += n;
    }
    return sum ;
}

创建了变量 , 名字叫add , 对add进行初始化 , 拿着一个函数进行初始化 . add这个变量的类型就是函数类型 .

在JS中 , 函数也是一个对象 , 就和普通的对象没什么区别 . 这个设定称为"函数是一等公民" .

  • 可以把函数保存到一个变量中 ;
  • 可以把函数作为另一个函数的参数 ;
  • 可以把函数作为另一个函数的返回值 .

4.10 JS作用域

使用let定义的变量是"块级作用域" .在当前 { } 中生效 .

在使用某个变量时 , 会优先在当前{ }中去找 , 如果找不到 , 就往外层{ }去找 , 一直找到最顶层还找不到 , 就认为变量未定义 . 从代码块里一级一级向外寻找的过程 , 称为"作用域链" .

4.11 JS对象

JS中创建对象不依赖于类,直接使用{ } 就可以表示一个对象 !
let student = {
    name : '蔡徐坤' ,
    age : 24 ,
    height : 183 ,
    weight : 65,

    sing : function() {
        console.log('姬霓太美');
    } ,

    jump : function() {
        console.log('喜欢唱跳rap篮球');
    }
} ;

console.log(student.name);
student.jump();

在这里插入图片描述

JS中 , 一个对象里 , 包含哪些属性 , 哪些方法 , 都是可以动态改变的 .

let student = {
    name : '蔡徐坤' ,
    age : 24 ,
    height : 183 ,
    weight : 65,

    sing : function() {
        console.log('姬霓太美');
    } ,

    jump : function() {
        console.log('喜欢唱跳rap篮球');
    }
} ;

student.say = function() {
    console.log(this.name + "一个男人,一个真正的man") ;
}

student.say();

在这里插入图片描述

补充知识 :

在这里插入图片描述

五 : WebAPI

在这里插入图片描述

5.1 什么是 API

API 是一个广义的概念. 而 WebAPI 是一个更具体的概念, 特指 DOM+BOM.所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发.

WebAPI参考文档

5.2DOM树结构

在这里插入图片描述

重要概念:

  • 文档: 一个页面就是一个文档, 使用 document 表示 .
  • 元素: 页面中所有的标签都称为 元素. 使用 element 表示 .
  • 节点: 网页中所有的内容都可以称为节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node表示 .

这些文档等概念在 JS 代码中就对应一个个的对象 .

5.3获取元素

一个页面上有很多HTML标签 , 每个标签(tag)也称为是一个元素(element) , 类似于操作数据库得先use一下 .

JS获取元素有许多种方式 , 此处只介绍最强大最通用的一种 .

在这里插入图片描述

var element = document.querySelector(selectors);
  • selectors 包含一个或多个要匹配的选择器的 DOM字符串DOMString . 该字符串必须是有效的 .

  • 如果需要与指定选择器匹配的所有元素的列表,则应该使用querySelectorAll() .

  • 可以在任何元素上调用 , 不仅仅是 document . 调用这个方法的元素将作为本次查找的根元素 .
    在这里插入图片描述

5.4 事件

1.定义

JS 要构建动态页面, 就需要感知到用户的行为.用户对于页面的一些操作(点击, 选择, 修改等) 都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互操作.

在这里插入图片描述

2.事件三要素

  1. 事件源: 哪个元素触发的
  2. 事件类型: 是点击, 选中, 还是修改?
  3. 事件处理程序: 进一步如何处理. 往往是一个回调函数.

3.简单示例

在这里插入图片描述
在这里插入图片描述

上面这个代码是把JS嵌入到HTML中了 .

    <h1 id= "abc" >一级标题</h1>
    <script>
        let elem = document.querySelector('#abc') ;//id选择器
        elem.onclick = function() {
            console.log('我自横刀向天笑');
        }
    </script>

在这里插入图片描述

4.操作元素

4.1innerHTML

通过这个属性可以获取或修改内容 .

例如 : 实现一个计数器 , 每次点击 , 都会数字 + 1 .

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="style.css">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .screen {
            width: 200px;
            height: 100px;
            margin: 0 auto;
            background-color: grey;
            color: white;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
            border-radius: 10px;
        }

        .add-btn {
            margin: 10px auto;
            width: 200px;
            height: 100px;
            font-size: 30px;
            line-height: 100px;
            display: block;
        }
    </style>
</head>
<body>
    <div class="screen">0</div>
    <button class="add-btn">+</button>

    <script>
        let screen = document.querySelector('.screen') ;
        let addBtn = document.querySelector('.add-btn') ;
        addBtn.onclick = function() {
            //1.拿到screen里面的数值
            let number = screen.innerHTML;
            //2.针对number+1
            number = parseInt(number);
            number += 1;
            //3.写回到元素中
            screen.innerHTML = number ; 
        }
    </script>
</body>
</html>

在这里插入图片描述
效果 : 点击 + , screen上的数字会自动加1 .

4.2 获取/修改样式属性

1.行内样式操作
CSS 中指定给元素的属性, 都可以通过 JS 来修改.

实例一 : 点击字体变大

    <div>终有弱水替沧海,再无相思寄南山.</div>
<script>
        //先选中div,然后通过点击事件来修改文字大小
        let div = document.querySelector('div') ;
        div.onclick = function() {
            //修改div的元素中文字的大小
            //div.style = 'font-size : 100px' ;
            div.style.fontSize = '100px' ;
        }
    </script>

在这里插入图片描述
在这里插入图片描述

style 中的属性都是使用 驼峰命名 的方式和 CSS 属性对应的.
例如: font-size => fontSize, background-color => backgroundColor 等 .

实例二 : 点击切换图片

indexOf , 可用于查询字符串子串 , 如果查询到 , 返回子串的起始位置下标 ; 否则 , 返回 -1 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
    #picture {
        width : 500px ;
        height : 300px ;
    }
    </style>
</head>
<body>
    <img src="yanlong.jpg" id="picture">

    <script>
        let img = document.querySelector('img');
        img.onclick = function() {
            console.dir(img);
            
        if(img.src.indexOf('yanlong.jpg') >= 0) {
                img.src = 'heixi.jpg';
        } else if(img.src.indexOf('heixi.jpg') >= 0) {
                img.src = 'yanlong.jpg';
        }

    }


        </script>
</body>
</html>

在这里插入图片描述

代码调试
拓展 : 使用浏览器内置的调试器,进行代码调试.

在这里插入图片描述

在这里插入图片描述

2.类名样式操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*日间模式*/
        .light {
            color : black;
            background-color: white;
        }
		/*夜间模式*/
        .dark {
            color : white;
            background-color: black;
        }
    </style>
</head>
<body>
    <!--实现"模式切换"-->
    <div class = "light">
    滕王高阁临江渚,佩玉鸣鸾罢歌舞。<br>
    画栋朝飞南浦云,珠帘暮卷西山雨。<br>
    闲云潭影日悠悠,物换星移几度秋。<br>
    阁中帝子今何在?槛外长江空自流。
    </div>
    <script>
        let div = document.querySelector('div') ;
        div.onclick = function() {
            if(div.className == 'light') {
                div.className = 'dark' ;
            } else {
                div.className = 'light' ;
            }
        }
        </script>
</body>
</html>

在这里插入图片描述

5.操作节点

即针对页面上的元素进行增删 .

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div>这是之前的div</div>
        <button>删除最新的div</button>
    </div>

    <script>
        //创建一个新的div标签
        let div = document.createElement('div') ;
        div.innerHTML = '这是最新的div' ;
        div.id = 'first' ;
        div.className = 'first-div' ;
        div.style.fontSize = '50px' ;

        console.log(div);

        //获取到containier对象
        let container = document.querySelector('.container') ;
        container.appendChild(div) ;

        let button = document.querySelector('button') ;
        button.onclick = function() {
            container.removeChild(div);
        }
        </script>
</body>
</html>

在这里插入图片描述

5.5 应用

1.猜数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--首先要随机生成一个数字-->
    <!--然后需要在页面上有一个输入框-->
    <!--接下来要有一个"提交按钮"-->
    <!--最后需要有区域显示结果-->
    <input type="text">
    <button>确定</button>

    <div class="screen"></div>

    <script>
        let input = document.querySelector('input') ; //标签选择器
        let screen = document.querySelector('.screen') ; //类选择器

        //1.先生成一个随机数字
        let number = Math.floor(100 * Math.random() + 1) ; //1~100
        console.log(number);
        //2.针对按钮的点击操作,进行处理
        let button = document.querySelector('button') ;
        //3.进行判断,拿到输入框中的数字,然后和number进行比较
        button.onclick = function() {
            let curNum = parseInt(input.value) ;
            if(isNaN(curNum)) {
                    screen.innerHTML = '你输入的是什么你看看?' ;
                    return;
            }
            if(curNum < number) {
                screen.innerHTML = '猜小了,你潮吗?' ;
            }
            if(curNum > number) {
                screen.innerHTML = '猜大了,废了' ;
            }
            if(curNum == number) {
                screen.innerHTML = '猜对了哥!' ;
            }
        }
        </script>

</body>
</html>

在这里插入图片描述

2.留言板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .container {
            width : 800px;
            margin : 10 px auto;
        }

        .container h2 {
            text-align: center;
            margin: 30px 0px;
        }

        .row {
            height: 50px;
            display: flex;
            justify-content: center;
            margin-top: 5px;
            line-height: 50px;
        }

        .row span {
            height: 50px;
            width: 100px;
            line-height: 50px;
        }

        .row input {
            height: 50px;
            width: 300px;
            line-height: 50px;
            font-size: 30px;
        }

        .row button {
            width: 400px;
            height: 50px;
            color: #000;
            background-color: aquamarine;
            border: none;
            border-radius: 10px;
        }

        .row button:active {
            background-color: grey;
        }
    </style>
</head>
<body>
    <!--这是一个顶层容器,放其他元素-->
    <div class="container">
        <h2>留言板</h2>
        <div class="row">
            <span></span>
            <input type="text" id="from">
        </div>

        <div class="row">
            <span>对谁</span>
            <input type="text" id="to">
        </div>

        <div class="row">
            <span>说什么</span>
            <input type="text" id="message">
        </div>

        <div class="row">
            <button>提交</button>
        </div>

        <script>
            let container = document.querySelector('.container');
            let fromInput = document.querySelector('#from');
            let toInput = document.querySelector('#to');
            let messageInput = document.querySelector('#message');
            let button = document.querySelector('button');
            button.onclick = function() {
                //1.把用户输入的内容获取到
                let from = fromInput.value;
                let to = toInput.value;
                let message = messageInput.value;
                if(from == '' || to == '' || message == ''){
                    return;
                }
                //2.构造一个div,把这个div插入到.container的末尾
                let newDiv = document.createElement('div');
                newDiv.className = 'row';
                newDiv.innerHTML = from + "对" + to + "说" + message;
                //3.把div挂在container里面
                container.appendChild(newDiv);
                //4.把之前输入框中的内容清空
                fromInput.value = '';
                toInput.value = '';
                messageInput.value = '';
            }

        </script>
</body>
</html>

在这里插入图片描述

本课内容结束 ~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值