JavaScript学习:

介绍:

JavaScript是一种专门在浏览器编译并执行的编程语言

JavaScript处理用户与浏览器之间请求问题

JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言

弱类型编程语言风格 VS 强类型编程语言风格

强类型编程语言风格:认为对象行为应该受到其修饰类型严格约束。

Java采用【强类型编程语言风格】对【面向对象思想】来进行实现的编程语言

class Student{
    public String sname;
    public void sayHello(){
        System.out.print("hello world");
    }
                   
 }

 Student  stu = new Student();
stu.sname="mike"; //stu对象能够调用属性只有sname
stu.sayHello();   //stu对象能够调用方法只有sayHello()

stu.sid =10;  // 在Java认为是语法错误,修饰stu对象的Student类型没有提供这个属性

弱类型编程语言风格: 认为对象行为不应该受到其修饰类型约束。可以根据实际需要来决定对象可以调用属性和方法

JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言

    var  stu = new Object();//stu对象相当于【阿Q】
    stu.car = "劳斯莱斯";//合法
    stu.play = function (){ return  "天天打游戏"}
    stu.play();

JavaScript中变量声明方式:

1.命令格式:
var 变量名;
var 变量名 = 值;
var 变量名1,变量名2=值;

2.注意:
在JavaScript变量/对象,在声明不允许指定【修饰类型】只能通过var来进行修饰

JavaScript中标识符命名规则:

1.标识符只能由四种符号组成 英文字母,数字 , 下划线,美元符号($)
2.标识符首字母不能以"数字"开头
3.标识符不能采用JavaScript关键字 比如 var

JavaScript数据类型:

typeof 变量名; 返回当前变量的数据类型名称

1.分类:
基本数据类型 & 高级引用数据类型

2.基本数据类型:
数字类型(number),
字符串类型(string),
布尔类型(boolean)

3.数字类型(number):
JavaScript中将整数与小数合称为number类型

4.字符串类型(string):
JavaScript中字符与字符串合称为string类型
JavaScript字符或者字符串既可以使用' '又可以使用" "

5.布尔类型(boolean): JavaScript中boolean类型的值只有true或者false

6.高级引用数据类型:
object类型
function类型

7.object类型:
JavaScript中所有通过【构造函数】生成的对象都是object类型

8.function类型:
相当于Java中(java.lang.reflect.Method)
JavaScript所有函数都是function类型

JavaScript是弱类型编程语言,根据变量赋值内容来判断变量数据类型

JavaScript中变量的数据类型可以根据赋值内容来进行动态改变

JavaScript中特殊【值】

1.undefined: JavaScript中所有变量在没有赋值时,其默认值都是undefined
由于JavaScript根据变量的赋值来判断变量类型,此时由于变量没有赋值因此JavaScript无法判断当前变量数据类型,此时返回也是undefiled,因此初学者将undefined也理解为是一种数据类型,这种理解是错误。

2.null:JavaScript中当一个对象赋值为null时,表示对象引用了一个【空内存】
这个空内存既不能存储数据也不能读取数据。
此时这个对象数据类型,在JavaScript依然认为是object类型

3.NaN:JavaScript中当一个变量赋值为NaN,表示变量接收了一个【非法数字】(123 合法数字 abc123 非法数字)
此时这个变量数据类型,在JavaScript依然认为number类型

4.infinity: JavaScript中当一个变量赋值为infinity,表示变量接收了一个【无穷大数字】
此时这个变量数据类型,在JavaScript依然认为number类型

JavaScript中控制语句

JavaScript中控制语句与Java中控制语句语法格式完全一致

JavaScript中函数声明方式

1.命令格式:
function 函数名(形参名1,形参名2){

          JavaScript命令行
          JavaScript命令行

          return  将函数运行结果进行返回
      
      }

2.注意:
1)JavaScript中,所有函数在声明时,都需要使用function进行修饰

2)JavaScript中,所有函数在声明时,禁止指定函数返回数据类型

3)JavaScript中,所有函数在声明时,形参既不能使用var来修饰也不能使用数据类型修饰

4)JavaScript中,所有函数在声明时,如果有返回值,此时应该通过return进行返回

JavaScript函数调用方式:

1.浏览器并不会自动调用JavaScript函数

2.可以通过命令行方式来调用Java函数

3.通过绑定在HTML标签上监听事件通知浏览器调用指定函数进行处理


JavaScript作用:

帮助浏览器对用户提出请求进行处理

DOM对象:

1.DOM = Document Object Model, 【文档模型对象】

2.JavaScript不能直接操作HTML标签,只能通过HTML标签关联的DOM对象对HTML标签下达指令

DOM对象生命周期:

1.浏览器在接收到html文件之后,将HTML文件标签加载到浏览器缓存中,每当加载一个html标签时候,自动为这个标签生成一个实例对象,这个实例对象就是DOM对象

2.在浏览器关闭之前或者浏览器请求其他资源文件之前,本次生成的DOM对象一直存活在浏览器缓存中

3.在浏览器关闭时候,浏览器缓存中dom对象将要被销毁

4.在浏览器请求到新资源文件后,浏览器缓存中原有的dom对象将会被覆盖

document对象:

1.document对象被称为【文档对象】

2.document对象用于在浏览器内存中根据定位条件定位DOM对象

document对象生命周期:

1.在浏览器将网页中所有标签加载完毕后,在内存中将使用【树形结构】存储这些DOM对象。在树形结构生成完毕后由浏览器生成一个document对象管理这颗树(DOM树)

在浏览器将接收网页中标签加载完毕后,自动在浏览器内存生成一个document对象

2.一个浏览器运行期间,只会生成一个document对象

3.在浏览器关闭时,负责将document对象进行销毁

通过document对象定位DOM对象方式:

1.根据html标签的id属性值定位DOM对象

命令格式:
var domObj = document.getElementById("id属性值");

举个栗子
var domObj = document.getElementById("one");

通知document对象定位id属性等于one的标签关联的DOM对象

2.根据html标签的name属性值定位DOM对象

命令格式:
var domArray = document.getElementsByName("name属性值");

举个栗子
部门10
部门20
部门30

var domArray = document.getElementsByName("deptNo");

通知document对象将所有name属性等于deptNo的标签关联的DOM对象进行定位并封装到一个数组进行返回。 domArray就是一个数组存放本次返回的所有DOM对象

3.根据html标签类型定位DOM对象

命令格式:
var domArray = document.getElementsByTagName("标签类型名");

举个栗子:
var domArray = document.getElementsByTagName("p");

段落标签

通知document对象将所有段落标签关联的dom对象进行定位并封装到一个数组返回

DOM对象对HTML标签属性操作

1.DOM对象对标签value属性进行取值与赋值操作

取值操作:
var domObj = document.getElementById("one");
var num = domObj.value;

赋值操作:
var domObj = document.getElementById("one");
domObj.value = "abc";

2.DOM对象对标签中【样式属性】进行取值与赋值操作

取值操作:
var domObj = document.getElementById("one");//读取当前标签【背景颜色属性】值
var color = domObj.style.背景颜色属性

赋值操作:
var domObj = document.getElementById("one");//通过DOM对象对标签中【背景颜色属性】进行赋值
domObj.style.背景颜色属性 = 值;

3.DOM对象对标签中【状态属性】进行取值与赋值操作

状态属性: 状态属性的值都是boolean类型

disabled = true ; 表示当前标签不可以使用
disabled = false; 表示当前标签可以使用

checked: 只存在与radio标签与checkbox标签
checked = true ; 表示当前标签被选中了
checked = false; 表示当前标签未被选中

取值操作:
var domObj = document.getElementById("one");
var num = domObj.checked;

赋值操作:
var domObj = document.getElementById("one");
domObj.checked = true;

  1. DOM对象对标签中【文字显示内容】进行赋值与取值

文字显示内容: 只存在于双目标签之间;100

取值操作:
var domObj = document.getElementById("one");
var num1 = domObj.innerText;

赋值操作:
var domObj = document.getElementById("one");
domObj.innerText = 值;

innerText与innerHTML 区别:

innerText与innerHTML都可以对标签文字显示内容属性进行赋值与取值

innerText只能接收字符串

innerHTML既可以接收字符串又可以接收html标签

JavaScript监听事件

1.监听事件:
监听用户在何时以何种方式对当前标签进行操作。
当监听到相关行为时,通知浏览器调用对应JavaScript函数对当前用户请求进行处理

2.监听事件分类:

1)监听用户何时使用鼠标操作当前标签

2)监听用户何时使用键盘操作当前标签

3.监听用户何时使用鼠标操作当前标签:

1) onclick : 监听用户何时使用鼠标【单击】当前标签

2) onmouseover: 监听用户何时将鼠标【悬停】当前标签上方

3) onmouseout : 监听用户何时将鼠标从当前标签上方【移开】

4) onfocus : 监听用户何时通过鼠标让当前标签获得【光标】

5) onblur : 监听用户何时通过鼠标让当前标签丢失【光标】

4.监听用户何时使用键盘操作当前标签

  1. onkeydown :监听用户何时在当前标签上【按下键盘】

  2. onkeyup :监听用户何时在当前标签上【弹起键盘】

onload监听事件:

1 作用: 监听浏览器何时将网页中HTML标签加载完毕

2.意义: 浏览器每加载一个HTML标签时,自动在内存生成一个dom对象。
在浏览器将网页所有标签加载完毕时,意味当前网页中所有标签都生成对应DOM对象。onload此时就可以触发调用函数对浏览器中标签进行处理,此时不会出现未找到DOM对象问题

3.使用:

             

         
         
         

基于DOM对象实现监听事件与HTML标签之间绑定

1.前提:
实际开发过程中,同一个监听事件往往与多个HTML标签进行绑定
这样增加开发强度,在未来维护过程中增加维护难度

2.命令形式:

domObj.监听事件名 = 处理函数名
此处处理函数名后面是不能出现()

3.举个栗子:

              var domObj = document.getElementById("one");
          domObj.onclick = fun1; //注意函数名后面不能有()

          相当于

            //此处函数名后面必须有()

arguments:

1.JavaScript中,每一函数都包含一个arguments属性
2.arguments属性是一个数组
3.在函数调用时,将实参出入到函数的arguments中,再由arguments将数据传递给形参
4.arguments属性存在,可以将JavaScript中函数在调用时传递实参与形参进行格式,增加函数调用灵活性
5.arguments属性只能在函数体内使用,不能在函数体外使用

function类型对象

1.介绍:

1)function是JavaScript中一种高级数据类型
2)一个function类型对象用于管理一个具体函数

  1. JavaScript中function类型相当于Java中Method类型

2.function类型对象声明方式:

1)标准声明方式
2)匿名声明方式

3.function类型对象声明方式----标准声明方式

          function 函数对象名(参数1,参数2){
            命令;
      }

4.function类型对象声明方式----匿名声明方式

         var 函数对象名  = function  (参数1,参数2){  命令1,命令2.。。。};

5.function类型对象的创建时机

浏览器在加载

基本对象:
Function:函数(方法)对象
创建:

 var fun = new Function(形式参数列表,方法体);  //忘掉吧
                        function 方法名称(形式参数列表){
                            方法体
                        }
                       var 方法名 = function(形式参数列表){
                            方法体
                       }

方法:

属性:
length:代表形参的个数

特点:
方法定义是,形参的类型不用写,返回值类型也不写。
方法是一个对象,如果定义名称相同的方法,会覆盖
在JS中,方法的调用只与方法的名称有关,和参数列表无关
在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数

调用:
方法名称(实际参数列表);

Array:数组对象
创建:
var arr = new Array(元素列表);
var arr = new Array(默认长度);
var arr = [元素列表];

方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素,并返回新的长度。

属性
length:数组的长度

特点:
JS中,数组元素的类型可变的。
JS中,数组长度可变的。

Boolean

Date:日期对象
创建:
var date = new Date();

方法:
toLocaleString():返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

Math:数学对象
创建:
特点:Math对象不用创建,直接使用。 Math.方法名();

方法:
random():返回 0 ~ 1 之间的随机数。 含0不含1
ceil(x):对数进行上舍入。
floor(x):对数进行下舍入。
round(x):把数四舍五入为最接近的整数。

属性:
PI

Number

String

RegExp:正则表达式对象

正则表达式:定义字符串的组成规则。

单个字符:[]
如: [a] [ab] [a-zA-Z0-9_]
特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]

量词符号:
?:表示出现0次或1次
*:表示出现0次或多次
+:出现1次或多次
{m,n}:表示 m<= 数量 <= n
m如果缺省: {,n}:最多n次
n如果缺省:{m,} 最少m次

.开始结束符号
^:开始
$:结束

正则对象:
创建
var reg = new RegExp("正则表达式");
var reg = /正则表达式/;

方法
test(参数):验证指定的字符串是否符合正则定义的规范
Global
特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。 方法名();

方法:
encodeURI():url编码
decodeURI():url解码

encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码

parseInt():将字符串转为数字
逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number

isNaN():判断一个值是否是NaN
NaN六亲不认,连自己都不认。NaN参与的==比较全部问false

eval():讲 JavaScript 字符串,并把它作为脚本代码来执行。

URL编码
传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

BOM

DOM

DOM简单学习:为了满足案例要求
功能:控制html文档的内容
获取页面标签(元素)对象:Element
document.getElementById("id值"):通过元素的id获取元素对象

操作Element对象:
修改属性值:
明确获取的对象是哪一个?
查看API文档,找其中有哪些属性可以设置

修改标签体内容:
属性:innerHTML
获取元素对象
使用innerHTML属性修改标签体内容

事件简单学习
功能: 某些组件被执行了某些操作后,触发某些代码的执行。
造句: xxx被xxx,我就xxx
我方水晶被摧毁后,我就责备对友。
敌方水晶被摧毁后,我就夸奖自己。

如何绑定事件
直接在html标签上,指定事件的属性(操作),属性值就是js代码
事件:onclick--- 单击事件

通过js获取元素对象,指定事件属性,设置一个函数

代码:

            
                
                
                
                
            

案例1:电灯开关

        
        
        
            
            电灯开关
        
        
        
        
        
        
        
        
        

BOM:
概念:Browser Object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象。

组成:
Window:窗口对象
Navigator:浏览器对象
Screen:显示器屏幕对象
History:历史记录对象
Location:地址栏对象

Window:窗口对象
创建
方法
与弹出框有关的方法:
alert() 显示带有一段消息和一个确认按钮的警告框。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
如果用户点击确定按钮,则方法返回true
如果用户点击取消按钮,则方法返回false

prompt() 显示可提示用户输入的对话框。
返回值:获取用户输入的值

与打开关闭有关的方法:

close() 关闭浏览器窗口。
谁调用我 ,我关谁

open() 打开一个新的浏览器窗口
返回新的Window对象

与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
参数:
js代码或者方法对象
毫秒值
返回值:唯一标识,用于取消定时器

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。

clearInterval() 取消由 setInterval() 设置的 timeout。

属性:
获取其他BOM对象:
history
location
Navigator
Screen:
获取DOM对象
document
特点
Window对象不需要创建可以直接使用 window使用。 window.方法名();
window引用可以省略。 方法名();

Location:地址栏对象
创建(获取):
window.location
location

方法:
reload() 重新加载当前文档。刷新

属性
href 设置或返回完整的 URL。

History:历史记录对象
创建(获取):
window.history
history

方法:
back() 加载 history 列表中的前一个 URL。

forward() 加载 history 列表中的下一个 URL。

go(参数) 加载 history 列表中的某个具体页面。
参数:
正数:前进几个历史记录
负数:后退几个历史记录

属性:
length 返回当前窗口历史列表中的 URL 数量。

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对象:
getElementById() : 根据id属性值获取元素对象。id属性值一般唯一
getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

创建其他DOM对象:
createAttribute(name)
createComment()
createElement()
createTextNode()

属性
Element:元素对象
获取/创建:通过document来获取和创建

方法:
removeAttribute():删除属性
setAttribute():设置属性

Node:节点对象,其他5个的父对象
特点:所有dom对象都可以被认为是一个节点

方法:
CRUD dom树:
appendChild():向节点的子节点列表的结尾添加新的子节点。
removeChild() :删除(并返回)当前节点的指定子节点。
replaceChild():用新节点替换一个子节点。

属性:
parentNode 返回节点的父节点。

HTML DOM
标签体的设置和获取:innerHTML
使用html元素对象的属性
控制元素样式

使用元素的style属性来设置
如:

                     //修改样式方式1
                    div1.style.border = "1px solid red";
                    div1.style.width = "200px";
                    //font-size--> fontSize
                    div1.style.fontSize = "20px";

提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。

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

常见的事件:
点击事件:
onclick:单击事件
ondblclick:双击事件

焦点事件
. onblur:失去焦点
onfocus:元素获得焦点。

加载事件:
onload:一张页面或一幅图像完成加载。

鼠标事件:
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。

键盘事件:
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。

选择和改变
onchange 域的内容被改变。
onselect 文本被选中。

表单事件:
onsubmit 确认按钮被点击。
onreset 重置按钮被点击。

你可能感兴趣的:(JavaScript学习:)