超详细快速入门JavaScript详解(一)

目录

一. JS概述&入门

二.JS组成

三. JS引入方式

四. JS-注释

五.JS-变量

1.基本数据类型

2.引用数据类型


一. JS概述&入门

我们为什么要学习JS?: 为了做页面的各种特效

HTML:肉体

CSS:穿衣服/化妆

JS:大脑、灵魂

 

脚本语言:(快)

1、无法独立执行。必须嵌入到其他语言(HTML)中,结合使用。

2、无需编译,直接被浏览器解析执行。

 

Java编程语言:(安全、维护性高、执行效率)

1、独立写程序,独立运行。 编译---执行

2、先编译  后执行

 

  • 举例:
<!--
    从1累加,累加到50,进行控制台展示。
    int sum = 0;
    for(int i=1;i<=50;i++){
        sum+=i;
    }
    System.out.println(sum);
-->
<script>
    /*
    * js注释: 和Java注释一样。有单行注释和多行注释
    * */
    var sum = 0;
    for(var i=1;i<=50;i++){
        sum+=i;
    }
    alert(sum);
</script>

 

  • 小结:
  • JavaScript的执行过程由上到下依次执行 (代码出错会强行停止)

 

 

  • JavaScript没有访问系统文件的权限(安全)
  • JavaScript允许出现一定数量的链式编程

 

 

 

二.JS组成

  • ECMAScript (核心):规定了JS的语法和基本对象。

(if,for,while…..)

  • DOM 文档对象模型:处理网页内容的方法和接口

标记型文档。HTML

(页面特效)

 

  • BOM 浏览器对象模型:与浏览器交互的方法和接口

(浏览器操作(浏览器打开、关闭、地址栏、浏览器桌面上的位置))

 

 

三. JS引入方式

 

向HTML中引入JS代码:

 

  • 内部脚本:(写在HTML页面上)

格式:

<script>

JavaScript的代码

</script>

 

理论上可以放在页面任何位置

建议:

放在<head>标签中

  • 外部脚本:

格式:

<script  type=”text/javascript”  src=”javascript文件路径” ></script>

 

 

  (.js)

 

 

 

  • 注意:

引入外部JS的<script>标签,内容体中不能出现任何代码。

 

 

 

 

四. JS-注释

  • 等同于Java注释
  • 单行注释

//

 

  • 多行注释

/* */

 

 

 

五.JS-变量

<script>
    //仅定义变量,系统赋予默认值:undefined   未赋值
    //等同于  var a1 = undefined;
    var a1;
    alert(a1);

    //定义变量并赋值
    var a2 = 10;
    alert(a2);
</script>

 

  • JavaScript严格区分大小写

var aa   和   var AA   不是同一个变量

 

 

1.基本数据类型

类似于java中的基本数据类型。

  • 举例:
<script>
    /*
    *   Java中的基本数据类型:
    *       byte short int long float double char boolean
    *   JS中的基本数据类型:
    *       string  : 字符串(JS中弱化单字符)
    *       number  : 整数、小数、
    *                   NaN (Not A Number)  不是一个数字
例如:把”ab”转为数字 强转  NaN
    *       boolean : true    false
    *       null    : 空
    *       undefined  : JS默认值
    * */
    var str = "xx";

    var num1 = 10;
    var num2 = 10.55;
    var num3 = NaN;// num3的值不是一个数字

    var f = true;

    var obj = null;

    var aa;//undefined
    var bb = undefined;
</script>

 

 

通过typeof运算符可以分辨变量值属于哪种基本数据类型

 

ECMAScript实现之初的一个bug,null属于基本数据类型,typeof(null)--àobject

举例:

<script>
    //JS中,变量就是一个盘子,任何数据类型的值都能保存
    //需要判断,现在变量里是什么类型的值。  typeof(变量)
    var str = "xxx";
    alert(str+"-----------"+typeof(str));

    str = 10;
    alert(str+"-----------"+typeof(str));

    str = true;
    alert(str+"-----------"+typeof(str));

    str = undefined;
    alert(str+"-----------"+typeof(str));

    str = null;
    alert(str+"-----------"+typeof(str));
</script>

 

 

2.引用数据类型

Java 中的引用数据类型 都是Class(类)

JavaScript中的引用数据类型 都是对象。

 

标准创建方式:

var str = new String();//和java相同

var str = new String;  //js独有的方式

引用数据类型默认值:null

 

 

看完恭喜你,又知道了一点点!!!

你知道的越多,不知道的越多! 

~感谢志同道合的你阅读,  你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!

 

<p> <strong><span style="color:#7030A0;font-size:18px;">Node.js 是一个可以让JavaScript在服务器端运行的系统环境,即运行JavaScript不再依赖于浏览器</span></strong> </p> <p> <strong><span style="color:#7030A0;"><span style="font-size:18px;">Node.js 是一个基于Chrome的JS引擎(V8)所开发的软件程序,可以执行ECMAScript</span><br /></span></strong> </p> <p> <strong><span style="color:#7030A0;font-size:18px;">Node 提供大量API工具库,使JavaScript可以完成更多功能,如IO操作、数据库操作、获取系统资源等。</span><span><br /></span></strong> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span><br /></span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span><strong><span style="color:#E53333;font-size:24px;">本课程以通俗易懂的方式讲解 Node.js 技术,帮您快速入</span></strong><span style="color:rgb(229,51,51);font-size:24px;"><strong><span style="color:#E53333;font-size:24px;">门!</span></strong></span></span><span><strong><span></span></strong><strong><span></span></strong></span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span style="color:#FF0000;"><br /></span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><strong><span style="font-size:18px;">课程内容包括:</span></strong> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span style="font-size:18px;">1.Node.js简介</span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span style="font-size:18px;">2.Node.js环境搭建</span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span style="font-size:18px;">3.模块化简介</span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span style="font-size:18px;">4.模块化的导出和导入</span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span style="font-size:18px;">5.npm简介</span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span style="font-size:18px;">6.npm常用命令和使用</span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span style="font-size:18px;">7.全局模块nrm</span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span style="font-size:18px;">8.第三方模块的安装和使用</span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span><br /></span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><br /></p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span><strong><span style="color:#FF0000;"></span></strong><strong><span style="color:#FF0000;"><span style="font-size:18px;">教学全程采用</span><span style="color:#00B050;font-size:18px;">笔记+代码案例</span><span style="font-size:18px;">的形式讲解,每个知识点都有详细的讲解,通俗易懂!!!</span></span></strong></span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span><strong><span style="color:#FF0000;"><br /></span></strong></span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span><strong><span style="color:#FF0000;"><img src="https://img-bss.csdn.net/202002270701013042.png" alt="" /><br /></span></strong></span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span><strong><span style="color:#FF0000;"><br /></span></strong></span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span><strong><span style="color:#FF0000;"><img src="https://img-bss.csdn.net/202002270701119952.png" alt="" /><br /></span></strong></span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span><strong><span style="color:#FF0000;"><br /></span></strong></span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span><strong><span style="color:#FF0000;"><img src="https://img-bss.csdn.net/202002270701213806.png" alt="" /><br /></span></strong></span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span><strong><span style="color:#FF0000;"><br /></span></strong></span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span><strong><span style="color:#FF0000;"><img src="https://img-bss.csdn.net/202002270701311685.png" alt="" /><br /></span></strong></span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span><strong><span style="color:#FF0000;"><br /></span></strong></span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span><strong><span style="color:#FF0000;"><br /></span></strong></span> </p> <p style="color:rgb(66,66,66);font-size:14px;background-color:rgb(255,255,255);"><span><strong><span style="color:#FF0000;"> </span></strong></span></p><p><strong> <span><span style="font-size:18px;">讲师介绍</span><span><span><span></span></span></span><span><span></span></span></span> </strong></p><strong> </strong><p><strong> <img src="https://img-bss.csdn.net/201912191423463144.jpg" alt="" /></strong></p><strong> <span style="font-size:18px;"></span></strong>
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页