【Javascript Day1】javascript基础-CSDN博客

javascript编程规则

弹窗（举例）

alert("内容")，直接写在控制区生效

三种写法

1、行内js语法：需要注意引号的问题
<input type="button" value="提示窗" οnclick=' alert("消息") '>

（onclick : 为标签绑定一个数据的左键点击功能，οnclick=" 写js代码 "）

2、内联js语法
<input type="button" value="提示窗" οnclick=" show() ">
<input type="button" value="提示窗2" οnclick=" 消息() ">
（show、消息为类似id的名字，必须唯一，重复则覆盖）

function show(){
alert("消息")
}
// 后续代码覆盖前面的代码
function show(){
alert("昨天")
}

3、外联js语法
<input type="button" value="提示窗" οnclick="showTip()">
然后通过<script src="./文件路径.js"></script>联系js文件

js注释方法

// 单行注释
/*
多行注释
*/
/**
文档注释
*/

js结果输出

<script>
function outMsg1(){
            // 控制台输出
            //    ==> 程序员的开发过程中的调试
            //    ==> 页面彩蛋
            console.log("控制台输出1"); // 日志输出
            console.error("控制台输出2"); // 错误输出
            console.warn("控制台输出3"); // 警告输出
            console.info("控制台输出4"); // 提示
        }

function outMsg2(){
            // 页面输出
            //  第一次调用时，将整个页面进行替换，连续多次的输出都会保留
            //  不换行
            document.write("页面输出1");
            document.write("页面输出2");
            document.write("页面输出3");
            // 换行输出，以html不识别的换行方式进行输出（显示为空格）
            document.writeln("页面输出4");
            document.writeln("页面输出5");
            document.writeln("页面输出6");
            // 通过定义标签的方式，向页面写入结果，浏览器一样会解析标签
            document.write("页面输出7<br>");
            document.write("页面输出8<br>");
            document.write("页面输出9<br>");
            document.write("页面输出10<br>");
        }

 function outMsg3(){
            // 信息提示弹出（从上到下依次显示，如果不操作则显示第一个）
            alert("弹窗输出1");
            // alert("弹窗输出2");
            // alert("弹窗输出3");
            // alert("弹窗输出4");
            // alert("弹窗输出5");
            // 确认弹窗
            confirm("弹出输出6")   （有确认和取消按钮）
            // 输入弹窗
            prompt("输入弹窗")      （多一个输入框）
        }

</script>

<body>
    <input type="button" value="控制台输出" onclick=" outMsg1() ">
    <hr>
    <input type="button" value="页面输出" onclick=" outMsg2() ">
    <hr>
    <input type="button" value="弹窗输出" onclick=" outMsg3() ">

</body>

js变量定义和使用

<script>
        // 变量：可变的数据存储区域
        // 1. 变量声明
        // function var 标识符
        // var 用于定义变量
        // 语法  var 变量名;

        // 定义了一个名字叫做arg的变量
        var arg;
        // 变量赋值
        arg = "数据";

        function printArg(){
            // 调用变量
            alert( arg )
        }
        function setArg(){
            // 变量的赋值
            arg = "新数据";
        }

        // 声明(定义)变量时可以直接赋值
        var msg = "msg数据";

        // 一次性声明多个变量，并进行赋值
        var a="a值" , b="b值" , c="值";

        // JS 虽然变量名是根据需要自行定义的,需要遵守规则规范
        //     *语法规范： 变量名只能用以 数字 字母 _ $ 组成，不能以数字开头 ==> 报错，程序不能运行
        //     *约定规范： 变量使用英文单词的名词，名称要有含义 ==> 为了让代码阅读更加流程

        // var +name = "张三"; //非法
        var name12 = "李四"; // 合法
        // var 33name = "王五"; // 非法

        var age = "数据1";
        var age = "数据2";
        // 区分大小写
        var Age = "数据3";

        function printAge(){
            console.log(age);
        }
        // var var = "数据"; // 变量名不能使用标识符

        // 变量名由多个单词组成时，需要从第二个单词开始首字母大写 => 驼峰命名规则
        var homeTel = "18913000000";
        

    </script>

<body>
    <input type="button" value="输出变量arg的值" onclick="printArg()">
    <br>
    <input type="button" value="对变量arg重新赋值" onclick="setArg()">
    <br>
    <input type="button" value="输出age" onclick="printAge()">
</body>

// 自动执行，直接写大括号内内容跳过onclick,页面刷新自动执行
var name = "张三";
console.log( name );

js变量类型

<script>
        // 变量记录和存储数据
        //      数据基于功能不同，类型也不同
        //      不同的类型可以在程序中进行不同的操作
        // 例子：要求把   张三   和   100  求和 ，  无理：求和只能发生在数字和数字之间
        
        // 简单数据类型：String 字符串
        //             Number 数值 => 特殊取值 Infinity NaN
        //             Boolean 布尔真假
        //             undefined 未定义 
        //             null 空


        var str = "字符串"; // 字符串 - 文本
        var str1 = '字符串';
        var str2 = "100"; // 字符串

        var num = 100; // 数值
        var num1 = -100;
        var float = 22.22;
        // var float2 = abc; // 报错
        // 数值类型数据 
        var num4 = Infinity; // 正无穷
        var num5 = -Infinity; // 负无穷
        var num6 = NaN; // 该变量被赋予的数据，不是一个数值数据 => not a number
        // console.log( 100/2 ); // 除非运算
        // console.log( "abc"/2 ); // 除非运算

        // 布尔值 => boolean => 是或不是
        //       有效值 true （是）
        //                   false （否）
        var flag = true; 
        var flag1 = false; 

        // undefined 值 ==> 表示变量没有赋值
        var arg1 = undefined;
        console.log(arg1);
        var arg2;
        console.log(arg2);

        // null 值 ==> 变量值为 空
        var arg3 = null;
        console.log(arg3)

        

    </script>

字符串数据的使用

<script>

        var name = "张三";

        // console.log( "我是" );
        // console.log( name );
        // console.log( "我是name" );
        console.log( "我是"+name ); // 字符串拼接

        name = "豆豆";
        console.log( "我是"+name ); // 字符串拼接

        // 字符串的运算
        //     + 关键字可以实现多个字符串的拼接
        var str1 = "-字符串1";
        var str2 = "-字符串2";
        console.log( str1 + str2 );
        var str3 = str1 + str2; // 将str1和str2变量的值进行拼接，赋值给 str3
        console.log( str3 );//输出为 -字符串1-字符串2

        var str4 = "新字符串" + str2;
        console.log( str4 );输出为 新字符串-字符串2


        var msg1 = 'JS学习时知道定义字符串变量使用的语法是: var 变量名 = "字符串值" ';
        console.log(msg1)
        // 字符串定义时，必须通过 关键字 ""  或者 '' 包裹，此时最外面的 "" '' 不是内容，是关键字
        //      成对的符号，基本都是就近匹配
        //      转移符 \ 转移符用于定义或者匹配一些特殊字符
        var msg2 = " JS学习时知道定义字符串变量使用的语法是: var 变量名 =" \"字符串变量\" ";
 //  \" 告诉js 当前的"不是关键字
        console.log(msg2)
        
        // 目前，代码定义字符串不能换行，如果一定要换行，通过 \n 定义换行文字， \n 换行符
        var msg3 = "aaaa\nbbbb";
        console.log(msg3);

        // \t 缩进符 => tab 键 => 由多个空格组成 => 空格数量是可以调整
        var msg4 = "\tabc";
        console.log(msg4)

        // var msg5 = "\"";(输出")
        var msg5 = "\\";(输出\)
        console.log(msg5)

        var msg6 = "\\\\\\\\\\";
        console.log(msg6)  （输出\\\\\）


        // var name = "张三"
        // document.write("<h1 style=\"color:red;\">" + name + "</h1>");(输出红色大号张三)
        //等效为document.write("<h1 style=\"color:red;\">张三</h1>");
    </script>