web前端开发之JavaScript知多少?

举报
运气男孩 发表于 2020/07/17 23:31:48 2020/07/17
【摘要】 js和我们之前学的html有什么区别呢?与Java又有哪些异同? js又有什么特色呢 ? 这里我将结合对比java来给大家讲解一下,js用来干什么 ,这里一一介绍了。

结束了第一阶段html/css的学习的小伙伴们,终于迎来了第二阶段js的学习!


这时候就有小伙伴问了,js和我们之前学的html有什么区别呢?


一、基础不同

1、JS代码:基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。


2、html代码:是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。


二、用处不同


1、JS代码:用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。


2、html代码:结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。


三、特点不同


1、JS代码:主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。


2、html代码:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。


下面,让我们一起揭开JavaScript的神秘面纱!!!


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言

    JavaScript又是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。


:java和JavaScript没有任何的血缘关系,java是是由Sun 公司于1995年5月推出的,而javascript是于1995年由Netscape公司设计实现而成的,由于Netscape公司与Sun公司合作,Netscape高层希望它看上去能够像Java,因此取名为JavaScript!

举个例子:Java是李逵,JavaScript是李鬼,hhhh。


而一个完整的JavaScript应该由下列三个不同的部分组成

  • 核心(ECMAScript)

  • 文档对象模型(DOM)

  • 浏览器对象模型(BOM)


它能用来干什么呢?


js的一些用途:


  • 嵌入动态文本于HTML页面。

  • 对浏览器事件做出响应。

  • 读写HTML元素。

  • 在数据被提交到服务器之前验证数据。

  • 检测访客的浏览器信息。 

  • 控制cookies,包括创建和修改等。//关于cookie和node.js 后期阶段我们会了解到  这里不作解释 感兴趣的小伙伴可以自行查询

  • 基于Node.js技术进行服务器端编程。


js又有什么特色呢,让这么多的前端工程师连声叫好?


JavaScript脚本语言具有以下特点:


(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。


(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。


(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。


(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。


(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,JavaScript已被大多数的浏览器所支持。 不同于服务器端脚本语言,例如php与ASP,JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担,而与此同时也带来另一个问题:安全性。而随着服务器的强壮,虽然程序员更喜欢运行于服务端的脚本以保证安全,但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时,有些特殊功能(如AJAX)必须依赖Javascript在客户端进行支持。

JavaScript的定义方式

1)方式一:直接定义在事件中://行内式

<input type="button" value="第一个按钮" onclick="alert('hello world');"/>

 

注意:onclick="alert('hello world'); //字符串用单引号或双引号隔开,此处用单引号,因为会和前面的双引号成对。


2)方式二:在页面上<head></head>标签中嵌入<script></script>标签,标签中放置JavaScript代码://内嵌式

例如:


<head>  
<meta charset="utf-8"/>
   <script language="javascript" type="text/javascript">
        console.log("hello,world!");  
  </script>    
</head>



3)方式三:将代码写在单独的.js文件中,在html页面的<head>里使用<script>引入://外链式


<head>        
    <script language="javascript" src="myScript.js"></script>                
</head>

 

JavaScript的代码错误查看

1)解释性代码,若代码错误,则页面无任何效果。

2)IE浏览器:使用开发工具。

3)Firefox浏览器:使用错误控制台查看。


JavaScript的注释

单行注释 // 注释语句 快捷键ctrl+/

多行注释 /* 注释语句 */    快捷键ctrl+shift+/   

注意:多行注释相互不能嵌套使用,只能在多行注释里面使用单行注释!


数据类型:

Js中的数据类型:

 

数值型:number(凡是数字都是数值型,不区分整数和小数)

字符串:string(凡是引号包裹起来的内容全部都是字符串)

布尔:boolean(true、false)

对象类型:object(特殊取值null)

未定义型:undefined


对比java中的数据类型:


整数:byte short int long

小数:float double

字符:char 

布尔:boolean

字符串:String

变量:

定义:就是存放数据的、内疗可以存储任意数据


声明变量:


 var 变量名称 = 存储的数据;    (variable 变量)



变量命名规范:


1. 只能由字母、数字、_(下划线)、$(美元符号)组成。

2. 不能以数字开头。

3. 命名中不能出现-(js会理解成减号进行减法的操作),不能和关键字冲突。

js是弱类型语言,不重视类型的定义,但js会根据为变量赋值的情况自定判断该变量是何种类型:


数值型:var i = 1; var d = 2.35;

字符串:var str = "用心学习";

布尔型:var b = true;

对比Java:


java是强类型的语言,注重类型的定义,Java定义类型如下:


整型:int i = 1;

浮点型:double d = 2.35;

字符串:String str = “用心学习”;

布尔型:boolean b = true;

总结:js中变量的定义。只要加一个var就行。java则使用什么类型的变量就要定义什么类型的。


检测数据类型:

typeof(value); 或者typeof value;     返回这个变量的类型. 

说明 : 同一个变量, 可以进行不同类型的数据赋值.

<script type="text/javascript">
    
    var a;
    alert(typeof a);  // undefined
 
    a = 998;
    alert(typeof a); // number
 
    a = "用心学习";
    alert(typeof a); // string
 
    a = true;
    alert(typeof a); // boolean
    
</script>

算术运算符

+ - * / % ++ --

注意:


1. 由于js中的小数和整数都是number类型,不存在类似整数除以整数还是整数的结论。

2. 字符串和其他的数据使用+号运算,会连接成一个新的字符串。

3. 字符串使用除了+以外的运算符:如果字符串本身是一个数字,那么会自动转成number进行运算

,否则就会返回一个NaN的结果,表示这不是一个数字。NaN:not a number

<script>
 
    alert(1234 / 1000 * 1000); // 1234
  
    var s = "12";
     s -= 10;
    alert(s);  // 2
 
    var s = "aa";
    s -= 10;
    alert(s);  // NaN       Not a Number 不是一个数字
 
    var s = "12";
    s += 10;
    alert(s);       // 1210 
 
</script>

关系(比较)运算符

> >= < <=   !=

== 等于(只比较内容) === 恒等于(比较内容的同时还要比较数据类型)

注意:关系运算符返回的结果只有两个:true / false

<script>
 
    // 请问1 : 3 > 5, 结果为 ?
    alert(3 > 5);   // false
 
    // 请问2 : “22” == 22  结果为 ?
    alert("22" == 22); // true  (仅仅判断数值)
 
    // 请问3 : “22” === 22  结果为 ?
    alert("22" === 22);  // false  (恒等于, 数值和类型都要相等)
    
</script>

逻辑运算符

&&   true&&false ====>false

||  true||false ====>true

!  !true ====>false

false(理解):false,  0,  null,  undefined 

true(理解):true, 非0,  非null,  非undefined

 

针对 && 顺口溜: 找第一个出现的假值. (一假即假)


针对 || 顺口溜: 找第一个出现的真值. (一真即真)

演示一:


<script>
 
    // 短路与 (一假即假)
    // 口诀 : 找第一个为假的值.
 
    // 请问1 :  8 < 7 && 3 < 4, 结果为 ?
    alert(8 < 7 && 3 < 4);  // false
 
    // 请问2 :  -2 && 6 + 6 && null 结果为 ?
    alert(-2 && 6 + 6 && null); // null
 
    // 请问3 :  1 + 1 && 0 && 5  结果为 ?
    alert(1 + 1 && 0 && 5); // 0
</script>

演示二:


<script>
 
    // 短路或 : 一真即真.
    // 口诀 : 找第一个为真的值.
 
    // 请问1 :  0 || 23 结果为 ?
    alert(0 || 23); // 23
 
    // 请问2 :  0 || false || true  结果为 ?
    alert(0 || false || true); // true
 
    // 请问3 :  null || 10 < 8 || 10 + 10结果为 ?
    alert(null || 10 < 8 || 10 + 10);  // 20
 
    // 请问4 :  null || 10 < 8 || false结果为 ?
    alert(null || 10 < 8 || false); // false
    
</script>

三元运算符:

条件?表达式1:表达式2

如果条件为true,返回表达式1的结果

如果条件为false,返回表达式2的结果

演示:


<script>
 
    // 请问1 :  3 ? “aaa” : “bbb” 结果为 ?
    alert(3 ? "aaa" : "bbb");       // aaa
 
    // 请问2 :  0 ? “ccc” : “ddd”  结果为 ?
    alert(0 ? "ccc" : "ddd");       // ddd
    
</script>

if条件语句

这个和Java中if语句一样。


演示:


<script>
 
      var score = 59;
 
      if (score >= 90) {
          alert("优秀");
      } else if (score >= 80) {
          alert("良好");
      } else if (score >= 60) {
          alert("及格");
      } else {
          alert("不及格");
      }
 
  </script>

switch分支结构

这个和java中switch结构一样。只是Java中表达式为:常量 整型(去long)、字符、字符串


演示:

<script>
 
      var score = 59;
 
      // 需求 : 将需要一个整型数值, 不想要小数点.
      // window 对象的 parseInt 方法.
      score = window.parseInt(score / 10 + "");
      // alert(score);
 
      switch (score) {
          case 10:
          case 9:
              alert("优秀!");
              break;
          case 8:
              alert("良好!");
              break;
          case 7:
          case 6:
              alert("及格!");
              break;
          default:
              alert("不及格!");
              break;
      }
 
  </script>

循环结构 while、do-while. for;

while(循环条件){循环体;}


do{循环体;}while(循环条件);


for(循环变量赋初值;循环条件;循环变量增值){循环语句;}


console.log(...); 以日志的形式在控制台输出结果!

演示:


<script>
 
    // 需求 : 统计 1~100 之间能够被3和7整除的数字个数
 
    var count = 0;
 
    // 1. 遍历 1~100 之间的所有整型数值
    for (var i = 1; i <= 100; i++) {
 
        // 2. 判断
        if (i % 3 == 0 && i % 7 == 0) {
            // alert(i);
            console.log(i);
            // 3. 累加个数
            count++;
        }
    }
 
    // 4. 查看结果
    // alert(count);
    console.log(count);
</script>

 

console.log显示如下:

image.png




循环嵌套

演示案例9*9乘法表


<style>
        table {
            /* 将 table 表格的线变成了细线 */
            border-collapse: collapse;
            /*color: red;*/
            border-color: red;
        }
    </style>
 
    <script>
 
        // 需求 : 九九乘法口诀表
        document.write("<table border='1px solid red' cellspacing='0' cellpadding='8px'>");
        document.write("<caption>九九乘法口诀表</caption>");
        for (var i = 1; i <= 9; i++) {
            document.write("<tr>");
            for (var j = 1; j <= i; j++) {
                document.write("<td>");
                document.write(j + "*" + i + "=" + (j*i) + "&nbsp;&nbsp;&nbsp;&nbsp;");
                document.write("</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");
 
    </script>

效果如下:

image.png



这次就介绍到这,且听下回分解!886

祝:长风破浪会有时,直挂云帆济沧海!



【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。