个人笔记---JS

目录

一、静态网页和动态网页

1.动态网页

2.静态网页

3.网页后端交互

二、JS

1.概述

 2.JS语法

1)注释

2)基本数据类型

3)复杂数据类型

4)JS的变量

3.JS语句 

 4.JS数组

1)声明方式

 2)注意

5.JS函数 

方式一:通过function关键字声明函数

方式二:通过函数直接量声明函数 

 6.JS对象

1)内置对象

 2)自定义对象

三、DOM树

1.组成

 2.DOM树结构

3.Document对象

 4.dom.html

 5.总结

四、JSON 

1.概念

2.作用 

3.语法 

4.转换工具 


一、静态网页和动态网页

1.动态网页

用javascript实现页面和后台系统的交互,实现用户信息的注册,实现用户的登录,实现个性化的数据展现。业界把这样的网页称为动态网页,把这样的网站称为动态网站。

2.静态网页

静态网站只能看,不同浏览者看到内容一致不能变化

3.网页后端交互

用户访问页面,页面触发事件创建XHR对象,进行ajax请求,请求访问服务器端,请求被web中间件拦截并进行处理,由控制层框架springmvc中的controller进行接收,controller请求业务层spring框架的service服务,service请求持久层mybatis框架的mapper映射,mapper访问数据库。操作完数据库,返回结果,mybatis封装成java对象传回service,service把java对象传回controller,controller把java对象又转换为json字符串,然后传回浏览器,浏览器传回给调用者XHR,XHR调用回调方法callback,callback进行json字符串的解析,从中拿到要展现的数据,通过javascript处理,最终回显到页面上。

二、JS

1.概述

1)全称是javascript,是脚本语言,只能在浏览器中运行.

2)js是一个基于对象和事件驱动的脚本语言.

基于对象:js也能像java一样通过new自定义js对象

事件驱动:js可以让网页动起来,什么时候要触发执行js代码

3)js的特点

直译式: 不需要编译过程

弱类型: js不关心类型

4)js出现位置:

行内JS:

内部JS:

外部JS:

 2.JS语法

1)注释

单行注释: //注释内容

多行注释: /* 注释内容 */

2)基本数据类型

包括:number/string/boolean/null/undefined

(1) 数值类型-number

  • 在JS中,数值类型只有一种,就是浮点型。
  • 在JS中,需要时会自动的进行数据类型的转换,比如:在显示和处理的时候,浮点型和整型会自动的转换。

(2) 字符串类型-string

  • 在JS中,字符串是基本数据类型。
  • 在JS中,字符串直接量是通过单引号或者双引号引起来。

(3) 布尔类型-boolean

  • 值为true或者是false;

(4) undefined

  • 值只有一个就是undefined。表示变量没有初始化值。

(5) null

  • 值也只有一个,就是null。表示空值或者不存在的对象。

3)复杂数据类型

函数、数组、对象(自定义对象、内置对象、DOM对象、BOM对象…)

4)JS的变量

  • js是弱类型语言,所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。
  • javascript没有类似采用静态语言类型,如java的变量类型是编译期就确定的;而它采用了动态类型,也就是说在编译期类型不确定,运行时会动态根据变量的赋值来决定它的类型,这点比较灵活。这也是双刃剑,编译期就难以检查出其赋值的错误。

5)JS的运算符

JS中的运算符和Java中的运算符大致相同

  • 算术运算符: +,-,*,/,%,++,–
  • 赋值运算符: =,+=,-=,*=,/=,%=
  • 比较运算符: ==,!=, =,!, > ,< ,>=,<=
  • 位运算符: & , |
  • 逻辑运算符: &&,||
  • 前置逻辑运算符: ! (not)
  • 三元运算符: ? :

3.JS语句 

 4.JS数组

  • JS数组用于在单个的变量中存储多个值(其实就是一个容器)。
  • JS中的数组可以存储例如:数值、字符串、布尔值、undefined、null、对象、函数等

1)声明方式

 2)注意

  1. JS数组中可以存放任意的数据类型
  2. JS中的数组长度可以被改变

5.JS函数 

  • 函数就是一个具有功能的代码块, 可以反复调用
  • 函数就是包裹在花括号中的代码块,前面使用了关键词 function

方式一:通过function关键字声明函数

方式二:通过函数直接量声明函数 

 6.JS对象

1)内置对象

  • String/Array/Number/Math/JSON…
  • Window对象–代表浏览器中一个打开的窗口,了解一下即可,很多被UI替代

 2)自定义对象

(1)方式一:

  1. 声明对象:function Person(){}
  2. 创建对象:var p1 = new Person();
  3. 设置属性:p1.name = "张飞"; p1.age = 18;
  4. 设置方法:p1.run = function(){ alert(this.name+" : "+this.age); }
  5. 访问p1对象

(2)方式二:

三、DOM树

1.组成

  • ECMAScript描述了javascript语言的语法和基本对象
  • 文档对象模型DOM(Document Object Model)与HTML网页API接口
  • 浏览器对象模型BOM(Browser Object Model),与浏览器进行交互的API接口

核心对象有:window浏览器窗口,navigator浏览器信息,location浏览器当前地址信息,history浏览器历史信息,screen用户屏幕信息。

 2.DOM树结构

DOM 是一项 W3C (World Wide Web Consortium) 标准,DOM(Document Object Model)文档对象模型为JS操作html文档所提供的一套API,通过这套API可以很方便的对html元素进行访问及增删改查操作。

3.Document对象

 

 4.dom.html

 5.总结

获取页面元素的4种方式:

  • getElementsByTagName 标签名称,得到数组
  • getElementsByName name属性,得到数组
  • getElementsByClassName class属性,得到数组
  • getElementById id属性,单个值

注:dom树在描述标签时除id方式,其它都是以数组形式体现,哪怕是一个元素。

四、JSON 

1.概念

JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)

JSON(JavaScript Object Notation,JS 对象简谱) 起名不咋地,非常拗口,我们就记住它是一种轻量级的数据交换格式即可。它基于 ECMAScript (js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者,成为主流开发方式(ajax异步请求,json返回)。

2.作用 

JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时,这些数据只能是文本。JSON 属于文本,并且我们能够把任何 JavaScript 对象转换为 JSON,然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式,我们能够把数据作为 JavaScript 对象来处理,无需复杂的解析和转译。

3.语法 

4.转换工具 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值