前端学习: JS学习

最新推荐文章于 2024-04-28 17:30:26 发布

poppick

最新推荐文章于 2024-04-28 17:30:26 发布

阅读量622

点赞数 1

本文链接：https://blog.csdn.net/poppick/article/details/51038783

版权

参考自http://www.w3school.com.cn/js/index.asp

一, 使用方式

js可以直接嵌入到html里运行 <script>
也可以用于响应事件, 例如 <button type="button" οnclick="document.write('Welcome!')">点击这里</button>
js可以修改大部分html属性
js也经常用于处理和用户的交互
js一般放在<head>中或<body>底部

二, 基本概念

操作html元素: document.getElementById(id)
基本语法:
- 一般用分号结束, 也可以不用
- 区分大小写
- 忽略空格
- 可以用 // 或 /* */完成注释
- var表示变量
  - 可以重新声明变量, 并且其值不会消失
  - 变量是动态类型
- 数据类型: 字符串、数字、布尔、数组、对象、Null、Undefined
  - 字符串: 用双引号或单引号包围
  - 数字: 只有一种数字, 可以带小数点也可以不带
  - 布尔: true或false
  - 数组: 三种声明方式:
    - var a = new array(); a[0] = "44"; a[1] = 6;
    - var a = new array("44", "5", "6");
    - var a = ["44", 55, "66"];
  - 对象:
    - 对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
    - var person={firstname:"Bill", lastname:"Gates", id:5566};
    - 对象属性有两种寻址方式：
      - persion.lastname
      - persion["lastname"]
  - undefined 表示未声明
  - null 表示没有值, 可以通过复制成null清空变量的值
  - 可以通过new来声明变量的类型
  - JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
- 对象:
  - JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。
  - 所有的变量都是对象, 例如字符串"abcd", 其有方法length()
  - 可以用new Object创建一个对象
- 函数:
  - 用function 声明, 声明中没有返回值, 可以有参数
  - 函数中可以有局部变量
  - 如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。即你可以不用var 声明一个变量, 例如 a=555; a将被声明为一个全局变量, 即使它在函数中
- 运算符:
  - 支持 ++, += 字符串+
  - 字符串和数字相加, 结果将成为字符串
  - ==和===:
    - ==可以支持类型转换, ===需要类型和数值都相等:
    - 5 == "5" True
    - 5==="5" false
  - 支持且&&, 或||, 非!
  - 支持条件运算符
  - ? :
- 判断语句
  - 支持if, if ... else, if ... else if ... else等
  - 支持switch
- 循环语句
  - for : for (var i=0;i<cars.length;i++) {...}
  - 支持 for in语句: for(x in tables){...}
  - 支持while{...} 和 do {...}while语句
  - 支持break和continue
  - 支持标签, 和break, continue配合使用
- 异常和捕获:
  - try catch:
  - throw:
    - http://www.w3school.com.cn/tiy/t.asp?f=js_throw_error

三, HTML DOM

概述:

一个html文档被解析成一棵dom树:
js可以通过dom树来改变对html的属性, 节点, 标签, 样式等进行修改, 也可以对各种事件进行响应
完整内容参考http://www.w3school.com.cn/htmldom/index.asp

详细:

查找html元素:
- 通过id getElementById
- 通过标签名 getElementsByTagName
- 通过类名(ie低版本不支持)
修改html:
- 改变输出流: document.write()
- 修改html内容: document.getElementById("p1").innerHTML="New text!";
- 修改html属性: document.getElementById(id).attribute=new value
- 修改样式: document.getElementById(id).style.property=new style (相当于修改style属性)
- 添加或删除节点: 先找到父节点, appendChild(), removeChild()
响应html事件:
- html事件包括 "点击鼠标", "网页已加载", "图像已加载", "鼠标移动到元素上", "输入字段被改变", "提交 HTML 表单", "用户触发按键"等
- 如需在用户点击某个元素时执行代码，可以向对应的 HTML 事件属性添加 JavaScript 代码, 比如执行一个函数:
  - ```
  <button οnclick="displayDate()">点击这里</button>
```
- 也可以通过dom来给html元素分配事件:
  - document.getElementById("myBtn").οnclick=function(){displayDate()};
- 事件:
  - onclick 和 onmousedown, onmouseup: 点击, 鼠标按下, 释放
  - onload和onunload: 用户进入或离开页面
  - onchange: 用户改变输入字段的内容
  - onmouseover和onmouseout: 鼠标移至 HTML 元素上方或移出元素
  - onfocus: 获得焦点

四, 对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
创建对象:
- 先new Object再添加属性:
- 使用literals对象:
- 使用函数来创建对象, 这有点像构造函数
- +

添加方法: 直接用=赋值
JavaScript 是面向对象的语言，但 JavaScript 不使用类.
- 这很有意思, 与C++相比, 相当于把一些原本编译器做的事情暴露给用户去做, 其他脚本语言例如python也可以做类似事情(比如通过__class__), 不过没有js的力度这么大

五: 浏览器对象模型

浏览器对象模型 (Browser Object Model BOM) 使 JavaScript 有能力与浏览器进行交互
Window对象: 浏览器窗口
- 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
- 可以通过一些内置方法获得浏览器窗口大小, 打开关闭窗口等等功能
screen对象: 屏幕
location对象: 当前页面的url
history对象: 浏览历史
navigator对象: 用户浏览器的信息
PopupAlert: 消息框
Timing: 计时
- setTimeout var t=setTimeout("javascript语句",毫秒)
- clearTimeout clearTimeout(setTimeout_variable)
cookie
- 什么是cookie?
  - cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

六, JS库

常见的js库: jQuery, Prototype, MooTools
一些问题处理起来很麻烦, 比如不同浏览器的差异等, 一般通过引用库来解决, 比如jQuery
CDN(Content Delivery Network) 内容分发网络: 人们总是希望网页越来越快, 越来越小, 如果能把这些库放在同一个地方, 就会更多地命中浏览器的缓存. 所以google提供了一系列js库的CDN
jQuery:
- 在head中加入 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>即可