Java web之JavaScript

一、概述与作用

JavaScript(简称“JS”) 是一种解释型或即时编译型的编程语言。
它是一门脚本语言(开发Web页面的语言)。

  • 作用:
    1、验证数据
    2、加强用户体验
    3、增加互动

二、使用

1、使用的分类

(1)行内(标签内)

元素上使用js代码

(2)内部(html内任何外置)

html内部定义script标签对,标签对中定义js代码

(3)外部(head标签内外连js文件)

外部定义js文件,文件中定义js代码,在使用的html中使用script标签对用来引入

2、使用问题

(1)使用位置:

1)任意位置
2)推荐使用位置:
  • head中,便于后期维护(head中配合window.onload使用,确保加载完成)。
  • body结束前,页面所以内容加载完成之后。

(2)使用注意:

  • 一个script标签不能及用来引入外部js文件,又用来定义js代码

三、JavaScript数据类型

1、基本数据类型

(1)Number(控制台中显示蓝色)

1)Number:表示整数,小数
2)NaN :表示(not a number)
  • 1.赋值NaN
  • 2.运算无法计算正确的结果

(2)String(控制台中显示黑色)

  • 字符串要定义在一对引号当中,''|""都可以

(3)Boolean

  • true | false

(4)Null 类型

  • 1.赋值
  • 2.获取不到元素

(5)Undefined (指 未定义 的类型)

  • 1.赋值
  • 2.只声明不赋值存在默认值

2、复合数据类型和函数类型

(1)对象类型(Object)

  • 对象中的内容都是以键值对的形式存在的:key:value
  • 多个键值对之间使用个逗号进行分隔
  • 最后一个键值对后面不需要添加逗号
  • key属性名,满足标识符的命名规范
  • key和value其实都是字符串
  • key如果满足标识符的命名规范,前后引号可以省略

(2)函数类型(方法)

四、类型转换

1、显示类型转换:

通过其他方式或函数,手动让数据改变其类型(注意:js中对象类型和函数类型不参与类型转)

  • 任意类型都可以转换以下三种类型
    String(数据)
    Number(数据)
    Boolean(数据)

2、隐式类型转换

目的不是为改变数据的类型,但是执行过程中会隐式改变类型(+ - * / ..)

五、运算符

1、+ 运算符

字符串的连接符使用

2、= == === 之间的区别:

  • = 赋值
  • == 比较数据是否相同
  • === 比较数据和类型是否都相等(先比较类型,后比值)

3、!运算符

! 非 取反
!! 不变
!!!取反

4、逻辑运算符: && ||

  • java中逻辑运算符两边的操作数必须为boolean类型的
  • js中中逻辑运算符两边的操作数可以都是boolean,也可以有其他类型的数据参与,如果有, 结果肯定为其中一个操作数

(1)&& 一个为false就是false

第一个操作数转为boolean,为false,结果就为第一个操作数的值为true,,结果就为第二个操作数的值

(2)|| 一个为true就是true

第一个操作数转为boolean,为true,结果就为第一个操作数的值为false,结果就为第二个操作数的值

5、{} 块

  • java中{}自成作用域
  • js中块不是作用域,作用域在js中之间函数function

六、数组与数组方法

1、数组

(1)数组的属性

  • 可以存储任意个任意类型的数据,长度可变
  • 数组有序: 索引顺序 从0开始
  • 根据索引操作数组,当索引非0~n的整数,作为数组的自定义属性

(2)创建数组的方式:

  • new Array(); 构建一个空的新数组
  • new Array(数据1,数据2..) 创建的同时赋值
  • [数据1,数据2...] 字面量的创建方式 --推荐

(3)数组的遍历:

  • 1.普通for
  • 2.for .. in
  • 3.foreach

2、数组常用方法

(1)slice 截取(切片数组,原数组不发生变化)

  • 一个参数 作为起始索引,从参数索引位置开始,截取到最后,返回
  • 两个参数 第一个参数作为其实索引,第二个参数结束索引,结束索引不包含

(2)splice 剪接数组(原数组变化,可以实现前后删除效果 )

  • 一个参数 作为起始索引,从参数索引位置开始,截取到最后,返回,原数组为截取后剩下的
  • 两个参数 第一个参数作为其实索引,第二个参数作为个数
  • 3~n个参数 重第一个参数位置开始,拿第二个参数个,替换成为第三个参数及以后的数据

七、函数及注意事项

1、函数

1)函数声明
                function 函数名 (参数列表) {
                    函数体;
                    [return 返回值;]
                }
2)函数调用:
    1. 函数名(实参);
    1. 转换函数表达式,在最后添加()自执行(在函数声明的前面添加~|!|+|-,在函数声明天后添加()包裹)
2)函数表达式的方式
                var 变量名 = function 函数名 (参数列表) {
                    函数体;
                    [return 返回值;]
                };

函数名一般省略,不可以通过函数进行调用,只能通过变量名,函数名可以在函数内部进行递归使用

2)函数表达式的调用:
  • 1.通过变量名调用 变量名(参数);
  • 2.函数表达式最后添加(),直接直接这个函数,自执行

注意:参数省略var关键字

(2)函数的注意事项

  • 函数的作用域提升:只有函数声明的方式才有函数作用域的提升,函数表达式没有,提升到当前作用域的最上面

  • 若函数形参同名(一般不会这么做),在使用时以最后一个值为准。

  • 函数的参数可以定义默认值

  • 值传递

    var num = 12;
    function change(n) {
      n = 30;
    }
    change(12);
    console.log('值传递-----' + num);  //12 
    
  • 引用传递

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,036评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,046评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,411评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,622评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,661评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,521评论 1 304
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,288评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,200评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,644评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,673评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,281评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2 355

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,233评论 0 4
  • JavaScript语言精粹 前言 约定:=> 表示参考相关文章或书籍; JS是JavaScript的缩写。 本书...
    微笑的AK47阅读 581评论 0 3
  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 1,056评论 0 1
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,197评论 0 3
  • 是什么 一门脚本语言 一门解释型语言 动态类型语言 基于对象的语言 弱类型语言 使用场景 网页特效 服务端开发 命...
    珲_cysky2018阅读 426评论 0 0