JavaScript介绍

本文介绍了JavaScript的基础知识,包括其定义、使用方法、语法特点、变量与数据类型、DOM操作、自定义函数、表单验证中的正则表达式等,适合初学者系统学习。
摘要由CSDN通过智能技术生成

一、简单了解JavaScript

1.什么是JavaScript

JavaScript简称js跟java没有任何关系属于Html语言一门弱类型的语言
用于给HTML页面页面上漆加动态效果与交互操作ECMA :相当于J5的语言标准,目前最高是E56

2.如何使用js

1.使用script标签,一般而言都是放在head标签中

2.编写js文件,通过script标签中的src属性引入可以在同一个界面中引入多个js文件,执行顺序与引入顺序一致

3.js的调试

浏览器:控制台(Console)
console.log()打印信息.dir()打印一个对象的所有属性和方法

4.js的语法

JavaScript的语法和Java语言类似,每个语句以;结束,语句块用{}

JavaScript井不强制要求在每个语句的结尾加;
//        行注程
/**/        块注释

JavaScrip严格区分大小写

5.变量与数据类型

在J5中,所有的变量都是使用van,let关键字声明
并且变量的值与类型都可以发生改变

使用typeof可以查看数据类型

5.1 .3大基本类型

       1. Number

                1.1JavaScript不区分整数和浮点数,统一用Number表示

                1.2NaN :非数字

                        1/"a"
                        非数字不能使用--比较,需要调用isHat()方法·

               1.3 Infinity:无夯大
               1.4parseInt():String -》整数,
               1.5Number·
               1.6parseInt():String-> 小数,
               1.7 % 求余·

                1.8除法

                        由于精度问题会出现结果不精确,
                        可以调用.fixed()方法保留小数点位数

        2.String

                可以使用(' ' 和 "")
                使用  `  `  反引号可以创建模板字符串

        3.Boolean

                ||   或者·
                &&  并旦·
                !  单目运算符·
                比较运算符

                        ===  比较类型与内容·

                         ==   转换类型再比较-

          4. 默认为null值—object
          5.未初始化的变量—undefined·

6.js中的弹框-

         alert :          提示框
        confirm :     询问框
        prompt :      输入框

7.基本语句结构-

        7.1if结构—接收用户输入的数字1~7,输出对应的是周几

        7.2switch结构

                由用户给定一个小时数:如果是14-18则输出下午

                如果是18-24则输出晚上

                其他四件则输出早上

        7.3while结构

                使用while循环打印三角形,根据用户输入的次数
                打印菱形

        7.4for结构

                循环在页面打印18个h1到h6的标题
                根据用户出入的数字来决定打印的次数
                Q给定一个数组,找出数组中第一对和为20的两个值

二、js的进阶

        1.-自定义函数

                1.1函数的返回值问题

                        js中的函数不需要指定返回类型
                        js中的函数可以返回任意类型
                        js中的函数一定会有返回类型,如果没有return,则为undefined

                1.2return的作用

                        用于给函数设置返回值
                        -用于中断函数运行

                1.3函数的参数问题·

                        参数不需要指定类型
                        调用函数的时候不会对参数的个数进行判断

        2.函数类型     

                高阶函数

                箭头函数                     

                匿名函数( 给一个按钮设置点击事件)
                普通函数(给一个按钮设置点击事件)

       3. window对象

               3.1 screen:有关客户端的屏幕和显示性能的信息

               3.2history:关客户访问过的URL的信息-

                     返回

                                history.back()7
                                history.go(-1)   

                      前进

                                history.forward()·
                                history.go(1)

                3.3-location :有关当前URL的信息

                        location.reload():刷新当前页面
                       location.href():跳转页面

        4.window对象常用函数

                4.1   window.open():  新开窗口·
                4.2window.close():关闭当前窗口-
                4.3setTimeout ;设置定时器
                4.4setInterval:设置循环定时器·

                 4.5清除计时器

                        clearTimeout·
                        clearInterval

           5. 内置对象

                    5.1Date

                    5.2Math

                    5.3 修改元素内容的方法,

                                innerHTML·
                                textcontent

        三、Dom树

                       1. DOM概述

                                1.1Document Object Model

     1.2 DOM树

                     2.查找HTML DOM元素 

                                2.1getElementByld
                                2.2getElementsByName
                                2.3getElementsByTagName
                                2.4getElementsByClassName
                                2.5document.documentElement                
                                2.6document.body
                                2.7querySelector
                                2.8querySelectorAlL

                        3.改变HTML元素

                                3.1 elementinnerHTML=*new html contentgetElementsByName
                                3.2getElementsByTagName
                                3.3getElementsByClassName
                                3.4document.documentElement
                                3.5document.body
                                3.6querySelector
                                3.7querySelectorAlL

                             4.DoM树

                                      4.1document也是一个Element对象,它处于DoM树的最上级
                                      4.2Element对象:HTML标签对象,也是一个节点Node对象
                                      4.3-Node :节点对象

  四、DOM编程

                1.Element常用属性

                        1.1Element.children :获得该元素中的所有子元素标签
                        1.2Element.childElementCount :获得该元素中的子元素的个数
                        1.3Element.firstElementchild :获得第一个子元素

                        1.4Element.cloneNode(boolean):复制节点(是否复制子节点)
                        1.5Element.removeChild(Node):移除子节点
                        1.6Element.replacechild(Node1,Node2):替换Node1替换子节点Node2

                        1.7Element.appendchild(Node):在内容末尾添加子节点
                        1.8Element.insertBefore(Node1,Node2)(Node2为null即可实现未尾插入)
                        将Node1插入在Element中的子元素Node2前面
                        1.9Element.after(Node):在节点后面添加节点
                        1.10Element.before(Node):在节点前面添加节点

                2.使用JS操作表格

                       2.1 DOM结构中,table标签的子节点是tbody 
                       2.2table.rows:表格中的行的集合·
                       2.3row.cells:一行中的列的集合
                       2.4table.insertRow(i):在表格中为i的位置插入一行
                       2.5row.insertCell():在行中为i的位置插入一列
                       2.6table.deleteRow(i):删除第行·

五、表单验证

        1.正则验证

               1.1 使用正则表达式来对数据格式进行判断

                1.2正则的规则

                    内容· 

                                \d     数字[0-9]
                                \D     非数字^[0-9]
                                \w     数字+英文+下划线[0-9a-zA-Z_]
                                \W    非数字+英文+下划线^[0-9a-zA-Z_]
                                .      任意字符   

                     次数·

                                ?     0~1次
                                +      至少一次
                                *      0~任意次
                                \d {5} 五个数字
                                \d{5,10}最少五次,最多10次

              1.2  正则的注意事项

                        规则必须以/^开头
                        规则必须以&/结屋
                        规则只需要\d,而不是\\d
                        定义正则对象:var rex=/^\d{5}$/
                        使用正则对象:rex.test('123')

             

                        

  • 34
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小狗爱敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值