JavaScript学习总结(一)

概述

前端三剑客,html、css、js。 这三种语言基本是前端开发必备的东西,那么你知道这三种语言分别负责的功能是什么吗?

  • html:负责了一个页面的结构
  • css:负责页面的样式
  • JavaScript:负责与用户进行交互

html与css的功能不做赘述,那么,JavaScript是如何负责与用户进行的交互呢? 比如说,我们在网页上输入一个账号,账号的格式要求是必须全部是数字,结果你输入了12343a,这时候网页会给出相应的提示,就是这个意思。 1997年欧洲的计算机协议(ECMA)组织给javascript规定了相关的协议 JavaScript由三部分构成:

  • ECMAScirpt(规范了基本的语法)
  • BOM (浏览器对象模型)
  • DOM (文档对象模型)

接下来我们来介绍一下JavaScript特点:

  • 安全性(javascript的代码不能直接访问硬盘的内容)
  • 跨平台(很简单,只要有浏览器,就可以运行js)

最后来说一下javascript与java之间区别 :

  • javascript是属于网景公司产品, java是sun公司的产品
  • javascript是基于对象的语言,java是面向对象的语言 基于对象:不具备面向对象的三大特征,但是有对象
  • javascript是解释型语言;java是解释、编译型语言
  • javascript是弱类型语言, java 是强类型语言 java中声明变量的时候必须要明确该变量的数据类型 javascript声明变量不需要明确是何种数据类型, 任何的变量都是使用一个关键字var去声明的

在了解了JavaScript的一些基本内容之后,我们就要进入JavaScript的编写工序了!

如何编写JavaScript的代码

1.首先说一下JavaScript中常用的函数

  • alert(”显示的内容”) ——弹出框
  • document.write(”数据”)——-向页面输出数据
//1. 可以使用 <script> 标签体内进行编写,代码如下
<script type="text/javascript">
    alert("666");
</script>

这个时候浏览html页面的时候就会弹出窗口,并显示666。

//2. 可以引入外部的javascript文件
    格式: 
        <script src="1.js" type="text/javascript"></script>
    注意: 
        1.<script>是有开始标签与结束标签的,千万不要在一个标签中结束了
        2.如果<script>已经用于引入了js文件,那么该<script>标签体就不能再写js代码了

2.注释 //注释的内容 单行注释 /* 注释的内容*/ 多行注释

3.JavaScript的变量声明 格式:var 变量名 = 数据

<script type="text/javascript">
    var a = 10;
    document.write("a="+a+"<br/>");
</script>

声明变量要注意的事项: 1. 在javascript中声明变量是使用var关键字声明的,javascript中的变量可以存储任意的数据类型数据 2. javascript中变量数据类型是根据存储的值决定的,可以随时更改存储数据的类型 3. 定义了多个同名的变量是,后定义的同名变量是覆盖前面定义的同名变量 4. 声明变量的时候可以省略var关键字,但是不建议省略

JavaScript的数据类型 typeof: 查看变量的数据类型。

使用格式:

        typeof 变量名      

javascript的数据类型:

number 小数与整数

string 字符串 注意: javascript中没有字符的概念,只有字符串,字符串可以写在单引号或双引号中。

boolean 布尔数据类型,

undefined  undefined代表该变量没有定义

typeof使用方法如下:

var a = 10;
    document.write("a的数据类型是"+(typeof a)+"<br/>");

将字符串转换成数字 用到的方法有:

  • parseInt()—-将一个字符串转换成整数。 如果接收的字符串含有非数字字符,那么parseInt方法会从字符串的首个字符开始寻找,一直找到非数字字符为止,然后就使用前面的数字字符转换成数字
var a = "a123";
var b = parseInt(a);
document.write("字符串a转换后的数字是:"+b+"<br/>");

var a = "123abc123";
var b = parseInt(a);
document.write("字符串a转换后的数字是:"+b+"<br/>");

var a = "012";
var b = parseInt(a);
document.write("字符串a转换后的数字是:"+b+"<br/>");

输出结果如下:

字符串a转换后的数字是:NaN not a number(不是一个数字)
字符串a转换后的数字是:123
字符串a转换后的数字是:12  如果首位是0,那么就先去掉0在进行转换
字符串a转换后的数字是:18  如果一个字符串是以0x开头,那么会把字符串中的内容当成十六进行的数据处理
  • parseFloat()—–将一个字符串转换成浮点型数字。 代码如下:
<script type="text/javascript">
    var a = 3.14;
    var b = parseFloat(a);
    document.write("结果是:" + b);
</script>

这里输出的结果是3,14 根据上面的这些例子,我们可以知道,并不是所有的字符串都可以转换成数字,那么,我们应该如何判断一个字符串是否能够转换成数字呢? JavaScript提供了一个IsNaN(is not a number)的方法帮助我们判断字符串是否可以转换成一个数字。千万注意的是,这个方法和以往的方法有做不同,这个方法中,不是一个数字返回true,是一个数字返回false。(有点反人类。。)

4.运算符 学到这一步,其实在其他语言(c或者java)中这部分内容都要介绍烂了,我只写一些比较重要的内容。

  • 一个数值加减true,其实是加减的0。而在java中,数字不能与布尔值相加减
  • 如果两个整数相除不能整除的时候,数值为小数
  • 比较运算符:字符串和字符串也能够比较、字符串能够与数字进行比较(先将字符串转换成数字再进行比较) 比较规则如下:
/*
字符串与字符串的比较规则是:

    情况1: 能找到对应位置上的不同字符,那么就比较第一个不同字符的大小。

    情况2: 不能找到对应位置上的不同字符,这时候比较的是两个字符串的长度。

*/
<script type="text/javascript">
    document.write("10字符串和3的字符串比较谁的大?"+("19">"18888"+"<br/>"));
</script>

所以,上述代码输出的结果应该是true。

  • 逻辑运算符:没有单与(&)单或(|),只有短路与(&&)和短路或(||)
  • 三目运算符:布尔表达式?值1:值2

5.控制流程语句

  1. if语句 特殊之处: 在javascript中的if语句条件不单止可以写布尔表达式,还可以写任何的数据。 number 非0为true, 0为false. string 内容不空是true, 内容空的时候是false。 undefined:false NaN: false
  2. 选择语句 特殊之处:在javascript中case后面可以跟常量与变量,还可以跟表达式 代码如下:
var option = "A";
var a = "A";
var score = 66;
switch(option){
    case a:
        document.writeln("90分");
        break;
    case "B":
        document.writeln("80分");
        break;
    case score>60?"C":"B" :
        document.writeln("60分");
    default:
        break;
             }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SpringCloud专栏

JEasyframe使用教程2 项目结构

   以AreaDAO为例,里面非常简单,直接extendsBaseDAO传入javabean类即可。BaseDAO里面功能很多,基本能涵盖主要的db操作方法。...

14140
来自专栏SpringCloud专栏

如何复制一个java对象(浅克隆与深度克隆)

在项目中,有时候有一些比较重要的对象经常被当作参数传来传去,和C语言的值传递不同,java语言的传递都是引用传递,在任何一个...

1.6K10
来自专栏SpringCloud专栏

1Java学习笔记之数据结构——单链表

前两天找工作面试过程中,被一家搞大数据的问到了二叉树、算法相关的,本来大学时就没学好,经过几年的工作,平时用的更少,一下子看着题简单,就是写不上来。

23940
来自专栏SpringCloud专栏

回溯算法解数独问题(java版)

    下图是一个数独题,也是号称世界上最难的数独。当然了,对于计算机程序来说,只要算法是对的,难不难就不知道了,反正计算机又不累。回溯算法基本上就是穷举,解这...

30130
来自专栏SpringCloud专栏

回溯算法解八皇后问题(java版)

    八皇后问题是学习回溯算法时不得不提的一个问题,用回溯算法解决该问题逻辑比较简单。

35050
来自专栏SpringCloud专栏

在普通Java类里使用spring里注入的service、dao等

在spring管理的web项目里,譬如Struts和spring的项目,配置好后,Struts里就可以直接使用定义好的service。但是如果要在普通的工具类里...

16730
来自专栏SpringCloud专栏

2Java学习笔记之数据结构——双向链表

在上一篇的单链表里,数据结构是单向的,只能从前往后一个一个找,而不能倒着来。因为每个节点Node只保存了下一个节点的位置。

11320
来自专栏SpringCloud专栏

回溯算法解迷宫问题(java版)

    以一个M×N的长方阵表示迷宫,0和1分别表示迷宫中的通路和障碍。设计程序,对任意设定的迷宫,求出从入口到出口的所有通路。

30230
来自专栏SpringCloud专栏

傻瓜方法求集合的所有子集问题(java版)

    给定任意长度的一个集合,用一个数组表示,如{"a", "b","c"},求它的所有子集。结果是{ {a}, {b}, {c}, {a,b}, {a,c}...

16960
来自专栏acoolgiser_zhuanlan

JavaScript shift() 方法

如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。请注意,该方法不创建新数组,而是直接修改原有的 arrayObject...

15470

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励