前端基础-JavaScript

4 篇文章 0 订阅

JS(JavaScript)

是一门嵌入式编程语言,主要是嵌入到html中,而且这个语言不需要编译,直接用浏览器就可以运行

 

JS的分类

ECMAScript:JS的核心语法

BOM:浏览器对象

DOM:Document Object Model.操作文档中的元素和内容.

 

JS的使用

a.内嵌式:

        必须在一个标签<script>的开始和结束标签之间写

        格式:在HTML写一个标签

        <script type="text/javascript">

            写js代码

        </script>

        

b.外联式:

        写在另外一个文件,但是文件的后缀必须.js

        在HTML中通过 <script>标签引入刚刚写的js文件

        格式: 假设我们已经写了一个 aa.js的外部js文件

        <script type="text/javascript" src="外部js的路径" charset="utf-8">

            //不能再次写代码

        </script>

 

JS的基本语法

变量的声明:

var 变量; //注意: 在js中变量如果没有赋值 默认值 undefined

赋值:

           a.定义变量同时赋值  var a = 10;

           b.先定义后赋值: var a; a=10;a="abc";

数据类型:

        基本类型:

            a.Undefined 只有一个值 undefined,当定义变量并且不赋值的时候,默认值就是undefined

            b.Null  只有一个值 null,空值,但是在ECMAScript中把他们定义成了相等

            c.Boolean,有两个值 true 和 false

            d.Number,表示任意数字  1 10000000000 3.13 3.13456732345678

            e.string,表示字符串,在js中字符串必须用""或者''引起来

 

        引用类型:

            也是一种叫做类(class),但是我们一般不会自己创建对象,而是直接使用, js已经给我们准备好的对象,

            所以说JS是基于对象 ,而不是面向对象

 

数组的定义:

new Array();

new Array(size);  // size 数组元素个数,数组成员默认值undefined

new Array(element0, element0, ..., elementn);    //参数列表,为数组初始化数据

 

运算符:

算术运算符和java一模一样

比较运算符:

        "==":称为值等,只比较两个数据的值,不考虑类型  比如 var a = "10"  a==10,这是true,因为值一样

        "===":称为全等,即比较类型 也比较数值, 比如 var a = "10"  a===10 这是false,因为类型不一样

逻辑运算符: 与 &&

            或 ||

            非 !

 

boolean类型的转换:

其他数据类型转成boolean类型:

        undifined和null 转成了false

        +0,-0和NaN 转成了false,其他数值转成了true

        "" 空字符串转成了false

        "abc" 有内容字符串 转成了true

boolean类型如果参与运算,那么true转成1 false 转成0

 

JS中的函数:

        格式:

        function 函数名(参数列表){

            函数体;

        }

        调用的格式:

        函数名(实际参数);

        注意:

        1.参数列表中 只需要写参数名,如果多个参数用","相隔

        2.函数和java中的方法一样,不调用不运行

        3.函数调用的时候,可以传递任意个实际参数,

            如果实际参数的个数 < 形式参数个数  那么多出来的形式参数默认值undefined

            如果实际参数的个数 > 形式参数个数  那么自动忽略多余的实际参数

        4.js中没有重载这个概念,如果函数名一样,后面定义的函数会覆盖前面定义的函数

            也就说在前面定义的函数相当于没写

 

JS中的事件:

onsubmit:点击提交按钮后,触发的表单提交事件

onblur:失去焦点事件,本来鼠标选中该标签,然后选中了其他标签的时候

onfocus:获取焦点事件,本来鼠标是选中别的标签,然后选中了该标签

onload:页面加载完毕事件,绑定函数的写法如window.onload = function(){};<body οnlοad="init()">

onmouseover:鼠标移入事件

onmouseout:鼠标移事件

onchange:改变时间,如select框,input输入框

 

事件与函数的绑定:

事件名称=函数名称();//当这个时间被触发时,会立即执行这个函数

事件名称=函数名称;//表示将这个函数赋值给这个事件,或者说绑定,但是不会立即执行

如:

a.<input type="text" 事件名="函数1();函数2()">  //这里会依次触发函数1,函数2

 b.var input对象 = document.getElementById("对应的id");

        input对象.事件名 = 函数1;

        input对象.事件名 = 函数2;//只会触发函数2

 

JS中的this关键字:

js中的this表示当前元素,谁调用的函数,在函数中this就表示谁

 

正则表达式:

js规定,/^正则表达式$/

var b = "需要判断规则的字符串".matches(/^正则表达式$/);

var b = /^正则表达式$/.test("需要判断规则的字符串");

如果b是true 满足规则 如果b是false 不满足规则

 

定时器:

window对象是BOM中的内置对象,这个对象又称为全局对象

第一种定时器:window.setInterval(code,millisec);//返回一个id值

        code:代码段

            a. "正常js代码"

            b. 函数名

        millisec:时间间隔,单位是毫秒    

代表:设置一个定时器,这个定时器每隔millisec毫秒会触发一次,每次都会执行code代码。

window对象可以不写,直接调用setInterval方法也可以,但是不建议不写

 

第二种定时器:setTimeout(code,毫秒值);//一次性定时器,只会执行一次,返回一个id值

 

定时器的取消:

clearInterval(你要取消的定时器的id);//取消周期定时器

clearTimeout(你要取消的定时器的id);//取消一次写定时器

 

页面加载事件:

window.onload事件,当页面加载完毕之后才会触发,给页面加载事件绑定函数:

        方式一:

        window.onload = 函数名;

        function 函数名(){

            设置定时器

        }

        方式二:

        window.onload = function(){

            设置定时器

        }

 

修改标签样式属性值:

obj.style.属性        ,获得指定“属性”的值。

obj.style.属性=值    ,给指定“属性”设置内容。

或当该属性不在style中时,

obj.属性=值

 

获取某个标签的内容:

标签对象.innerHTML :获取该标签的内容,从开始标签到结束标签都是内容

 

修改某个标签的内容

标签对象.innerHTML="内容";

 

BOM:浏览器对象

a、window对象:

全局函数:setInterval,setTimeout,onload

alert();//弹出信息框

confirm();//提示信息框,当点击确定时,返回true,当点击取消时返回true

promot();//可以输入信息的提示框,当点击确定时,返回输入的信息,当点击返回时,返回NULL

b、navigator:导航

c、screen:屏幕对象

d、history:浏览记录对象

e、location:当前浏览器的网页地址

 

DOM对象的常用操作:调用方式统一为document.xxx

获取元素:

getElementById() 通过id属性值获得元素(整个HTML文档id位置)

<xxx id=””>

getElementsByName() 通过name属性值获得所有元素(整个HTML文档中name可能相同)

<xxx name=””>

getElementsByClassName() 通过 class属性值获得所有元素

<xxx class=””>

getElementsByTagName() 通过标签名获得所有的元素

<xxx>

 

创建:

document.createElement(”标签名”) 创建元素节点。 

document.createTextNode((”文本内容”) 创建指定内容的文本节点

setAttribute(name,value); 给元素设置属性名和属性值

appendChild(子元素) 向标签体末尾添加新的子节点。

 

获取一些属性:

childNodes,获得所有的子节点

nodeName, 返回节点名称。(标签名)

nodeType, 返回节点类型。(元素、属性、文本 等)

nodeValue, 节点的值。(只有文本节点才有该属性)\

 

全局函数:都是在window下 可以直接调用

parseFloat();把字符串解析成小数

parseInt();把字符串解析成整数//他们的返回值都是number

eval(): 执行js代码    

 

其他:

appendChild(子元素);

insertBefore(子元素,兄弟元素) 给当前元素前追加兄弟元素

insertAfter(子元素,兄弟元素) 给当前元素后追加兄弟元素

setAttribute(k,v) 给元素设置属性

 

 

 

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值