JavaWeb开发3

JavaScript

一门跨平台、面向对象的脚本语言,用来控制网页行为,能使网页可交互

js引入方式

  • 内部脚本:将JS代码定义在HTML页面中

    • JavaScript代码必须位于< script >< /script >

    • 在HTML文档中,可以在任意地方,放置任意数量的< script >

    • 一般会把脚本置于< body >元素的底部,可以改善显示速度

  • 外部脚本:将JS代码定义在外部JS文件中,然后引入到HTML页面中

    • 外部JS文件中,只包含JS代码,不包含< script >标签

    • < script >标签不能自闭和

复制代码
<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈</title>
<!--    内部脚本-->
<!--    <script>-->
<!--        alert("hello");-->
<!--    </script>-->
​
<!--    外部脚本-->
    <script src="JS/deno.js"></script>
</head>
<body>
​
</body>
​
</html>

JS书写语法

  • 区分大小写:与Java一样,变量名、函数名及其他一切东西都是区分大小写的

  • 每行结尾分号可有可无

  • 注释

    • 单行注释://

    • 多行注释:/* */

  • 大括号表示代码块

输出语句

  • 使用window.alert()写入警告框

  • 使用document.write()写入HTML输出

  • 使用console.log()写入浏览器控制台

复制代码
<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈</title>
​
</head>
<body>
​
</body>
​
<script>
    window.alert("hello");
    document.write("hellojs");
    console.log("hello3")
</script>
​
</html>

JS变量

  • 用var关键字来声明变量

  • 弱类型语言,变量可以存放不同类型的值

  • 变量名要遵循一定规则

    • 组成字符可以是字母、数字、下划线或美元符号

    • 数字不能开头

    • 建议使用驼峰命名

ECMAScript6

新增了let关键字来定义变量。用法类似于var,但所声明的变量只在let关键字所在的代码块内有效,且不允许重复声明

新增了const关键字,用来声明一个只读的变量。一旦声明,常量的值就不能改变

复制代码
<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈</title>
​
</head>
<body>
​
</body>
​
<script>
    // var a="zhangsan";
    // alert(a);
    // 作用域比较大,全局变量
    // 可以重复定义
    // {
    //     var x="ok";
    //     // alert(x);
    //     var x="aa";
    // }
    // alert(x);
​
    // {
    //     let x=1;
    //     // alert(x);
    //     // let x=2;
    // }
    // alert(x);
​
    {
        const pi=3.14;
        // pi=3.15;
        alert(pi);
    }
</script>
​
</html>

JS数据类型

  • JavaScript这分为原始类型和引用类型

    原始类型

    • number:数字

    • string:字符串,单双引皆可

    • boolean:布尔,true、false

    • null:对象为空

    • undefined:当声明的变量未初始化时,默认为undefined

    使用typeof运算符可以获取数据类型

运算符

==会进行类型转换,===不会

类型转换

  • 字符串类型转数字

    • 如果字面值不是数字,则转为NaN
  • 其他类型转boolean

    • Number:0和NaN为false,其他为true

    • String:空字符串为false

    • Null和undefined:均转为false

流程控制语句

JS函数

  • 函数是被设计为执行特定任务的代码块

  • 通过关键字进行定义

    复制代码
    function functionName(参数){
        //要执行的代码
    }
  • 注意

    • 形式参数不需要类型,JavaScript是弱类型语言

    • 返回值不需要定义类型,可以直接return

  • 调用:函数名称(实际参数列表)

  • 定义方式二

    复制代码
    var functionName=function(参数){
        //要执行的代码
    }
复制代码
<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈</title>
​
</head>
<body>
​
</body>
​
<script>
    // function add(a,b) {
    //     return a+b;
    // }
    // var res=add(2,3);
    // alert(res);
​
    var add=function (a,b) {
        return a+b;
    }
    var res=add(1,2);
    alert(res);
​
</script>
​
</html>
相关推荐
烛阴3 分钟前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言7 分钟前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴17 分钟前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
光而不耀@lgy22 分钟前
C++初登门槛
linux·开发语言·网络·c++·后端
lkbhua莱克瓦2427 分钟前
用C语言实现——一个中缀表达式的计算器。支持用户输入和动画演示过程。
c语言·开发语言·数据结构·链表·学习方法·交友·计算器
Mr__Miss31 分钟前
面试踩过的坑
java·开发语言
啊丢_33 分钟前
C++——Lambda表达式
开发语言·c++
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Chh07151 小时前
《R语言SCI期刊论文绘图专题计划》大纲
开发语言·r语言