Python百日进阶-WEB开发】Day151 - 前端基础之 Javascript

文章目录

一、Javascript介绍

1、JavaScript的定义

JavaScript是运行在浏览器端的脚步语言,是由浏览器解释执行的,简称js,它能够让网页和用户有交互功能,增加良好的用户体验效果。
前端开发三大块：

HTML:负责网页结构
css:负责网页样式
JavaScript负责网页行为比如网页与用户的交互效果

2、小结

JavaScript是运行在浏览器端的脚步语言,它的作用就是负责网页和用户的交互效果。

二、Javascript的使用方式

1.行内式(主要用于事件)

2.内嵌式

3.外链式

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>Javascripttitle>
    
    <script>
        alert('我是内嵌式的js')
    script>
    
    <script src='main.js'>script>
head>
<body>
    
    <input type="button" value="确定" onclick="alert('我被点击了！')">
body>
html>

三、变量和数据类型

3.1 定义变量

JavaScript是一种弱类型语言,也就是说不需要指定变量的类型, JavaScript的变量类型由它的值来决定,定义变量需要用关键字var,一条 JavaScript语句应该以分号;结尾
定义变量的语法格式:

        var iNum =123;
        var sName = 'Jim';
        var inum2 = 1, iNum3 = 2, sSex = '男', sAddress = '山东';
'运行

3.2 javascript 注释，同css

// 单行注释
/*
这是多行注释
这是多行注释
*/
'运行

3.3 数据类型

3.3.1 js中有六种数据类型,包括五种基本数据类型和一种复杂数据类型(object)

number数字类型:var i = 10.1;
string字符串类型:var str = ‘abc’;
boolean布尔类型true或 false:var bis = false;
undefined undefined类型,变量声明未初始化,它的值就是 undefined:var undata;
null null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为nul在页面上获取不到对象,返回的值就是null:var nulldata = null;
复合类型:object后面学习的 JavaScript对象属于复合类型:
var oobj = {
name = ‘隔壁老王’,
age = 58
};

3.3.2获取变量类型

获取变量类型
var type = typeof(oobj)
alert(type)
获取对象的name属性
alert(oobj.name)

3.4 变量命名规范

区分大小写
第一个字符必须是字母下划线()或者美元符号($)
其他字符可以是字母、下划线、美元符或数字

3.5 匈牙利命名风格

对象o： Object比如: oDiv
数组a： Array比如:altems
字符串s： String比如:sUserName
整数i： Integer比如: iltemCount
布尔值b： Boolean比如: blsComplete
浮点数f： Float比如: fPrice
函数fn： Function比如: fnHandler

        // 定义整型数字
        var iNum1 =123;
        // 定义浮点数字
        var fNum1 = 10.25;
        // 定义字符串
        var sName = 'Jim';
        // 查看数据类型typeof
        alert(typeof(iNum1))
        alert(typeof(fNum1))
        alert(typeof(sName))
        // 定义布尔类型
        var bIsOk = true;
        // 定义undefined类型
        var unData;
        // 定义空对象
        var oData = null;
        // 由于历史原因，null值显示object类型，事实上null值属于null类型
        alert(typeof(oData))
        // 定义object类型
        var oPerson = {
            name: '历史',
            age: 18
        };
        alert(typeof(oPerson));
        alert(typeof(oPerson.name));
        console.log(oPerson.name)
        // 定义多个变量
        var iNum2 = 3, sStr = 'lisi';
        console.log(iNum2, sStr)

四、函数定义和调用

4.1 函数定义

函数就是可以重复使用的代码块,使用关键字 function定义函数。

4.2 函数调用

函数调用就是函数名加小括号,比如函数名(参数[参数可选])

        //函数定义:无参数无返回值
        function fnShow(){
            alert('我是一个无参数无返回值的函数')
        };

        //调用函数
        fnShow()

        //函数定义：有参数有返回值。return可以为函数提供返回值，return后面的代码不会执行。
        function fnSum(iNum1, iNum2){
            var iResult = iNum1 + iNum2
            return iResult
        };

        // 调用函数
        var iNum = fnSum(1, 2);
        alert(iNum)

五、变量作用域

变量作用域就是变量的使用范围变量分为:局部变量和全局变量。

5.1 局部变量

局部变量就是在函数内使用的变量,只能在函数内部使用。

5.2 全局变量

        // 局部变量，函数内部定义和使用
        function fnShow(){
            var iNum = 1;
            alert('局部变量函数内弹框：'+ iNum)  // js可以字符串和数字直接相加，把数字自动转为字符串，进行拼接
        }

        fnShow()
        // alert('局部变量函数外弹框：'+ iNum) //报错：iNum is not defined，局部变量不能再函数外部使用

        // 全局变量,函数外部定义，函数内外均可使用，并且一变百变。
        var iNumber = 10
        function fnModify(){
            alert('全局变量函数内弹框：'+ iNumber);
            iNumber = 30;   // 不用象python 那样加 globle
            iNumber ++  // 等价于 iNumber += 1
            iNumber += 1  // 等价于 iNumber += 1
        }
        fnModify()
        alert('全局变量函数内修改后，函数外弹框：'+ iNumber)

六、条件语句

6.1 条件语句的介绍

条件语句就是通过条件来控制程序的走向

6.2 条件语句语法

if语句只有当指定条件为true时使用该语句来执行代码
if…else语句-当条件为true时执行代码,当条件为false时执行其他代码
if…else if…else语句-使用该语句来判断多条件,执行条件成立的语句

6.3 比较运算符

假如=5,查看比较后的结果:
在这里插入图片描述


        // if 条件判断，结合比较运算符
        var iNum = 5;
        var sStr = '5';
        if (iNum == sStr) {     // 在js里如果数字和字符串进行比较（==、>、<、>=、<=），会自动把字符串转为数字类型，再进行比较
            alert( "5 == '5'")
        };

        if (iNum < sStr) {
            alert(" 5 < '5' 成立");
        } else {
            alert(" 5 < '5' 不成立");
        };

        var iScore = 80;
        if (iScore < 60) {
            alert('不及格')
        } else if (iScore <= 70) {
            alert('<=70')
        } else if (iScore <= 80) {
            alert('<=80')
        } else if (iScore <= 90) {
            alert('<=90')
        } else {
            alert('>90')
        }

6.4 逻辑运算符 &&(and) ||(or) !(非)

在这里插入图片描述

        // 逻辑运算符  &&(and)  ||(or)  !(非)
        var iNum1 = 1;
        var iNum2 = 2;
        if (iNum1 >= 0 && iNum2 < 2) {
            alert('true')
        } else {
            alert('false')
        }

        if (iNum1 >= 0 || iNum2 < 2) {
            alert('true')
        } else {
            alert('false')
        }

        if (!(iNum1 > iNum2)) {
            alert('true')
        } else {
            alert('false')
        }

七、获取标签元素

可以使用内置对象 document上的 getElementById方法来获取页面上设置了id属性的标签元素,获取到的是一个html对象,然后将它赋值给一个变量.
正常情况下,如果把javascript写在元素的上面,会取不到元素,因为页面上从上往下加载执行的，位于head标签中的javascript去页面上获取body中的元素div1的时候,元素div1还没有加载。
解决方法有两种

7.1 js 放在body之后，不推荐

head>
<body>
    
    <input type="button" value="确定" onclick="alert('我被点击了！')">

    <p id='p1'>我是一个短路标签p>
body>
    <script>
        //获取标签元素
        var oP = document.getElementById('p1');   // js的内置对象,如果返回null说明没有获取成功
            alert(oP)
    script>
html>

7.2 js 放在head中，window.onload页面加载完成调用匿名函数

//页面元素加载完成会触发onload事件，获取标签元素,匿名函数
 window.onload = function(){
     var oP = document.getElementById('p1');   // js的内置对象,如果返回null说明没有获取成功
     alert(oP);
 };

八、操作标签元素属性

8.1 属性的操作

首先获取的页面标签元素,然后就可以对页面标签元素的属性进行操作,属性的操作包括:

属性的读取
属性的设置

8.1.1 属性名在js中的写法

html的属性和js里面属性大多数写法一样,但是“class属性写成“className“
“style"属性里面的属性,有横杠的改成驼峰式,比如:“font-size",改成”style.fontSize“

        //标签属性的获取和设置
        window.onload = function(){
            var oBtn = document.getElementById('btn1');   // 根据id获取标签
            // 获取标签属性
            alert(oBtn.type);
            alert(oBtn.value);
            // 设置标签属性
            oBtn.name = 'username';
            // 设置样式属性
            oBtn.style.background = 'red';
            // 设置类选择器的名称，相当于html中的 class='btnstyle'
            // 设置了类选择器名称后，就是联通了js与css的桥梁，所有样式都可以通过style来设置，不用记两套语法了
            oBtn.className = 'btnstyle';
        };
    script>
    <style>
        /* 通过上面 oBtn.className = 'btnstyle'; 设置的类选择器名称选中 id='btn1' 的元素*/
        .btnstyle{
            background: rgb(10, 228, 181);
            font-size: 2em;
        }
    style>
head>
<body>
    
    <input type="button" value="确定" id='btn1' onclick="alert('我被点击了！')">

8.2 innerHTML

innerHTML可以读取或者设置标签包裹的内容

        // innerHTML可以读取或者设置标签包裹的内容
        window.onload = function(){
            var oDiv = document.getElementById('div1');   // 根据id获取标签
            alert(oDiv.innerHTML)       //显示标签内容
            oDiv.innerHTML = '百度'  //设置标签内容
            };

九、数组(python的列表)及操作方法

9.1 数组的介绍

数组就是一组数据的集合, javascript中数组里面的数据可以是不同类型的数据好比 python里面的列表。

9.2 数组的定义

9.2.1 实例化对象创建

var aList = new Array(1,2,3);
'运行

9.2.2 字面量方式创建，推荐

var aList2 = [1,2,3,'pej'];
'运行

9.3 多维数组

多维数组指的是数组的成员也是数组,把这样的数组叫做多维数组

var aList3 = [[1,2,3],['a','e','f']];
console.log(aList3[1][2]);
'运行

9.4 数组的操作

9.4.1 获取数组长度

var aList = [1,2,3,4];
alert(aList.length);

9.4.2 根据下标取值，下标不能取负值

var aList = [1,2,3,4];
alert(aList[0]);
alert(aList[aList.length-1]);

9.4.3 从数组最后添加和删除数据

var aList = [1,2,3,4];
aList.push('5');
alert(aList);
var oValue = aList.pop();
console.log(oValue);
alert(aList);

9.4.4 根据下标添加和删除元素

arr.splice(start, num, element1, …, elementN)
参数解析:

start:必需,开始删除的索引
num:可选,删除数组元素的个数。如果num设置为0，相当于不删除，只是插入数据。
elementN:可选,在 start索引位置要插入的新元素
此方法会删除从 start索引开始的num个元素,并将 elementNstart参数插入到索引位置

var aColors = ['red','green','blue'];
aColors.splice(0, 1);	//从下标0开始，删除1个，就是删除第一个元素
alert(aColors);

aColors.splice(1, 0, 'yellow', 'orange');	//从下标1开始删除0个，插入两个
alert(aColors);

aColors.splice(1, 1, 'red', 'purple'); 	// 从下标1开始删除1个，插入两个
alert(aColors);

十、循环语句

10.1 循环语句的介绍

循环语句就是让一部分代码重复执行,javascript中常用的循环语句有：

for
while
do-while 至少执行一次

10.2 for循环

        var aColors = ['red','green','blue'];
        for (var index = 0; index< aColors.length; index++) {
            // 根据下标取值
            var oValue = aColors[index];
            alert(oValue);
        };

10.3 while循环

        // while循环
        var aColors = ['red','green','blue'];
        var index = 0;
        while(index < aColors.length) {
            // 根据下标取值
            var oValue = aColors[index];
            alert(oValue);
            index++;
        };

10.4 do…while循环

        // do...while循环
        var aColors = ['red','green','blue'];
        var index = 5;
        do {
            // 根据下标取值
            var oValue = aColors[index];
            alert(oValue);
            index++;
        } while (index < aColors.length) ;

十一、字符串拼接用“+”

11.1 数字+数字：求和

11.2 数字+字符串：数字转为字符串+字符串

隐式类型转换

        // 字符串拼接用“+”
        var sName = 'zhangsan';
        var iAge = 18;
        var iTel = 130;
        alert(sName+iAge);
        alert(iTel+iAge);
        alert(sName+=iAge);
        alert(sName);

十二、定时器

12.1 定时器的介绍

定时器就是在一段特定的时间后执行某段程序代码（函数）

12.2 定时器的使用:

js定时器有两种创建方式:

12.2.1 延时定时器

1、作用：以指定的时间间隔(以毫秒计)调用一次函数的定时器
2、语法：setTimeout(func[, delay, param1, param2,…)
setTimeout函数的参数说明:

第一个必选参数func,表示定时器要执行的函数名
第二个可选参数delay,表示时间间隔,默认是0,单位是毫秒
第三个可选参数param1,表示定时器执行函数的第一个参数以次类推传入多个执行函数对应的参数

        // 延时定时器
        function fnShow(name, age){     // 定时器调用的函数
            alert('ok' + name + age);
            // 销毁延时定时器，必须在函数内部，否则定时器还没执行，就被销毁了
            clearTimeout(iTid);
        };
        var iTid = setTimeout(fnShow, 500, ' zhangsan ', 40);  //500(延时时间)， ' zhangsan '（函数参数一）, 40（函数参数二）
        alert(iTid);    //定时器id

12.2.2 重复定时器

1、作用：以指定的时间间隔(以毫秒计)重复调用函数的定时器
2、语法：setInterval(func[, delay, param1, param2…)

        // 重复定时器，无限循环，可用于网页轮播图等，可以手工销毁
        function fnShow1(name, age){     // 定时器调用的函数
            alert('ok' + name + age);
        };

        function fnStop(){
            clearInterval(iTid);     // 销毁重复定时器
        };

        var iTid = setInterval(fnShow1, 5000, ' zhangsan ', 40);  //
    </script>
 </head>
 <body> 
     <input type="button" value="停止" onclick="fnStop()">