JS引入方式

1 行间引入

<!-- 第一种 行间引入 将js的语法直接写在开始标签上
         注意:双引号不能嵌套双引号  单引号也不能嵌套单引号  但是双引号和单引号可以相互嵌套
         onclick  鼠标点击事件
         alert("提示信息")  浏览器弹窗
         缺点:结构行为不分离  不方便后期维护
     -->
    <button onclick="alert('今天周一')">提交</button>

2 内部引入

<!-- 
        第二种 内部引入 
        js代码放在script标签中 script标签可以放在任意位置  代码的执行顺序是从上往下执行
        建议:一般放在head和body的末尾 是因为js一般都是操作标签 我们要确保标签先加载出来
        缺点:结构行为不分离
     -->
     <script>
        //浏览器弹窗
        alert("弹走弹走6")
        //操作div标签   操作p标签
    </script>

3 外部引入

<!-- 第三种 外部引入
             在外部创建js文件 通过script标签的src属性引入文件 src="js文件路径"
             注意:引入外部文件的script标签 里面不能再写其他的js脚本
    -->
    <script src="./1.js">
        // alert("没有弹走")  不要在这里面再写其他的js代码
    </script>
    <script>
        alert("没有弹走")
    </script>

 

语法规则与注释

<body>
   
    <!-- 注释
        单行注释 //  一行js代码  快捷键是ctrl+/
        多行注释 /*  多行js代码 */  快捷键是ctrl+shift+/
    -->
    <!-- js的语法
        1-每行语句后面要加;
        2-js中严格区分大小写,有时候会使用驼峰命名 fontSize
    -->

    <script>
        /*  */
        // 
        alerT("123");
    </script>
</body>

JavaScript的调试语句

js调试:在实际开发过程中用于检测代码的功能的一种方式

1.alert()

  • 语法: alert(提示信息)
  • 作用: 在页面中弹出警告框,用于提示
  • 缺点: 阻塞性的弹窗 一次只能输出一个
<script>
       alert("提示信息");
       alert("你在说什么");
       console.log("123")
    </script>

 

2. console.log()

  • 语法:console.log(输出信息)
  • 作用:在控制台打印信息 多个输出之间用逗号隔开
<script>
        //2.console.log()
        console.log("中午吃啥");
        console.log("米饭","泡面","西北风");
    </script>

 

3. 打断点

  • 在sources找到当前运行的文件---在打断点的代码行号上点击

3 变量

  • 概念:存储数据的容器 称作变量(标识符) 给存储数据的区域起个名字
  • 语法:var 变量名 = 值
  • 基础用法
<script>
        // 1.声明变量--基础用法
        var a;
        console.log(a);//undefined  未定义 声明了变量但是没有赋值
        //2 赋值   读法:将右侧数据123赋值给左边的变量a
        a = "123";
        console.log(a);//123

        //3.声明变量和赋值同时进行
        var b = "456";

        //4.同时声明多个变量 逗号意味着这行代码没有结束
        var c = "泡面", d = "赵四";
        console.log(c, d)//泡面 赵四

        //5.连等写法  x y的值都是”789
        var x = y = "789";
        console.log(x, y);// 789 789

    </script>

特殊用法

//6.特殊用法  不建议使用
        t = "10";//全局变量
        console.log(t);//10

        console.log(a1);//a1 is not defined  没有声明没有赋值
        
        var a2;
        console.log(a2);//undefined   只是声明了变量  但是没有赋值

变量的命名规则

以数字 字母 下划线 $组成,但是不能以数字开头

不能使用关键字和保留字

见名知意 使用驼峰命名(大驼峰和小驼峰都可以)

变量不要重名 重名会覆盖