JavaScript

JS概念: 一种客户端脚本语言,指不需要编译就能够在任何浏览器运行的一种编程语言
JS作用: 控制html中的元素,实现人机交互,达到一些动态的效果,提高用户的体验性
JS组成:   ECMAScript(欧洲计算机制造商协会制定的标准)+BOM+DOM

JavaScript

浏览器执行JS简介
1. 渲染引擎: 用来解析HTML和CSS, 俗称内核, 比如chrome浏览器的blink, 老版本的webkit
2. JS引擎: 也称为JS解释器, 用来读取网页中的JavaScript代码, 对其处理后运行.
基本语法:
- 于html结合方式
  - 行内式JS: 元素的开始标签内写JS代码.
  - 内嵌式JS: 定义script,标签体内容就是js代码
  - 外联式JS: 定义script,通过src属性引入外部的js文件
  - 注意: script可以定义在html页面的任何地方,但是定义的位置会影响执行顺序,此外,可以定义多个script
注释
- 单行注释: //注释内容
- 多行注释: /* 注释内容 */
JS的输入输出语句:
1. alert(msg): 浏览器弹出警示框
2. console.log(msg): 浏览器控制台打印输出信息
3. prompt(info): 浏览器弹出输入框, 用户可以输入.
变量
- 概念: 一小块儿存储数据的内存空间, 说白啦就是一个装东西的盒子.
- 变量的使用
  1. 声明变量: var age; //声明一个名称为age的变量
  2. 赋值: age = 10; //给age这个变量赋值为10.
- 变量语法扩展
  1. 更新变量: 一个变量被重新赋值后, 它原有的值就会被覆盖, 变量值将以最新的值为准.
  2. 可以同时声明多个变量(不推荐使用)
  3. 声明变量的特殊情况:
    1. 只声明不赋值, 结果是undefined
    2. 不声明,不赋值, 直接使用会报错
    3. 不声明直接赋值使用会变为全部变量
  4. 变量名命名规范
    1. 严格区分大小写
    2. 由字母数字下划线美元符号组成.
    3. 不能以数字开头
    4. 不能是关键字, 保留字
    5. 变量名必须有意义
    6. 遵守驼峰命名法, 首字母小写后面单词的首字母大写.
数据类型
- 在计算机中, 不同的数据所需的存储空间是不同的, 为了便于把数据分成所需内存大小不同的数据, 充分利用存储空间, 于是定义了不同的数据类型.
- JS是种动态语言, 变量的数据类型是可以变化的, 并且是根据等号右边的值来确定的.
- 简单数据类型(基本数据类型)
  - number: 数字整数/小数/NaN(Not a number不是数字的数字类型)
    1. Infinity: 正的无穷大
    2. -Infinity: 负的无穷大
  - string: 字符串. “a” “abc” ‘a’
    1. 需要换行,空格等的需要借助与转义字符
    2. length: 用与获取整个字符串的长度
    3. + 可以进行字符串拼接, 任何类型+字符串都会变成字符串
    4. 口诀: 数值相加, 字符相连. 当变量在中间时: 引引加加
  - null: 一个对象为空的占位符
  - undefined: 未定义. 如果一个变量没有初始化值,默认值为undefined
  - boolearn: true/false
数据类型转换:
1. 转换成字符串:
  1. toString(): 转换成字符串
  2. String(): 强制转换
  3. 加号拼接
2. 转换成数字
  1. parseInt(变量名): 可以把字符型转换成整形,可以把后边的单位去掉
  2. parseFloat(变量名): 可以把字符类型转换成数值型
  3. Number(变量名)
  4. 利用算术运算: - * / 隐式转换
运算符
- 表达式: 由数字,运算符, 变量等组成的式子.
- 一元运算符
  - ++ – +…
- 算数运算符
  - 加,减乘除 %…
- 赋值运算符
  - += -=…
- 比较运算符
  - < <= ===(会比较两者的类型)…
- 逻辑运算符
  - && || !
    - 其他类型转boolean:
      1. number: 0或NaN为假,其它为真,
      2. string: 除了空字符串(""),其它都是true
      3. null&undefined: 都是false
      4. 对象: 所有的对象都是true
- 三元运算符
  ? : 例如 : var a = (1>2?1:2) 那么a=2;
- 注意±(正负号) 可以自动转换为number类型
  - var a = +“123” 转换类型是number,转换结果是字面值123
  - var b = +“abc” 转换类型为number,转换的结果为"NaN"
- 特殊语法: 如果每行只有一句话,那么省略号可以不写,但是不推荐
流程控制语句
- if …else
- switch
  - java中switch可以接收byte,short,int,long,枚举(1.5),string(1.7)
  - javascript中可以接收任何类型的变量
- while
- do…while
- for
基本对象
- 概念: 对象是一组无序的相关属性和方法的集合.
  1. 属性: 事物的特征, 在对象中用属性来表示(常用名词)
  2. 方法: 事物的行为, 在对象中用方法来表示(常用动词)
- 对象的创建
  1. 使用对象字面量创建对象
```
var obj = {name: '小黑',sex: '男',sayHi: function () {console.log('hi~');}}
```
  2. 利用构造函数创建对象;
```
function Star(uname, age, sex) {this.uname = uname;this.age = age;this.sex = sex;this.sing= function (sang) {console.log(sang);}
}
-------------------------------------
var lda = new Star('刘德华', 18, '女');
console.log(lda.uname);
lda.sing('坏女人');
```
    通过new关键字创建对象的过程称为对象的实例化.
- new 关键字执行过程
  1. new 构造函数可以在内存中创建一个空的对象
  2. this 就会指向指向刚才创建的空对象
  3. 执行构造函数里面的代码, 给这个空对象添加属性和方法.
  4. 返回这个对象
- 遍历对象的属性
```
<script>var obj = {name: '小黑',age: 18,sex: '男'}for(var k in obj){console.log(k+'=='+obj[k]);}
</script>
```
- 查阅文档的基本步骤
  1. 查阅该方法的功能
  2. 查看里面参数的意义和类型
  3. 查看返回值的意义和类型
  4. 通过demo进行测试
- 内置对象: 编程语言自带的API, 可以直接拿过来用, 例如: arguements就可以把参数列表给全部取出来.
- Array数组对象
  1. 创建:
    1. 字面量创建: var arr1 = [1,2,3];
    2. 通过new关键字: var arr2 = new Array();
  2. 方法
```
1. 判断一个对象是否为数组: Array.isArray()
2. 判断一个对象是否是某个构造函数的实例: instanceof
3. 向数组的 尾部/头部 添加若干元素，并返回数组的新长度；push()/unshift()
4. 将数组的 尾部/头部 若干元素删除，并返回数组的新长度；pop()/shift()
```
- Date: 日期对象, 通过构造函数创建
  1. 创建: Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性
```
var now = new Date();
```
  2. 方法
```
1. 获取指定时间的日期对象: var future = new Date('2099/5/1');
2. 基于1970年1月1日（世界标准时间）起的毫秒数: var now = + new Date();
3. 获得当前系统的一致的时间: var now = new Date().toLocaleString();
```
- Math: 数学对象
  1. 创建: Math不用创建, 直接使用Math.方法名()
  2. 方法:
```
1. Math.PI | 圆周率
2. Math.floor() | 向下取整
3. Math.ceil() | 向上取整
4. Math.round() | 四舍五入版 就近取整 注意 -3.6 结果是 -3
5. Math.abs() | 绝对值
6. Math.max()/Math.min() | 求最大和最小值
7. Math.random() | 获取范围在[0,1)内的随机值
8.  常用实例: 取得两个数之间的随机整数,并且包含这2个数:
function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min;
}
```
- String对象
- 数据在内存中的分配
  1. 简单数据类型:
    1. 存储: 存储在栈中,存放的是值.
    2. 传参: 函数的形参也可以看做是一个变量, 当我们把一个值类型变量做为参数传给函数的形参时, 其实是把变量在桟空间里的值复制一份给形参, 那么在方法内部对形参做任何修改, 都不会影响到外部变量
  2. 引用(复杂)数据类型:
    1. 存储: 地址存放在桟中, 数据存放在堆中
    2. 传参: 函数的形参也可以看做是一个变量, 当我们把引用类型变量传给形参时, 其实是把变量在桟空间里保存的堆地址复制给了形参, 形参和实参保存的是同一个地址, 所以操作的是同一个对象.
- RegExp: 正则表达式:
  1. 正则表达式: 定义字符串的组成规则
    1. 单个字符: [ ]
      如:[a],[ab],[a-zA-Z0-9_]
      - 特殊符号代表特殊含义的单个字符:
        \d: 单个数字字符 [0-9]
        \w:单个单词字符[a-zA-Z0-9_]
    2. 量词符号:
      ? :表示出现0次或是1次
      *: 表示出现0次或是多次
      +: 出现1次或是多次
      { m,n}: 表示 m<=数量<=n
      m缺省: {,n}: 最多n次
      n如果缺省{m,}: 最少m次
    3. 开始结束符号:
      - 开始: ^
      - 结束: $
  2. 正则对象
    1. 创建: var reg = new RegExp(“正则表达式”)
      var reg2 = /正则表达式/
    2. 方法: test()
    3. 使用: var username=“wanger”;
      var reg = /^\w{3,6}/;
      var flag=reg.test(username);
Global
1. 特点: 全局对象,这个Global中封装的方法不需要对象就可以直接调用. 方法名()
2. GBK:一个汉字两个字节,UTF-8一个汉字三个字节.
3. 方法:
1. encodeURI(): url编码
2. decodeURI(): url解码
3. encodeURIComponent(): 编码,编码的字符更多
4. decodeURIComponent(): 解码
5. parseInt(): 将字符串转换成数字
逐一把字符串中的数字部分转换成number
6. isNaN(): 判断一个值是否是Nan
NaN六亲不认,连自己都不认,NaN参与的==比较全部是false
7. eval(): 将JavaScript字符串解析,并将它作为脚本代码执行.

DOM学习

功能: 控制html文档的内容
代码: 获取页面标签(元素)对象 Element
- document.getElementById(“id值”): 通过元素的id获取元素对象
操作Element对象:
1. 修改属性值:
  1. 明确获取的对象是哪一个
  2. 查看API文档,找其中有哪些属性可以设置
2. 修改标签体内容
  - 例如:修改文本内容,innerHTML
  1. 获取元素对象
  2. 使用innerHTML属性修改标签体内容
事件学习
- 功能: 某些组件被执行了某些操作后,触发某些代码的执行.
- 如何绑定事件
  1. 直接在html标签上,指定事件的属性(操作),属性就是js代码
    - 事件: onclick – 单击事件
  2. 通过js获取属性对象,指定事件属性,设置一个函数

BOM的学习

概念: Browser Object Model 浏览器对象模型
- 将浏览器的各个组成部分封装成对象
组成:
Window: 窗口对象
Navigator: 浏览器对象
Screen: 屏幕对象
History: 历史记录对象
Location: 地址栏对象
Window: 窗口对象
- 创建
- 属性
  - 获取其它BOM对象:
    History
    Location
    Navigation
    Screen
  - 获取DOM对象
- 方法
  1. 与弹出框有关的方法
    - alert() 显示带有一段消息和一个确认按钮的警告框。
    - confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
    - prompt() 显示可提示用户输入的对话框。
  2. 与打开关闭有关的窗口
    - close(): 关闭浏览器窗口,谁调用我,我关谁
    - open(): 打开一个新的window对象,返回是一个window对象
  3. 与定时器有关的方法
    - setTimeout() 在指定的毫秒数后调用函数或计算表达式。
      参数:
      1. js代码或者方法对象
      2. 毫秒值
      使用: setTimeout(fun,3000)
      function fun(){
      alert(“boom…”)
      }
    - clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
    - setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
    - clearInterval() 取消由 setInterval() 设置的 timeout。
- 特点
  - Window对象不用创建可以直接使用,window.方法名()
  - window引用可以省略,方法名()
Location对象
- 创建(获取): window.location 或者location
- 属性
  href 设置或返回完整的 URL
- 方法
  reload() 重新加载当前文档。
History 对象
- 创建
  直接通过window获取
- 属性
  length 返回浏览器历史列表中的 URL 数量。
- 方法
  back() 加载 history 列表中的前一个 URL。
  forward() 加载 history 列表中的下一个 URL。
  go() 加载 history 列表中的某个具体页面。

DOM
- 概念: Document Object Model 文档对象模型
  - 将标记语言文档的各个组成部分封装成对象,可以使用这些对象,对标记语言文档进行CRUD操作.
- W3C DOM标准被分为3个不同的部分
  - 核心DOM - 针对任何结构化文档的标准模型
    - Document: 文档对象
    - Element: 元素对象
    - Attribute: 属性对象
    - Text: 文本对象
    - Comment: 注释对象
    - Node: 节点对象,其它5个的父对象
  - XML DOM - 针对XML文档的标准模型
  - HTML DOM - 针对HTML文档的标准模型
  - 核心DOM模型:
    - Document: 文档对象
      - 创建(获取): 在html dom模型中可以使用window对象来获取
        
        window.document
        
        document
      - 方法:
        获取Element对象:
        
        getElementsById(): 根据id属性获取对象,id属性值一般唯一
        
        getElementsByTagName(): 根据属性名称获取元素对象们,返回值是一个数组
        
        getElementsByClassName(): 根据Class属性值获取元素对象们,返回值是一个数组
        
        getElementsByName(): 根据name属性获取元素对象们,返回值是一个数组
        
        创建其它DOM对象
        createAttribute(name)
        
        createComment()
        
        createElement()
        
        createTextNode()
    - Element: 元素对象
      - 创建/获取: 通过document来获取和创建
      - 方法:
        setAttribute(): 设置属性
        
        removeAttribute(): 删除属性
    - Node: 节点对象,其它5个的父对象
      - 特点: 所有dom对象都可以被认为是一个节点
      - 方法:
        CRUD dom树:
        
        appendChild(): 向节点的子节点勒边的结尾添加新的子节点
        
        removeChild(): 删除(并返回)当前节点的指定子节点
        
        replaceChild(): 用新节点替换一个子节点
        
        属性:
        parentNode: 返回节点的父节点
      - 注意a标签中的href有两个作用, 可以实现点击的效果,此外还有跳转到指定的url作用,如果只想使用第一种功能的话添加href=“javascript:void(0)”
  - HTML DOM
    - 标签体的设置和获取: innerHTML
    - 使用html元素对象的属性
    - 控制元素样式
      - 使用元素的style属性来设置
        如: //修改样式方式1
        div1.style.border=“1px,solid,red”;
        div.style.width=“200px”;
        //font-size–>fontSize
        div.style.fontSize=“20px”
      - 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值.
事件监听机制
- 概念: 某些组件被执行了某些操作后,触发某些代码的执行.
  - 事件: 某些操作,如:单击,双击,键盘按下了,鼠标移动了
  - 事件源: 组件, 如:按钮,文本输入框
  - 监听器: 代码
  - 注册监听: 将事件,事件源,监听器结合在一起. 当事件源上发生了某个事件,则触发执行某个监听器的代码.
- 常见的事件:
  - 点击事件:
    1. onclick : 单击事件
    2. ondbclick : 双击事件
  - 焦点事件
    1. onblur : 失去检点
    2. onfocus : 获得焦点
  - 加载事件
    1. onload: 一张页面或一幅图像完成加载。
  - 鼠标事件
    1. onmousedown 鼠标按钮被按下。
      - 方法定义时,定义一个形参,接收event对象
      - event对象的button属性可以获取鼠标按钮键被点击了
    2. onmousemove 鼠标被移动。
    3. onmouseout 鼠标从某元素移开。
    4. onmouseover 鼠标移到某元素之上。
    5. onmouseup 鼠标按键被松开。
  - 键盘事件
    - onkeydown 某个键盘按键被按下。
    - onkeyup 某个键盘按键被松开。
    - onkeypress 某个键盘按键被按下并松开。
  - 选择和改变
    - onchange 域的内容被改变。
    - onselect 文本被选中。
  - 表单提交
    - onsubmit 确认按钮被点击。
    - onreset 重置表单
  - 注意在调用内置函数时,可以加上return实现功能,return onsubmit();

脚本王者-JavaScript相关推荐

cocos creator休闲游戏甜品幻想H5+安卓+IOS三端源码开发脚本为javaScript
cocos creator休闲游戏甜品幻想H5+安卓+IOS三端源码,开发脚本为javaScript方便扩展和阅读,支持cocos creator2.X版本,完整的源码可拿来运营学习研究二次开发. 1 ...
Kettle java脚本、javascript脚本、SQL脚本
Kettle java脚本.javascript脚本.SQL脚本一.java脚本二.javascript脚本三.SQL脚本一.java脚本 java脚本就是使用java语言通过代码编程来完成对 ...
js是运行在服务器端的脚本语言,JavaScript脚本语言
JavaScript脚本语言 JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行.下文为大家分享的是JavaScript ...
c 运行js脚本语言,Javascript脚本语言
Javascript脚本语言本教程不对Javascript详细讲解,与WebGL相关的会进行简单总结.Javascript语言可以开发前端,可以开发网站后端,也可以和Python.C语言一样开发客户 ...
python做一个本地搜索工具_SecretFinder：一款基于Python脚本的JavaScript敏感信息搜索工具...
SecretFinder工具介绍 SecretFinder是一款基于LinkFinder实现的Python脚本(如需BrupSuite版本,请点击这里),该工具的主要功能是帮助研究人员发现JavaSc ...
自动复制 JavaScript 脚本，JavaScript点击任意位置复制脚本源码
其实就是一个复制脚本: 他创建了一个层,然后这个层的z-index层级很高. Javascript脚本: (function($$) {var EVAutoCopy = {trigger: null, ...
《客户端脚本语言-JavaScript》
前言: 在之前学习的项目中接触过JavaScript,并且在参与的积分系统中也有涉略.但对于其的认识是碎片化的,通过此<北风网李炎恢视频>的学习,对于JavaScript有了一个较为系统的 ...
JS脚本语言 JavaScript
<script src=""></script> /*外部引用 <script type="text/javascript" ...
【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

脚本王者-JavaScript

JavaScript

JavaScript

DOM学习

BOM的学习

脚本王者-JavaScript相关推荐

最新文章

热门文章