第二天训练内容

顾文韬 202205403008

已于 2023-12-21 17:29:07 修改

阅读量458

点赞数 9

文章标签： javascript 前端开发语言

于 2023-12-20 17:13:54 首次发布

本文链接：https://blog.csdn.net/2303_79707932/article/details/135111690

版权

本文详细介绍了JavaScript的基础知识，包括js的三种引入方式、基本语法（如window.alert、document.write和console.log）、变量（var、let和const的区别）、数据类型以及基本运算符，还展示了如何定义和调用函数。

摘要由CSDN通过智能技术生成

js基础知识

1.js引用方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的引入方式</title>
    <script>
        alert("内部引入方式1");
    </script>
</head>
<body>
   <script>
    alert("内部引入方式2");
   </script> 
   <script src="./js/demo1.js"></script>
</body>
<script>
    alert("内部引入方式3");
</script>
</html>

2.js基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js基本语法</title>
</head>
<body>
    
</body>
<script>
    //方式一：弹出警告框
    window.alert("弹出警告框");
    //方式二:写入 html页面中
    document.write("写入html页面中");
    //方式三:控制台输出
    console.log("控制台输出");
</script>
</html>

3.变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量</title>
</head>
<body>
    
</body>
<script>
    //var定义变量
    var a1 = 628;
    a1="变量";
    alert(a1);

    //测试var的作用域为全局变量
    {
       var a2 = 10;
    }
    alert(a2);  

    //测试var可以被重复定义
    {
        var a3 = 10;
        var a3 = "变量";
        alert(a3);
    }

    //let定义变量
    {
        let a4 = 10;
        alert(a4);
    }

    //const声明常量
    const a5 = 50;
    alert(a5);
</script>
</html>

4.js数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据类型</title>
</head>
<body>
    
</body>
<script>
    alert(typeof 10);//number
    alert(typeof 3.14);//number

    alert(typeof "a");//string
    alert(typeof "你好");//string

    alert(typeof true);//boolean
    alert(typeof false);//boolean

    alert(typeof null);//null
    
    var a;
    alert(typeof a);//undefined
</script>
</html>

5.运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运算符</title>
</head>
<body>
    
</body>
<script>
    //==会进行类型转换,===运算符不会进行类型转换
    var a = 10;
    alert(a==10);
    alert(a=="10");
    alert(alert==="10");


    //类型转换-字符串类型转换为数字
    alert(parseInt("20"));//20
    alert(parseInt("47BBC78"));//47
    alert(parseInt("A75"));//NaN-Not a Number


    //其他类型转换为boolean类型
    if(0){
        alert("0 只能转换成flase")
    }
    if(NaN){
        alert("NaN只能转换成flase")
    }
    if(555){
        alert("除了0和NaN以外的数字都能转换成true")
    }//number类型中除了0和NaN以外的数字都能转换成true
    
    if(""){
        alert("空字符串为flase,其他字符串都能转换为true")
    }//空字符串为flase,其他字符串都能转换为true

    if(null){
        alert("null只能转换成flase")
    }//null只能转换成flase
    if(undefined){
        alert("undefined只能转换成flase")
    }//undefined只能转换成flase
</script>
</html>

6.js-函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js函数</title>
</head>
<body>
    
</body>
<script>
    // //定义函数方法一
    // function add(a,b){
    //     return a+b;
    // }

    //定义函数方法二
    var add=function(a,b){
        return a+b;
    }
    //调用个函数
    var result=add(40,50);
    alert(result);
</script>
</html>