JavaScript基本使用

JavaScript;
为什么要有JavaScript?
因为用户每一次操作都是要和服务器进行交互的,而当不小心进行了不如意的操作的时候
无法进行回退,使得用户要重新进行操作使得用户的体验性差。
是什么?
JavaScript是脚本语言,是网景公司开发的一个语言,是运行在浏览器的一个脚本语言,
只是借助Java的名字,而非Sun公司开发的。
这个语言最初的设计时为了解决用户注册的问题的。



作用;
通过JavaScript来···操作···HTML标签可以提高用户的体验性。

如;···因为在用户注册时,如果输入有误则需要全部重新输入,不利于用户的体验性
所以也可以通过JavaScript来对用户的输入做一个范围性的限制,
帮助用户避免输入有误。
◆注;可以通过正则表达式来设置
语法;/^正则&/i     --- i 是不区分大小写

分类;
1.ECMA_JavaScript是一个JavaScript基础语法
2.BOM_JavaScript是一个面向浏览器的一个JavaScript脚本编程
3.DOM_JavaScript是一个面向页面(用户体验)的一个JavaScript脚本编程


★★★注;在JavaScript中的事件顶层对象是window
  普通对象的顶层对象是Object      



   ★重★重★注; 1.方法名不能是与关键字一样,如果没有反应则试下改下名字。
   2. 注意大小写问题

----------------------------------------------JS—— 正则表达式 ---------------------------------------------------------------

JavaScript正则表达式;
javaScript的正则表达式和Java的正则表达式符号是通用
【基本所有的语言的正则表达式都是通用的】


JavaScirpt正则表达式语法;
 /^正则$/    ^是一个开始标识符
       $是一个结束标识符
        并且要使用/ xx /
       
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓ECMA——JS↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


在HTML中定义JavaScript方式;
        1.外部引入;在外部定义一个 .jsp 或 .js 后缀的文件,
           在JS文件中写JavaScript的代码,如同CSS的外部引入
   
          2.内部定义;在HTML文档中的<head></head>标签中使用
            <script></script> 标签,在标签内部写JavaScript代码 

----------------------------------------------------特点---------------------------------------------------------------

JavaScript特点;
1.弱类型的语言,对数据类型不敏感,【因为只有一个var关键字来定义数据】
2.解释型的语言,是直接在浏览器中运行的,
------- 而··不··需要像Java那样还需要进行编译,【所以是按照顺序运行的。】

3.跨平台,跨语言的一个脚本语言,【在PHP,C#,Java等都可以用】
4.运行在浏览器的语言,在HTML文本中定义或引用。
5.基于事件驱动的语言
6.是一个基于对象的语言
7.文件后缀是.js/.jsp


-----------------------------------------------------数据类型-------------------------------------------------------------

JavaScript数据类型;       var a = 5;
只有一个〓【 var 】〓关键字来定义数据(变量)的类型,
通过数据(变量)的内容来判断是一个什么类型。

······所以是一个弱类型的语言。


JavaScript数据类型;
  boolean  -----  true  | false
  String   -----  字符串 | 字符
  Number   -----  数字
  undifined ----- 空 | null
  Object    ----- 自定义对象 | JavaScript提供的对象

◆注;在JavaScript中Number类型,如果要进行一个小数点的运算,
则需要进行转换,否则会默认是一个四舍五入的运算
因为在JavaScript没有浮点类型


〓注;A、【 0 】则是false 
        【 非0 】 则是 true 负数也是
     
     B、【 null/空 】 则是 false 
      【 非空 】 则是 true
       
     C、【 undifined 】则是false
      【 非undifined 】 则是true
       
       
       
-------------------------------------------------类型转换----------------------------------------------------------------        
     
      因为在JavaScript没有浮点类型
     
      类型转换;
 1.parseFloat() 将Number类型的一个数值转换成一个小数点的值
 
 2.parseInt()  可以将一个字符串转换成一个整数类型,    
     ★注;只转换可以进行转换的··开始···数字字符串
    
 
    
--------------------------------------------------运算符-----------------------------------------------------------


JavaScript运算符;
算术运算符;+ - * / & ^ |
逻辑运算符;|| && !        【在JavaScript中没有单 | & 】
比较运算符;> < >= <= != 
三目运算符;(表达式)? x:y;

-------------------------------------------------判断语句---------------------------------------------------------------    

1.if
 if---else
 if---else if...
 if---else if...---else

2.switch---case
在switch中的case可以使String,判断语句,number
   ▲ 注;如果在case中的返回是什么类型则在switch()中则写什么类型。
     如;case是判断语句那么在switch()中则写布尔类型的值

---------------------------------------------------循环------------------------------------------------------------

1.while{}

2.do{ }while

3.for(){}

4.for--in

5.with(对象)

▲for--in就是在Java中的forEach,

在JavaScript中主要用于遍历对象和数组的,

1.遍历数组;
    JavaScript中遍历数组是遍历出每一个元素的下标
    
2.遍历对象;
    JavaScript中是遍历每一个对象的属性类型,
    所以遍历对象时使用;对象[ x ]才可以获取到值
   
▲with(对象) 是一个预定义的,当需要调用N个这个对象方法时可以使用这个

----------------------------------------------函数和对象的定义--------------------------------------------------------------

在JavaScript中的···函数和对象···的定义是使用function()关键字的。

函数定义的方式;
1.function x(){}  -----   无参的
2.function x(a,b){}  -----   有参的

对象定义的方式;
1.function x(){} ---- 无参
2.function x(a,b){} ---- 有参的
3.var v = function (){} --- 可有参可无参

4.var v = new Object() --- 通过基类来定义,直接 v.属性 = 值   即可

5.var v = { : }   --- 属性之间使用 , 隔开  属性赋值是  :   也是一个json格式

〓 注;对象和函数的定义方式类似,而是方法还是对象取决于如何调用
1.函数名()      这个是函数
2.new 函数名()  这个是对象
3.可以通过对象.[属性类型]; 获取到对象的属性值


◆◆◆注;在JavaScript中的形参是不用写var 否则会报错
  在JavaScript中有this关键字


JavaScript_Function_Introduce;
在JavaScript中是···没有···函数重载的···也没有···可变形参的。

所以在JavaScript中定义重名的函数,后面的函数会覆盖前面的函数。

虽然JavaScript中没有可变形参,
·····但是提供了····arguments对象数组···来获取到传进来的形参个数
        而且在JavaScript中的函数传入的实参个数和形参个数
        不一样也不会报错
       

JavaScript常用的对象;
1.String  ....
2.Number  ....
3.Boolean  ....
4.Date    setInterval() setTimeOut()
5.Math     round()....

6.数组;
定义方式;
var v = new Array(10);
var v = [xx,xx,xx];

  特点;JavaScript的数组是可以存放任意的类型,而且长度是任意的,
即便指定了长度,可是如果是长度超过指定的长度,也不会报错,
而且会自动进行一个扩展。


prototype;
  原形,是所有对象都会有的一个属性。
    
    作用;是用于对对象的功能进行的一个扩展
    如数组等
    Array.prototype.扩展方法名 = function (){  }

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓BOM——JS↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
   
BOM_JavaScript;
是什么?
Browser Object Model 是一个浏览器对象模型。

作用;
BOM是面向浏览器操作的。
如;用户点击某页面的某一处,就回退到上一个页面等........

BOM是根据对象进行操作的。


--------------------------------------------------BOM的元素-------------------------------------------------------------

BOM中的元素;
1.弹出框(事件)
---alert()    弹出框(提示)
---confirm()  确认弹出框
---prompt()   输入弹出框
2.定时
id  setInterval(x,time) === 过多长时间执行一次,执行N次,返回一个id值
clearInterveal(id) === 清除时间定时

id  setTimeOut(x,time) === 过多次时间执行,只执行一次,返回一个id值
clearTimeOut(id) === 清除时间定时

3.history
---历史记录对象;
可以作为前进和后退,和记录

--- back() 上一条历史记录
--- forward() 进入上一条历史记录
=== go(num) 通过指定数值来说明进入的历史记录,负数为退,正数为进,
——————如果超过打开的页数则没有反应 

4.navagator 
  ---导航对象;
  一般用于兼容性问题,
  因为有一些浏览器的版本不支持某些HTML标签
  ---appVersion
 
5.location
 ---本地对象;
  本地页面刷新,跳转等。。。。。。
 ---href= 指定地址
 ---reload() 刷新本页面
 
6.Screen
---屏幕对象
---availHeight 获取到屏幕的高度,不包含任务栏
---avaiWidth   获取到屏幕的宽度,不包含任务栏

---height      获取到屏幕的高度,包含任务栏
---width       获取到屏幕的宽度,包含任务栏

7.Domcument;
  ---是一个规范。



●●● BOM是根据以上的的元素和用户的操作,作用于浏览器的。


■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓DOM——JS↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


DOM_JavaScript;
是什么?
1.Document Object Model 文档对象模型。
2.通过操作HTML结构的过程就叫做DOM编程。
3.DOM是层次化结构的。

作用;
1.是作用于浏览器的页面上的,根据用户的操作,作用于浏览器页面。
2.DOM是根据事件进行操作的。


▲ DOM是操作HTML结构的一种思想、规范。
▲ DOM是一个层出化结构的规范,因此将HTML文档结构定义成一棵树,
而每一个元素(标签)都是这个DOM的节点

------------------------------------------------DOM节点分类------------------------------------------------------------------

DOM节点分类;
Node   基类节点
   |--- Element 元素节点 (标签)
   |--- Comment 注释节点 (标签)   
   |--- Text 文本节点(内容)
   |--- Attr 属性节点 (标签)


★★★注;空格换行也是一个元素

------------------------------------------------DOM节点获取方法------------------------------------------------------------------    
DOM获取节点的方法;
 1.document.getElementById("id") 
  --- 获取到这个id的节点(标签)
 
 2.document.getElementsByClassName("className")  
  --- 获取到所有这个class属性的节点(标签)【数组】
 
 3.document.getElementsByName("name") 
  --- 获取到所有这个name属性的节点 【数组】
 
 4.document.getElementsByTagName("TagName")
  --- 获取到这个标签名的所有节点【数组】
   
 5.document.all() 
   ---获取到这个文档的所有节点【数组】
   
 6.document.forms()
   ---获取到这个文档的所有form表单的所有节点【数组】
 
 7.document.images()
   ---获取到这个文档的所有图片【数组】
 
------------------------------------------------DOM节点关系------------------------------------------------------------------    

DOM节点的关系;
1.父关系;
  Node parentNode() --- 获取到父节点
  
2.兄弟关系;
  Node nextSubling() --- 下一个兄弟节点
  Node previousSubling() --- 上一个兄弟节点
     
3.子关系;
 Node childNodes() --- 获取到所有的子节点 【数组】
 Node firstChild() --- 第一个子节点 
 Node lastChild() --- 最后一个子节点

------------------------------------------------DOM增删改------------------------------------------------------------------

Node .createElement("nodeName") ----- 创建节点


Node .appendChild()  添加子节点, ----- 是添加到最后一个的。


Node .setAttribute("Attr.name","price") -----  设置属性


Node .removeChild(“node”)  ----- 删除节点

 
------------------------------------------------DOM其他方法------------------------------------------------------------------



1.Node nodeName() -----  节点名称
2.Node nodeType()  ----- 节点类型 【数字】
3.Node nodeValue()  ----- 节点的值

Node .value 获取到节点的文本内容
Node .innerHTML 设置节点的文本内容

给事件添加函数名,可以使用this代表当前




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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值