Fork me on GitHub

JavaEE Day03 JavaScript

Day03 JavaScript

目录

什么是JavaScript

  1. 弱类型，动态类型（数据类型可以变化），基于原型（面向对象）的一门直译型编程语言。
  2. 编译型语言：java，c，c++
  3. 解释性语言：python，JavaScript，ruby，

JavaScript产生背景

  1. 95年在网景公司在导航者浏览器发布，
  2. 官网名称：ECMAscript

javascript作用

  1. 动态实现html和样式修改
  2. 对事件作出响应
  3. 对表单进行验证
  4. 实现后台操作

javascript特点

  1. 交互性
  2. 安全性：不能直接访问本地磁盘文件
  3. 跨平台

javaScript的引入方式

  1. 内部js使用
  2. 引入外部js脚本

<scripttype="text/javascript"src="js/myjs.js"></script>

变量和数据类型

  1. 关键字：var
  2. 数据类型：typeof
    1. Number
    2. String
    3. Boolean
    4. Undefined
    5. Null
    6. Array
    7. Object
  3. 类型转换
    1. Null/boolean/undefined与number参与运算
      先转换为number类型然后计算
    2. String和其他类型数据运算
      都表示连接

运算符

算术运算符

      • / %
        / 运算 保留小数点

比较运算符

== ！= > < <= >=

  1. == : 只比较内容
  2. ===：比较内容和类型

逻辑运算符

&&、||、！

三元运算符

var max = a>b?a:b;

流程控制

  1. if/switch
  2. for/while/do…while
  3. for…in…：循环

函数

  1. 可被重复调用的代码块（手动调用，通过事件调用）

  2. 自定义函数

    //1.声明无参没有返回值函数
//所有的直接声明的函数都是window的函数
function aa(){
console.log("aa")
}

aa();

//2.声明带参
functioncalc(num1,num2){
    return num1+num2;
}

var sum=calc(1);
console.log(sum)

//3.匿名函数(只是用一次)
(function(a,b){
console.log(a+b);
})(1,2);

  3. 内置函数

    1. isNaN:判断是否为非数字
    2. parseInt(）:转换为整型数据
    3. parseFloat()：转换为浮点数
    4. Eval():字符串运算，类型转换；

对象

基于对象语言。提供了创建对象，扩展属性和方法的方式。

内置对象：

String：字符串

  1. 创建对象

    var str="abc"
str = new String("abc")

  2. 常见的属性和方法

    str.length;//获取长度
str.concat();//连接字符串
str.charAt();//根据索引获取字符
str.indexOf();//根据字符串获取起始位置
str.match();//字符串匹配正则表达式，不匹配返回null；

array：数组

  1. 创建数组

    vararr=["aa","bb"];
arr=newArray(3);
arr=newArray("aa","bb","cc");

  2. 常见的属性和方法

length;//获取长度
concat(); //连接数组
sort(); //排序
reverse(); //倒序
tostring();//转换为字符串

date：日期对象

  1. 创建对象

    var date=new Date();

  2. 常见方法

    //获取年份
varyear=date.getFullYear();
console.log(year);
//获取月份0-11
varmonth=date.getMonth();
console.log(month);
//周中的天（星期）0-6
vardayOfWeek=date.getDay();
console.log(dayOfWeek);
//获取月份中的天
varday=date.getDate();
console.log(day);

//时分秒
varhour=date.getHours();
varmin=date.getMinutes();
varsec=date.getSeconds();

  3. 扩展属性和方法

    //扩展属性
Date.prototype.name=null;
//扩展方法
Date.prototype.bb=function(){
   console.log("bb");
}

bom（browser object model)

控制浏览器的行为

Window：代表窗口

属性：

1.document：代表文档的只读对象
2. innerWidth：文档显示区宽度
3. innerHeight：文档显示区高度
4. location：获取窗口的location
5. name：获取窗口name值

方法

  1. alert();警告框
  2. confirm("确认删除：")对话框
  3. prompt("请输入密码","123")：带有输入框的对话框
  4. open（url,名字，窗口css）打开窗口
  5. close()关闭窗口
  6. setTimeout()：指定时间后执行某个函数或表达式，
  7. clearTimeout(); 清除定时
  8. setInterval()：间隔固定时间执行某个函数
  9. clearInterval(qid); 清除定时

Document：代表当前文档

location：包含当前url的信息

href:返回或者设置url信息

Dom（document object model：文档对象模型）

将html标签，属性和文本映射到一颗dom树；（标签节点，属性节点，文本节点）对象；

dom提供了使用js操作节点的标准方法。

Dom树

访问节点（元素节点）

//1.通过id获取元素节点
varoDiv=document.getElementById("div1");
//2.通过标签名称获取节点(元素集合，数组)
varaDiv=document.getElementsByTagName("div")[0];
//3.t通过标签name值获取
document.getElementsByName();
//4.通过class属性值获取
document.getElementsByClassName();

访问和修改节点的文本信息

  1. innerHTMl:能够识别和设置html标签
  2. innerText:不能识别

访问和修改节点属性信息

dom对象.属性名称

特例：class -> className

访问和修改节点的样式

oDiv.style.color="#f00";
oDiv.style.fontSize="20px";

事件

ui事件

界面相关的事件

load事件：加载

Window.onload：窗口加载时驱动
将页面的节点绘制完成才触发

鼠标事件

  1. Click 事件：单击事件
  2. dblclick事件：双击事件，会触发单击事件
  3. mouseover事件：鼠标移入
  4. mouserout事件：鼠标移出

键盘事件：有焦点才能触发

  1. Keydown: 按下触发
  2. Keyup: 抬起触发(常用)
  3. Keypress: 按下可打印字符触发

焦点事件

  1. Focus：获取焦点
  2. blur：失去焦点（经常用于表单项验证）

其他事件

change事件：选择发生改变触发（单选，多选，下拉，省市联动）

正则表达式

弥补字符串验证的缺陷：验证不完善，不简洁

语法

匹配正则表达式

  1. str.match(regex):不匹配返回null；
  2. regex.test(str):匹配返回true,否则返回false；

Json

轻量级数据交换的一种格式。

数据交互：

  1. xml：格式严格，获取方便；无用的标签过多
  2. js：采用键值对的方式存储和传输数据
    1. 键和值之间使用: 分割
    2. 多个键值对采用, 分割
    3. 对象使用{}
    4. 数组使用[]

js对象和json区分

  1. js对象是 object，json是一个string（特定的格式）
  2. js对象key不需要引号；json的key必须使用引号

js对象和json之间转换

  1. js对象转换为json

    varjs={name:"zs",age:12};
console.log(JSON.stringify(js));

  2. json对象转换为js对象
    1. eval("("+json+")");
    2. JSON.parse(json);

http

什么是http

  1. 超文本传输协议
  2. 实现客户端与服务器端之间html资源的传输

http协议底层原理

  1. Tcp/udp 传输层
  2. Tcp/ip协议：传输层与网络层协议的集合
  3. http：应用层协议
  4. Http是一个客户端和服务器端请求和应答的标准（TCP)

http的请求和响应

http的请求报文：

  1. 请求行：请求的路径 请求的协议
  2. 请求头：key/value（编码，缓存控制等等）
  3. 请求体（可选）:客户端传输给服务器端数据（post）

http的响应报文：

  1. 响应行：协议 状态码 备注
  2. 响应头：key/value（数据长度，编码等）
  3. 响应体（可选）:服务器端传输给客户端的数据

http的状态码

  1. 1xx：100-101，信息提示；
  2. 2xx：200-206，成功
  3. 3xx：300-305，重定向
  4. 4xx：400-415，错误类信息，客户端错误
  5. 5xx：500-505，错误类信息，服务器端错误

常用状态码

  1. 200：成功，请求的所有数据通过响应报文的entity-body部分发送：OK；
  2. 301：请求的URL指向的资源已经被删除；但在响应报文中通过首部Location指明了资源现在所处的新位置；Moved permanently，永久重定向；
  3. 302：与301相似，但在响应报文中通过Location指明资源现在所处临时新位置；Found，临时重定向；
  4. 304：客户端发出了条件式请求，但服务器上的资源未曾发生改变，则通过响应此响应状态码通知客户端；Not Modified；缓存的资源可以继续使用。
  5. 401：需要输入账号和密码认证方能访问资源；Unauthorized；
  6. 403：请求的资源被禁止该访问者访问；Forbidden
  7. 404：服务器无法找到客户端请求的资源；Not Found；
  8. 415：媒介类型不被支持，服务器不会接受请求；
  9. 500：服务器内部错误；Internal Server Error
  10. 502：代理服务器从后端服务器找到了一条伪响应；Bad Gateway；
  11. 503：
posted @ 2018-10-28 10:03  耳_东  阅读(98)  评论(0)    收藏  举报