初始html5(三)JavavScript

最新推荐文章于 2023-03-18 22:28:26 发布

吃番茄不吐籽

最新推荐文章于 2023-03-18 22:28:26 发布

阅读量329

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42943720/article/details/86023400

本文详细介绍了JavaScript的基础知识，包括JavaScript的特点、语法组成、变量定义、数据类型、运算符、流程控制语句、函数使用、事件、内置对象等内容。适用于初学者快速入门。

JavaScript基础

1. JavaScript概述

html 用于页面的搭建, css 用于页面的美化 javascript 用于页面的交互

特点	java	javascript
面线对象	完全面向对象的语言:继承,封装,多态	基于对象的语言,不完全符合面向对象额的思想
运行方式	编译型,运行过程需要生成字节码文件	解释型语言，不会生成中间文件，解释一定行数，再执行
跨平台	安装jvm就可以运行在不同的操作系统中	只要有浏览器的地方就可以运行
大小写	区分大小写	区分大小写
数据类型	强类型语言,不用的数据类型有严格的区分	弱类型语言,不用类型的数据可以直接赋值给同一个变量

JavaScript的语法组成

组成部分	作用
ECMAScript	构成了js核心的语法基础
BOM	Browser Object Model 浏览器对象模型，用来操作浏览器上的对象
DOM	Document Object Model 文档对象模型，用来操作网页中的元素

2. JavaScript基础语法

2.1 html与js结合

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_html与js结合方式</title>
    <!--type="text/javascript" 告诉浏览器解析此标签的类型为js，可以省略不写-->
    <script type="text/javascript">
        document.write('<h3>你好，传智播客</h3>');
    </script>
    <script src="../js/myjs.js">
        document.write('<h3>我不会被加载</h3>');
    </script>
</head>
<body>
<!--
    html与js结合方式有二种
        1)内部脚本
            使用script标签，在标签体内编写js代码
        2）外部引入
            使用script标签，需要src属性引入外部js文件

        注意：
            1)script标签可以在页面的任意位置使用，推荐放在body下方【绝大多数script按照此规则】
            2）script标签如果通过src属性引入了外部文件，那么在标签体内的js代码将不会加载
            3）script标签可以在页面出现多次，依次被加载

-->

</body>
<script>
    document.write('<h3>我是在body下方的输入的内容</h3>');
</script>
</html>

2.2 js变量的定义

<script type="text/javascript">
    // 整型
    var i = 521;
    // 浮点型
    var d = 521.1314;
    // 字符
    // 在js中，没有字符型，只有字符串可以使用 单引号和双引号
    var c = 'c';
    // 字符串
    var str = "隔壁泰山";
    // 布尔型
    // 在ecmascript 6 之前所有变量声明都是var，可以省略不写   （let const）
    b = true;
</script>

2.3 js数据类型

原始数据类型
number：数值类型（整型和浮点型）
string：字符串型（字符和字符串）
boolean：布尔型
null：空值例如：var a = null; 引用数据类型的占位符
undefined：未定义例如 var a;
引用数据类型
创建一个上帝对象
var obj = new Object();
创建一个日期对象
var date = new Date();
typeof操作符

<script type="text/javascript">
    // 整型
    var i = 521;
    // 补充知识点，使用浏览器的控制台
    //system.out.println() ===== console.log();
    console.log("整型：" + typeof i);
    // 浮点型
    var d = 521.1314;
    console.log("浮点型：" + typeof d);
    // 字符
    var c = 'ccc';
    console.log("字符：" + typeof c);
    // 字符串
    var str = "用心做教育";
    console.log("字符串：" + typeof str);
    // 布尔型
    b = true;
    console.log("布尔型:" + typeof(b));
    // 空值  是引用数据类型的占位符 ==== object
    var n = null;
    console.log("空值:" + typeof(n));
    // 未定义
    var u;
    console.log("未定义:" + typeof(u));
    // 引用数据类型
    // 补充知识点，我们js变量可以重复定义
    u = new Date();
    // 补充知识点：代码结束以分号结尾，js可以省略不写，建议协商
    console.log("引用数据类型:" + typeof(u));
</script>

2.4 js运算符号

算术运算符
赋值运算符
比较运算符
逻辑运算符
三目(三元)运算符

<script type="text/javascript">
    // 算术运算符
    // 在js中，数值可以与字符串进行数学运算（底层转换了），+号还是字符串拼接
    var a = 10.00; // 整型
    var b = '3'; // 字符串
    console.log(a + b); // 字符串拼接
    console.log(a - b);
    console.log(a * b);
    console.log(a / b); // 包含小数位

    // 比较运算符 == ===
    var c = '10.00';
    console.log(a == c); // true  判断的是数据的内容（底层转换了）
    console.log(a === c); // false 恒等 判断类型和数据完全相同才会返回true


    // ！= !==
    console.log(a != c);// 判断内容不等   10 = 10
    console.log(a !== c);// 先判断类型
</script>

2.5 流程控制语句

if判断

if(条件表达式){
    // 执行代码
}else if(条件表达式){
    // ...
}else{
    // ...
}
//例子
<script type="text/javascript">
    /*
    * 条件表达式
    *   数值类型： 非0为真
    *   字符串类型 非空串为真
    *   变量 null 或 undefined 都为假
    * */
    // var flag = true;
    // var flag = -1;
    // var flag = " ";
    var flag;
    // if判断
    if (flag) {
        document.write('<h3>为真</h3>');
    } else {
        document.write('<h3>为假</h3>');
    }
</script>

循环

// for
for(var i = 0; i <lenght; i ++){
}
// while
while(条件表达式){   
}
// do...while
do{ 
}while(条件表达式);
continue：跳出本次循环
break：跳出整个循环
<script type="text/javascript">
    // for循环
    for (var i = 0; i < 5; i++) {
        // document.write(i);
        // /n 空格
        document.writeln(i + "<br/>")
    }
    // 补充一个知识点：var生命的都是全局变量
    console.log(i);
    // 补充知识点：es6 提供新的变量声明 let
    for (let j = 0; j < 5; j++) {
        // document.write(i);
        // /n 空格
        document.writeln(j + "<br/>")
    }
    // j is not defined
    console.log(j);
</script>

2.6 函数的使用

普通函数

// 格式
function 函数名(参数列表){
    // js代码
    [return 返回值;]
}
<script type="text/javascript">
    // 普通函数  二个数相加的和
    function sum(a, b) {
        return a + b;
    }

    // 在js中，没有方法重载的概念，重名的函数，后者会覆盖前者
    // 三个数相加的和
    /*
    *  dos 直接调用main给他传递参数
    * main([] args){
    *   获取当前方法参数列表
    * }
    * */
    function sum(a, b, c) {
        // 函数中提供了一个内置对象 arguments，获取参数列表 数组对象
        console.log("参数列表对象:" + arguments);
        console.log("a:" + arguments[0]);
        console.log("b:" + arguments[1]);
        console.log("c:" + arguments[2]);
        return a + b + c;
    }

    // NaN not a number 这不是一个数
    console.log(sum(5, 10, 15));
</script>

匿名函数

// 格式
var fun = function (参数列表){
    [return 返回值;]
}
<script type="text/javascript">
    // 匿名函数
    var fun = function (name) {
        // 补充知识点  bom对象  警告框
        window.alert("你好：" + name);
    }
    fun("森森");
</script>

变量作用域

<script type="text/javascript">
    /*
    * 全局变量
    *   特点：范围在整个页面
    * 局部变量
    *   特点：函数执行完毕，变量销毁
    *   补充知识点：如果在函数内没有使用var声明变量，那么自动为全局变量
    *
    * */

    var a = 5;

    function fun() {
        var b = 10;
        console.log("我是方法内的局部变量B：" + b);
        c = 15;
        console.log("我是方法内的未声明变量C：" + c);
    }

    fun();
    //  b is not defined
    // console.log("我是方法外的局部变量B：" + b);
    console.log("我是方法外的未声明变量C：" + c);
</script>

2.7 轮播图

<script>
    // 注意：在head中编写 js  浏览器的加载顺序 自上而下
    /*
    * 1)获取img标签 dom对象  元素
    *   格式：document.getElementById("")
    *
    * 2）创建js定时器,执行函数
    *   格式：
    *       window.setInterval('函数名()',间隔时间); 单位毫秒
    *              setInterval(函数名,间隔时间); 单位毫秒
    * */
    var myImg = document.getElementById('myImg');
    console.log(myImg);
    // 获取属性的值
    console.log(myImg.src);
    // 给属性赋值
    myImg.src = '../img/1.jpg';

    function show() {
        // 我们使用dw输出内容，会把之前body标签中子标签清空 ，重置body标签
        document.write('<h3>好嗨呦</h3>');
    }
    window.setInterval('show()',2000);
</script>

3 JavaScript事件

属性	描述
onblur	元素失去焦点
onfocus	元素获得焦点
onchange	用户改变域
onclick	鼠标点击事件
ondblclick	鼠标双击某个对象
onkeydown	某个键盘的键被按下
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键松开
onsubmit	提交按钮被点击

3.1事件注册方式

<body>
<input type="button" value="使用普通函数" onclick="show()"> <br>
<input type="button" value="使用匿名函数" id="myBtn">
</body>
<!--
     单击举例 onclick  结合按钮
    // 1）普通函数
    // 2）匿名函数
-->
<script type="text/javascript">
    function show() {
        alert('我是普通函数触发的。。。');
    }
    // 匿名函数 可以是 html标签与js代码进行分离 ，解耦
    // 获取按钮dom对象
    document.getElementById('myBtn').onclick = function () {
        alert("我是匿名函数触发的")
    }
</script>

4 JavaScript内置对象

数组对象

<script type="text/javascript">
    /*
    * 数组对象
    *   格式：
    *       1） var arr = [元素1，元素2...]; 【推荐】
    *       2） var arr = new Array();
    *       3） var arr = new Array(长度);
    *       4） var arr = new Array(元素1，元素2...);
    *
    *
    *      注意：
    *       在js中，数组的长度可以变化
    *       在js中，数组元素的类型任意
    * */

    var arr1 = ['小仓', '波多'];
    console.log(arr1);
    var arr2 = new Array();
    arr2 = ["酒井", "火舞"];
    console.log(arr2);
    var arr3 = new Array(2);
    arr3 = ['小泽', "冲田", 1314];
    console.log(arr3);
    var arr4 = new Array('貂蝉', '西施', '杨玉环', '王昭君');
    console.log(arr4);

    /*
    * 在js中，数组内置很多方法，你发挥很像java的list集合
    *   concat() 连接数组
    *   join(分隔符) 与split功能相反，使用分隔符把数组拼接成一个字符串
    *   reverse() 反转
    *   sort() 排序
    *       字符串按照字母排序
    *       数值需要指定排序类型 降序、升序
    *       sort(function(a,b){
    *           return a-b; 升序
    *           return b-a; 降序
    *       });
    * */
    console.log(arr1.concat(arr2));
    console.log(arr3.join("-"));
    console.log(arr4.reverse());

    var arr5 = ['c', "d", "a"];
    console.log(arr5.sort());

    var arr6 = [9, 3, 1, 7, 11];
    console.log(arr6.sort(function (a, b) { return b-a; }));
</script>

日期对象

<script type="text/javascript">
    // 日期对象  获取当前系统时间
    let date = new Date();
    console.log(date);
    // 内置方法
    console.log(date.toLocaleString());// 显示系统本地时间
    console.log(date.getFullYear());// 年份
    console.log(date.getMonth() + 1);// 月份 0-11
    console.log(date.getDate());// 获取当前日期
    console.log(date.getDay());// 获取今天是周几 0（周日）-6
    console.log(date.getTime()); // 获取1970-1-1 至今毫秒值

</script>

全局对象

<script type="text/javascript">
    /*
    * 字符串转换数值类型
    *     parseInt(); 字符串转换成整型
    *     parseFload(); 字符串转换成浮点型
    *     补充：从字符第一个开转换，当遇到数值型字符停止转换
    *     应用场景   img '300px'  '500px'
    *
    *   NaN not a number 这不是一个数
    *
    *   在js中  isNaN(); 判断字符串如果为非数值类型返回 true  为数值类型 返回false
    *       应用场景，在转换之前先判断字符
    * */

    var a = '5a21.a13a4';
    var b = "a500px";
    console.log(parseInt(b)); // 521
    console.log(parseFloat(b)); // 521.1314
    console.log(isNaN(b));

    /*
    * 编码与解码
    *   浏览器发送数据给服务器 -- 中文 编码
    *   encodeURI(中文)
    *   浏览器接收服务器数据 -- 中文 解码
    *   decodeURI(编码后的中文)
    *
    * */

    var str = "还有谁。。。";
    console.log(str);
    // 编码
    let encodeStr = encodeURI(str);
    console.log(encodeStr);
    // 解码
    console.log(decodeURI(encodeStr));
</script>