引入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写代码

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

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

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

打断点的方式:

  • 点击要打断点的地方

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

  • 右侧上方有调试的按键

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

Step into next function call 点击会下一步,会进入方法

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

Deactivate breakpoints 点击变为蓝色,蓝色表示会忽略所有断点

Application存储一些网页数据,

JavaScript快速上手的更多相关文章

  1. 快速上手RaphaelJS-Instant RaphaelJS Starter翻译(一)

       (目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Start ...

  2. knockoutJS 快速上手

    翻译:Knockout 快速上手 - 3: knockoutJS 快速上手 许多时候,学会一种技术的有效方式就是使用它解决实际中的问题.在这一节,我们将学习使用 Knockout 来创建一个常见的应用 ...

  3. Java 程序员快速上手 Kotlin 11 招

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:霍丙乾 近经常会收到一些 "用 Kotlin 怎么写" 的问题,作为有经验的程序员, ...

  4. 官方 React 快速上手脚手架 create-react-app

    此文简单讲解了官方 React 快速上手脚手架的安装与介绍. 1. React 快速上手脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布 ...

  5. 【技术文章】《快速上手nodejs》

    本文地址:http://www.cnblogs.com/aiweixiao/p/8294814.html 原文地址: 扫码关注微信公众号 1.写在前面   nodejs快速上手   nodejs使ja ...

  6. 从零开始学 Web 之 Ajax(三)Ajax 概述,快速上手

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. Flask入门和快速上手

    目录 Flask入门和快速上手 python三大主流框架对比 Flask安装 依赖 可选依赖 创建flask项目 flask最小应用--hello word 非法导入名称 调试模式 路由 唯一的 UR ...

  8. [Full-stack] 快速上手开发 - React

    故事背景 [1] 博客笔记结合<React快速上手开发>再次系统地.全面地走一遍. [2] React JS Tutorials:包含了JS --> React --> Red ...

  9. webpack快速入门——webpack3.X 快速上手一个Demo

    1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放 ...

随机推荐

  1. VS中使用TreeView的Checked属性问题

    VS中使用TreeView,当需要用到Checked属性,并需要同步子节点和父节点的Checked属性时,若使用AfterCheck事件会导致死循环,这里我使用的是NodeMouseClick事件.代 ...

  2. codeforces 8B

    B. Obsession with Robots time limit per test 2 seconds memory limit per test 64 megabytes input stan ...

  3. Makefile 赋值 函数定义 等小知识点

    1.赋值 == 到用的时候实际才去赋值:= 立刻赋值?= 未赋值才赋值+= 2.多层变量 多层变量引用(各种复杂组合...)a =bb= cc= dd =1$($($($(a)))) 最终等于1 3. ...

  4. CSS 设置多行文本省略号 ...

    CSS 设置多行文本省略号 ... .box{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: ...

  5. AI & HR

    AI & HR 数字化人才画像 人力资本数字化管理 通过"AI+数据+专家"的手段,将"数字化人才画像"作为服务起点与信息入口,扩展提供全场景的数字化人 ...

  6. flutter 1.5 in action

    flutter 1.5 in action https://flutter.dev/docs/get-started/flutter-for/react-native-devs https://flu ...

  7. js & array remove one item ways

    js & array remove one item ways // array remove one item ways let keys = [1,2,3,4,5,6,7]; let ke ...

  8. Dart: 请求graphql数据

    import 'package:http/http.dart' as http; const url = "http://127.0.0.1:4000/graphql"; main ...

  9. JS实现点击加载更多效果

    适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

  10. 【C#】反射的用法及效率对比

    反射实例化类 public class Person { public string Name { get; set; } public Person(string name) { this.Name ...