开发者社区> ggbond233> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JS快速入门

简介: 一门客户端脚本语言
+关注继续查看

js概念

一门客户端脚本语言

  • 运行在客户端浏览器中。每一个浏览器都有JavaScript的解析引擎
  • 脚本语言:无需编译,直接被浏览器解析执行

功能

可以控制HTML元素,让页面有动态效果,增强用户和HTML页面的交互过程

JavaScript发展史

一开始各种客户端脚本语言很乱,ECMA制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式

JavaScript=ECMAScript+JavaScript自己特有的东西(BOM+DOM)

ECMAScript:客户端脚本语言的标准

一、基本语法

与HTML结合方式

  1. 内部js
    定义<script>,标签体内容就是js代码
  2. 外部js
    定义<script>,通过src属性引入外部的js文件

注意:

  • <script>可以定义在html页面的任何地方。但定义的位置会影响执行顺序
  • <script>可以定义多个

注释

  1. 单行注释://注释内容
  2. 多行注释:/*注释内容*/

数据类型

  1. 原始数据类型(基本数据类型)
    1. number:数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
    2. string:字符串(js中没有字符的概念)。"aaa" 'a'
    3. boolean:true/false
    4. null:一个对象为空的占位符
    5. undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined
  1. 引用数据类型(对象)

变量

变量:一小块存储数据的内存空间

java语言是强类型语言,JavaScript是弱类型语言

强类型:在开辟变量存储空间时,定义了空间将来存储数据的唯一类型。只能存储唯一类型的数据

弱类型:在开辟变量存储空间时,没有定义空间将来的存储数据类型,可以存放任意类型的数据

语法:

var 变量名 = 初始化值;

运算符

  1. 一元运算符+(-)正负号在js中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
    • 其他类型转number
    • string转number:按照字面值转。如果字面值不是数字,则转为NaN(不是数字的数字)
    • boolean转number:true转为1,false转为0
  1. 比较运算符
    • 类型相同:直接比较(字符串按照字典顺序比较)
    • 类型不同:先进行类型转换,再比较
      ===:全等于。在比较之前,先判断类型,如果类型不一样,直接返回false
  1. 逻辑运算符
    • &&:与(短路:前面一个能判断出布尔值,后面的就不再判断)
    • ||:或(短路)
    • !:非其他类型转boolean:
      1. number:0或NaN为false,其他为true
      2. string:除了空字符串(“”),其他都是true
      3. null&undefined:都是false
      4. 对象:所有对象都为true
  1. 三元运算符
    表达式?值1:值2
    表达式为true,取值1;为false,则取值2
  2. 特殊语法
    • 语句以;结尾,如果一行只有一条语句,则;可以省略(不建议)
    • 变量的使用使用var关键字,也可以不适用
      用:定义的变量是局部变量
      不用:定义的变量是全局变量(不建议)

流程控制语句

  1. switch:
    在js中,switch语句可以接受任意的原始数据类型
    在java中,switch语句可以接受的数据类型:byte int short char,枚举(1.5),string(1.7)

switch (a){

           case 1:

               alert("number");

               break;

       }

二、基本对象

Function:函数(方法)对象

  1. 创建
    1. function 方法名称(形参列表){方法体}
    2. var 方法名 = function(形参列表){方法体}
  1. 属性
    length:代表参数的个数
  2. 特点
    • 方法定义时,形参的类型不用写,返回值类型也不用写
    • 方法是一个对象,如果定义名称相同的方法,会覆盖前一个
    • 在js中,方法的调用只与方法的名称有关,和参数列表无关
    • 在方法声明中有一个隐藏的内置对象(数组)arguments,封装所有的实参
  1. 调用
    方法名称(实际参数列表);

Array:数组对象

  1. 创建
    1. var arr = new Array(元素列表);
    2. var arr = new Array(默认长度);
    3. var arr = [元素列表];
  1. 方法
    join(参数):将数组中的元素用参数作为分隔符拼接为字符串
    push():向数组的末尾添加一个或多个元素,并返回新的长度
  2. 属性
    length:数组的长度
  3. 特点
    1. js中,数组元素的类型可变
    2. js中,数组长度可变(自动扩容)

Date:日期对象

  1. 创建
    var date = new Date();
  2. 方法
    toLocalString():返回当前date对象对应的时间本地字符串格式
    getTime():获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差

Math:数学对象

  1. 创建
    Math对象不用创建,直接使用。Math.方法名
  2. 方法
    random():返回0~1之间的随机数。含0不含1
    ceil(x):向上取整。(ceil:天花板)
    floor(x):向下取整。(floor:地板)
    round():四舍五入
  3. 属性
    PI:圆周率

RegExp:正则表达式对象

  1. 正则表达式:定义字符串的组成规则。regular expression
    1. 单个字符:[ ]
      特殊符号代表特殊含义的单个字符:
      \d:单个数字字符[0-9]。(digital)
      \w:单个单词字符[a-zA-Z0-9_]。(word)
    2. 量词符号:
      ?:出现0次或1次
      *:出现0次或多次
      +:出现1次或多次
      {m,n}:出现[m,n]次
      m如果缺省:{,n},最多n次
      n如果缺省:{m,},最少m次
      例如:\w?表示单个单词出现0次或1次
    3. 开始结束符号
      ^:开始
      $:结束

var reg1=/^\w{6,12}$/;

var reg2=new RegExp("^\\w{6,12}$");

    1. 字符串内用到反斜杠需要用反斜杠来转义。"^\\w{6,12}$"
  1. 正则对象
    1. 创建
      1. var reg = new RegExp("正则表达式");
      2. var reg = /正则表达式/;(这个比较多用)
    1. 方法
      test(参数):验证指定的字符串是否符合正则定义的规范

Global:全局对象

Global中封装的方法不需要对象就可以直接调用。 方法名();

  1. 方法
    encodeURI():url编码
    decodeURI():url解码
    encodeURIComponent():url编码(对同一个url编码的字符更多,对://也会编码)
    decodeURIComponent():url解码
    * 若汉字是GBK编码,则1个汉字占2个字节;若汉字是utf-8编码,则1个汉字占3个字节。

    parseInt():将字符串转为数字(比+、-功能更强大)
    * 逐一判断每一个字符是否是数字,直到不是数字为止,将前面的数字部分转为number
    isNaN():判断一个值是否是NaN
    * NaN六亲不认,连自己都不认。NaN参与的==比较全部为false
    eval():将JavaScript字符串转为脚本代码来执行

BOM

一、概念

Browser Object Model 浏览器对象模型

将浏览器的各个组成部分封装为对象

二、组成

Window:窗口对象

  1. 创建
  2. 方法
    1. 与弹出框有关的方法
      alert():显示带有一段消息和一个确认按钮的警告框
      confirm():显示带有一段消息以及确认按钮和取消的对话框
      * 用户点击确定,返回true
      * 用户点击取消,返回false
      prompt():显示可提供用户输入的对话框
      * 返回值:获取用户输入的值
    2. 与打开关闭有关的方法
      close():关闭浏览器窗口
      * 谁调用我,我关谁
      open():打开一个新的浏览器窗口
      * 返回新的Window对象
    3. 与定时器有关的方法
      setTimeout():一次性定时器,在指定的毫秒后执行代码。timeout暂停
      *参数:
      1.js代码或者方法对象
      2.毫秒值
      *返回值:唯一标识id,用于取消定时器
      clearTimeout(id):根据唯一标识id取消一次性定时器
      setInterval():循环定时器,按照指定周期(毫秒计)来执行代码。interval间隔(返回值参数同上)
      clearInterval(id):取消循环定时器

var id=setTimeout("fun();",2000);

       clearTimeout(id);

       function fun(){

           alert("hhhh")

       }js

  1. 属性
    1. 获取其他四个BOM对象
      history
      location
      navigator
      screen
    2. 获取DOM对象
      document

window.document.getElementById()

document.getElementById()

  1. 特点
    • Window对象不需要创建可以直接使用window使用。 window.方法名();
    • window引用可以省略。 方法名();

Location:地址栏对象

  1. 创建(获取)
    1. window.location
    2. location
  1. 方法
    reload():刷新当前网页
    href():获取或设置地址栏url

var btn=document.getElementById("btn");

   //绑定单击事件

   btn.onclick=function (){

       //刷新网页

       location.reload();

       //访问www.baidu.cn

       location.href="http://www.baidu.cn"

   }

History:历史记录对象

  1. 创建(获取)
    1. window.history
    2. history
  1. 方法
    *back():加载history列表中的前一个url
    *forward():加载history列表的下一个url
    *go(参数):加载history列表中的某个具体页面
    参数:
    正数:前进几个历史记录
    负数:后退几个历史记录
  2. 属性
    length:返回当前窗口历史列表中的url数量

Navigator:浏览器对象(基本不用)

Screen:显示器屏幕对象(基本不用)

DOM

一、概念

document object model 文档对象模型

将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行crud的动态操作

HTML文档被加载进浏览器内存,变成DOM树结构

二、组成

核心 DOM:针对任何结构化文档(标记语言)的标准模型

  • Document:文档对象
    1. 创建(获取):在html dom模型中可以使用window对象来获取
      1. window.document
      2. document
    1. 方法:1.获取Element对象
      1. getElementById():根据id属性值获取元素对象。id属性值一般唯一
      2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
      3. getElementsByClassName():根据class属性值获取元素对象们。返回值为数组
      4. getElementsByName():根据name属性值获取元素对象们。返回值为数组
    1. 2.创建其他DOM对象
      createAttribute(name)
      createComment()
      createElement()
      createTextNode()
    2. 属性
  • Element:元素对象
    1. 获取/创建:通过document来获取和创建
    2. 方法:
      1. removeAttribute():删除属性
      2. setAttribute():设置属性
  • Attribute:属性对象
  • Text:文本对象
  • Comment:注释对象
  • Node:节点对象。上面5个的父对象
    1. 特点:所有DOM对象都可以被认为是一个节点
    2. 方法
      1. CRUD dom树
        *appendChild():向子节点列表结尾添加新的子节点
        *removeChild():删除(并返回)指定的子节点
        *replaceChild():用新节点替换一个子节点
    1. 属性
      parentNode():返回节点的父节点

HTML DOM:针对HTML文档的标准模型

  1. 设置和获取标签体的内容:innerHTML

document.getElementById("div").innerHTML +="<input type='text'>";

//在元素标签体后添加一个文本框

  1. 使用html元素对象的属性
  2. 控制样式
    1. 使用style属性来设置
    2. 提前定义好类选择器的样式,通过元素的className属性来设置class属性值

XML DOM:针对xml文档的标准模型

三、事件监听机制

概念

某些组件被执行了某些操作后,触发某些代码的执行

  • 事件:某些操作。如:单击,双击,键盘按下,鼠标移动
  • 事件源:组件。如:按钮 文本输入框
  • 监听器:代码
  • 注册监听:将事件,事件源,监听器结合在一起。当事件源上发生了某个事件,就触发执行监听器代码

常见事件

  1. 点击事件
    1. onclick:单击事件
    2. ondblclick:双击事件
  1. 焦点事件
    1. onblur:失去焦点。blur:模糊
      *一般用于表单内容校验
    2. onfocus:获得焦点。focus:集中
  1. 加载事件
    1. onload:网页或一副图像完成加载
  1. 鼠标事件
    1. onmousedown:鼠标按键被按下
      *定义方法时,定义一个形参,接收event对象
      *event 对象的button属性可以获取哪个鼠标按键被点击了
    2. onmouseup:鼠标按键被松开
    3. onmousemove:鼠标被移动
    4. onmouseover:鼠标移到某元素之上
    5. onmouseout:鼠标从某元素移开
  1. 键盘事件
    1. onkeyup:键盘某个键被按下
    2. onkeydown:键盘某个键被松开
    3. onkeypress:键盘某个键被按下并松开

document.getElementById("username").onkeydown=function (event){

       //用户填写表单按下回车键自动提交

       if(event.keyCode==13){

           alert("提交表单……");

       }

   }

  1. 选择和改变
    1. onChange:域的内容被改变
      *可用于下拉列表的改动提示
    2. onselect:文本被选中
  1. 表单事件
    1. onsubmit:确认按钮被点击
    2. onreset:充值按钮被点击

//onsubmit可以阻止表单的提交

   document.getElementById("form").onsubmit=function (){

       //校验用户名是否正确

       var flag=false;

       //不返回或者返回true,则提交表单;返回false则阻止提交表单

       return flag;

   }


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【C++】—— 快速入门(1)
【C++】—— 快速入门(1)
12 0
JDBC快速入门
本文快速地讲述了如何使用JDBC来操作数据库
30 0
JDBC快速入门
最短时间内了解JDBC
20 0
Egg.js快速入门(2)
Egg.js快速入门(2)
40 0
Node.js快速入门
Node.js快速入门
71 0
块存储快速入门-2
块存储快速入门-2
27 0
Egg.js快速入门
Egg.js快速入门
90 0
JDBC 快速入门
JDBC英文全称是Java Database Connectivity,也就是Java数据库连接。这是一个Java连接SQL数据库的标准,包含了常用的API,让我们能方便的连接盒管理SQL数据库。
790 0
JBoss7快速入门
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私募机构九鼎控股打造,九鼎投资是在全国股份转让系统挂牌的公众公司,股票代码为430719,为“中国PE第一股”,市值超1000亿元。
704 0
CSS布局快速入门
最近因为项目需要,不得不重新看看CSS/HTML之类的东西,不看不要紧,一看吓一跳 原来不知道真的是太多,以前从未认真对待过,这次总结了一下学习所得,算是对自己 有个交代,也可能让想了解CSS/HTML布局应用的朋友快速入门: 1. CSS 与HTML元素直接关联,以HTML h1元素为例。
770 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
23-Vue.js在前端...1506518547.pdf
立即下载
利用编译将 Vue 组件转成 React 组件
立即下载