JavaScript笔记

JavaScript基础:

                概念:一门客户端脚本语言

                        运行在客户端浏览器中,每一个浏览器都有JavaScript的解析器

                        脚本语言:不需要编辑,直接就可以被浏览器解析执行

                功能:

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

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

                1、基本语法        

                        1、与HTML结合方式

                                        内部js: 定义 <script>,标签体内容就是js代码

                                        外部js:定义<script> 通过src属性引入外部的js文件

                                注意: <script>可以定义在HTML的任何地方,但是定义的位置会影响执行的顺序                        <script>可以定义多个

                        2、注释:单行注释 //: 注释内容        多行注释 :/***/

                        3、数据类型

                                原始数据类型(基本数据类型)

                                number:数字。整数、小数、NaN(not a number  一个不是数字的数字类型

                                boolean:        true和false

                                string :字符串。

                                null:一个对象为空的占位符

                                undefined:未定义,如果一个变量没有给初始化值,则会被默认赋值为undefined

                        引用数据类型:对象

                        4、变量:                 输出到页面上document.write()        typeof(变量名):得知是什么数据类型

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

                                Java语言是强类型语言,而JavaScript是弱类型的语言

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

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

                                语法:        var          变量名 = 初始化值

                

                        5、运算符

                                1、一元运算符        注意:在JS中,如果运算数不是运算符所要求的类型,那么JS引擎会自动的将运算数经行类型的转换

                                        其他类型转number:

                                                string转number:按字面值转换,如果字面值不是数字,则转为NaN(不是数字的数字)

                                                boolean转number:true转为1,false转为2

                                2、算术运算符

                                3、赋值运算符

                                4、比较运算符          ===(全等于)

                                        比较方式:

                                      1、类型相同:直接比较

                                                字符串:按照字典顺序比较。按位逐一比较,直到得出大小为之

                                                类型不同:先进性类型转换,再比较

                                ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false                      

                                5、逻辑运算符

                                        其他类型转boolean:

                                                number:0或NaN为假,其他为真

                                                string:除了空字符串(""),其他都是true

                                                null&undefined:都是false

                                                对象:所有对象都为true  防止空指针异常也可简化代码                                  

                                6、三元运算符:表达式?值1:值2        判断表达式的值如果为true取值为1,false取值为2

                        6、流程控制

                                switch:在Java中,switch语句可以接受的数据类型:byte int  shor char 枚举 Sring

                                在JS中:switch语句可以接受任意的原始数据类型

                        7、JS的特殊语法

                                1、语句以 ; 结尾,如果一行只有一条语句则 ; 可以省略(不建议)

                                2、变量的定义使用var关键字,也可以不使用

                                                用:定义的变量是局部变量

                                                不用:定义的是全局变量

                基本对象:

                        Function:函数(方法)对象

                                1、创建

                                        function 方法名称(形式参数列表){

                                                方法体

                                        }

                                        var 方法名  = function(形式参数列表){

                                                  方法体

                                        }

        

                                2、方法

                                3、属性

                                        length代表形参的个数

                                4、特点

                                        方法的定义是,形参的类型不用写,返回值类型也可以不写

                                        方法是一个对象,如果定义一个相同名称的方法,会被覆盖

                                        在JS中,方法的调用只与方法的名称有关,和参数列表无关

                                        在方法声明中有一个隐藏的内置对象(数组),argument封装所有的实际参数

                                5、调用

                                        方法名称(实际参数列表)

                        Array:数组对象

                           1、创建:

                                var     arr = new Arrary(元素列表);

                                var     arr = new Arrary(默认长度);如果只有一个数字则为默认的长度

                                var     arr = [元素列表]

                            2、方法:

   

concat()连接两个或更多的数组,并返回结果。
join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多元素,并返回新的长度。
reverse()颠倒数组中元素的顺序。
shift()删除并返回数组的第一个元素
slice()从某个已有的数组返回选定的元素
sort()对数组的元素进行排序
splice()删除元素,并向数组添加新元素。
toSource()返回该对象的源代码。
toString()把数组转换为字符串,并返回结果。
toLocaleString()把数组转换为本地数组,并返回结果。
unshift()向数组的开头添加一个或更多元素,并返回新的长度。
valueOf()返回数组对象的原始值

                           3、属性:length :数组的长度

                           4、特点:

                                        在JS中,数组的元素类型是可变的

                                        在JS中,数组的长度是可变的

                        Boolean:

                        Date:日期对象

                        1、创建   var date=new Date();

                        2、对象

                toLocaleString();返回当前date对象对应的时间本地字符串格式

                getTime();获取毫秒值,返回当前日期对象描述的时间到1970年1月1日零点毫秒值差

Date()返回当日的日期和时间。
getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()从 Date 对象返回月份 (0 ~ 11)。
getFullYear()从 Date 对象以四位数字返回年份。
getYear()请使用 getFullYear() 方法代替。
getHours()返回 Date 对象的小时 (0 ~ 23)。
getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()返回 Date 对象的毫秒(0 ~ 999)。
getTime()返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth()根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear()根据世界时从 Date 对象返回四位数的年份。
getUTCHours()根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes()根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds()根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds()根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse()返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
setDate()设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()设置 Date 对象中月份 (0 ~ 11)。
setFullYear()设置 Date 对象中的年份(四位数字)。
setYear()请使用 setFullYear() 方法代替。
setHours()设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()以毫秒设置 Date 对象。
setUTCDate()根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth()根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear()根据世界时设置 Date 对象中的年份(四位数字)。
setUTCHours()根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes()根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds()根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds()根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource()返回该对象的源代码。
toString()把 Date 对象转换为字符串。
toTimeString()把 Date 对象的时间部分转换为字符串。
toDateString()把 Date 对象的日期部分转换为字符串。
toGMTString()请使用 toUTCString() 方法代替。
toUTCString()根据世界时,把 Date 对象转换为字符串。
toLocaleString()根据本地时间格式,把 Date 对象转换为字符串。
toLocaleTimeString()根据本地时间格式,把 Date 对象的时间部分转换为字符串。
toLocaleDateString()根据本地时间格式,把 Date 对象的日期部分转换为字符串。
UTC()根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf()返回 Date 对象的原始值。

                        

                        Math:数学对象

                                1、创建  :特点:Math对象不用创建,直接使用       Math.方法名() 

                                2、方法     

                                  random()返回0到1之间的随机数(包含0不包含1)

                                        取一到一百的随机数 Math.floor((Math.random()*100)+1

                                  ceil(x) 对数进行上舍入

                                floor(x)对数进行下舍入

                                round(x)   把数四舍五入为最接近的整数

abs(x)返回数的绝对值。
acos(x)返回数的反余弦值。
asin(x)返回数的反正弦值。
atan(x)以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。
ceil(x)对数进行上舍入。
cos(x)返回数的余弦。
exp(x)返回 e 的指数。
floor(x)对数进行下舍入。
log(x)返回数的自然对数(底为e)。
max(x,y)返回 x 和 y 中的最高值。
min(x,y)返回 x 和 y 中的最低值。
pow(x,y)返回 x 的 y 次幂。
random()返回 0 ~ 1 之间的随机数。
round(x)把数四舍五入为最接近的整数。
sin(x)返回数的正弦。
sqrt(x)返回数的平方根。
tan(x)返回角的正切。
toSource()返回该对象的源代码。
valueOf()返回 Math 对象的原始值。

                               3、 属性

E返回算术常量 e,即自然对数的底数(约等于2.718)。
LN2返回 2 的自然对数(约等于0.693)。
LN10返回 10 的自然对数(约等于2.302)。
LOG2E返回以 2 为底的 e 的对数(约等于 1.414)。
LOG10E返回以 10 为底的 e 的对数(约等于0.434)。
PI返回圆周率(约等于3.14159)。
SQRT1_2返回返回 2 的平方根的倒数(约等于 0.707)。
SQRT2返回 2 的平方根(约等于 1.414)。

                        Number

                        String

                        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  reg = /正则表达式/;

                                       2、方法:  test();验证指定的字符串是否符合正则定义的规范                     

                       Global :

                                创建:

                          1、特点:全局对象,这个Global中封装的方法不需要对象就可直接调用 方法名()

                           2、方法        

                                encodeURI():url编码

                                decodeURI():url解码

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

                               decodeURIComponent():url解码

                                parseInt();将字符串转为数字

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

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

                                eval():将JavaScript字符串转化为脚本代码来执行

                          3、URL:编码

DOM简单学习:

        功能:控制HTML文档的内容

        获取页面标签元素对象:Element 

                document.getElementById("id值"):通过元素的id获取元素对象

        操作Element 对象

                修改属性值

                        明确获取的对象是哪一个

                        查看API文档,找其中有哪些属性可以设置

                修改标签体内容

                        属性innerHTML

                                获取元素对象

                                使用innerHTML属性修改标签体内容

事件的简单学习

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

如何绑定事件

        1、直接在HTML标签上,指定事件的属性(操作),属性值就是js代码

                1、事件:onclik--点击事件

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

BOM:

        概念:Browser Object Model 浏览器对象模型

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

                        Window:窗口对象

                                        1、创建

                                        2、方法

                                                1、与弹出框有关的方法

                                                        alert()显示带有一段信息和一个确认按钮的警告框

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

                                                        prompt()显示可提示用户输入的对话框

                                                                返回值获取:用户输入的值

                                                2、与开关有关的方法:

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

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

                                                3、 与定时器有关的对象

                                                        setTimeout() 在指定的毫秒值后调用函数或计算表达式

                                                                参数:

                                                                        1、js代码或者方法对象

                                                                        2、毫秒值

                                                                返回值是:唯一标识,用于取消定时器

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

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

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

                                        3、属性

                                                1、获取其他BOM对象

                                                        history

                                                        location

                                                        navigator

                                                        screen

                                                2、获取DOM对象

                                                                document

                                        4、特点

                                                Window对象不需要创建可以直接使用  window使用 ,window.方法名

                                                window引用可以省略  方法名();

                                                        

                        Navigator:浏览器对象

                        Screen:显示器屏幕对象

                        History:历史记录对象

                                1、创建 (获取):

                                        1、window.history

                                        2、history

                                2、方法

                                        back() 加载history 列表中的前一个URL

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

                                        go(参数):正数 :前进几个历史记录   负数:后退几个历史记录

                                3、属性

                                        length()返回当前窗口历史记录中的URL数量

                Location:地址栏对象

                        1、创建(获取):

                                1window.Location

                                2、location

                        2、方法

                                reload() 重新加载当前文档,刷新

                                属性

                                        href 设置或返回完整的URL

DOM

        概念:Document Object Model 文档对象模型

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

W3C  DOM标准被分为      3    个不同的组成部分

        核心   DOM 针对任何结构化文档的标准模型

                        Document:文档对象

                        Element:元素对象

                        Attribute:属性对象

                        Text:文本对象

                        Comment: 注释对象

                        Node:节点对象。其他五个的父对象

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

                HTML DOM针对HTML的标准模型

核心DOM模型

                Document:文档对象

                        1、创建(获取):在HTML dom模型中可以使用window对象来获取

                                1、window.document

                                2、document

                        2、方法

                                1、获取Element对象

                                        1、getElementById():根据id属性值获取元素对象,id属性值一般唯一

                                        2、getElementsByTagName():根据元素名称获取元素对象,返回值是一个数组

                                        3、getElemensByClassName():根据class属性值获取元素对象,返回值是一个数组

                                        4、getElementsByName():根据name属性值获取元素对象,返回值是一个数组

                                2、创建其他DOM对象

                                                createAttribute(name)

                                                createComment()

                                                createElement()

                                                createTextNode()

                        3、属性

                Element:元素对象

                        1、获取/创建:通过document来获取和创建

                        2、方法:

                                removeAttribute():删除属性

                                setAttribute():设置属性

                Node:节点对象其他五个的父对象

               超链接功能:可以被点击:样式        点击后跳转到href指定的url需求:保留点击功能去掉跳转功能        实现 href="javascript:void(0);"

                        特点:所有dom对象都可以被认为是一个节点

                        方法:CRUD dom :

                                appendChild() :向节点的子节点列表的结尾添加新的子节点

                                removeChild();删除(并返回)当前节点的指定子节点

                                replaceChild():用新节点替换一个子节点

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

HTML DOM:

        1、标签体的设置和获取:innnerHTML

        2、使用HTML元素对象的属性

        3、控制样式

                1、使用元素的style属性来设置

                2、提前控制好类选择器的样式,通过元素的className属性来设置class属性值

                                

                        

                                

                

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值