JavaScript快速上手

引入JavaScript项目

 

在html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--  script标签内，写JavaScript  -->
<!--    <script>-->
<!--        alert("hello world");-->
<!--    </script>-->
    <script src="js/aj.js"></script>
</head>
<body>

</body>
</html>

在js/aj.js中

alert("hello, world")
  • 不用定义type="text/javascript"也是默认为JavaScript
<script type="text/javascript"></script>

 

基本语法入门

js代码的注释和Java是一样的

JS的调用方式

  1. js可是内部调用
<script>
  
 </script>
  1. js也可以外部引入，不易
<script src="js/aj.js"></script>

 

JS变量的方式

定义变量   Java中是   变量类型  变量名 = 变量值; 但是，JavaScript中没有变量类型，所有变量都是 var类型只要你按照Java的规范写JavaScript，不会出错，JavaScript严格区分大小写

<script>
        //1. 定义变量   Java中是   变量类型  变量名 = 变量值;
        //     JavaScript中没有变量类型，所有变量都是 var类型
        var num = 1;
        var name = "zhangsan";
        alert("num = "+num +" name = "+name);
    </script>

条件控制

//2. 条件控制
var source = 65;
if(source >60 && source < 70){
  alert("60-70");
}else if(source >70 && source < 80){
  alert("70-80");
}else{
  alert("other");
}

调试JavaScript

点击浏览器的F12进入开发者模式，选着Console控制台，就可已在Console写代码

image.png

 

调试JavaScript的方式一：比如想要显示source这个变量的值，可以在console里面写alert(score);然后点回车，就会弹出source的值

image.png

调试JavaScript的方式二：也可以使用console.log(score);点击回车，显示source这个变量的值

image.png

image.png

//3. JavaScript调试
console.log(score);//相当于Java的System.out.println();

 

 

image.png

打断点的方式：

  • 点击要打断点的地方

image.png

  • F5刷新，就可以进入断点

image.png

  • 右侧上方有调试的按键

可以在Chrome中修改JavaScript代码，修改后点击Ctrl+S是保存自己的更改

 

image.pngStep into next function call 点击会下一步，会进入方法

image.png Step over next function call 点击会继续下一步，但是不进入方法内部

image.pngDeactivate breakpoints 点击变为蓝色，蓝色表示会忽略所有断点

 

Application存储一些网页数据，

image.png

 

posted @ 2020-11-27 10:17  realize00  阅读(27)  评论(0)    收藏  举报