JavaScript

目录

一、javaScript概述

1、历史

2、作用

二、JavaScript基本语法

1、位置

2、变量

3、数据类型

4、运算符

5、流程控制

6、定义函数

7、全局函数

三、内置对象

1.日期对象

2、算术对象

四、事件

五、HTML DOM对象

1、通过标签id获得HTML标签

2、通过标签名找到HTML标签

3、通过name找到HTML标签

4、通过类名找到HTML标签

5、对css样式进行操作

六、计时


一、javaScript概述

1、历史

        由Netscape(美国网景公司)开发的一种脚本语言(不需要编译,可以由某种引擎解释执行)

        原名:LiveScript

        网景公司和SUN公司合作,改为JavaScript

2、作用

        响应客户端鼠标和键盘事件

        客户端表单验证(在前端将一些无效的信息过滤掉,减轻服务器端的压力)

        动态改变标签样式

        HTML:网页布局 CSS:网页外观 JavaScript:网页行为(动作)

二、JavaScript基本语法

1、位置

<script>   </script>

        此标签可以放在head或body中,一般习惯放在head,还可以将脚本写在外部.js文件中,在HTML中导入外部.js文件

        对象:是一种复杂的数据类型,里面可以包含很多信息(属性、函数)

2、变量

        声明变量(程序中的一个存储单元)关键字(语言中事先定义好的,) var a = 10;

        js是弱类型语言,变量的值可以是语言文本中支持的所有类型

3、数据类型

a、数值型 :包含整数,浮点数

        var a = 10;         var b = 5.4;
b、布尔值(boolean): true/false
c、字符串:"" '' 都表示字符串
d、undefined : 不明确,声明未赋值的变量
         var d;
e、对象型:一种复合(复杂)类型,里面可以包含属性(变量)、方法(动作)

var date = new Date();   //会包含时间与你当那一刻的时间信息

4、运算符

a、算术运算符 + - * / % ++ --

b、逻辑运算符 && || !

c、赋值运算符 = += -= *= /= %=

e、比较运算符 == ===(全等于) != > < >= <=

f、条件运算符(三元运算符):(条件)?表达式1:表达式2

5、流程控制

        if         switch         for         while

6、定义函数

        函数:定义一次,多次调用,完成某种功能的代码块

function 函数名([参数]){
    函数体
    [return 返回值]
}

7、全局函数

        a、parseInt(参数)

将参数转为整数,浮点---->整数

字符串开头的数字部分转为整数

字母开头的字符串返回NaN

        b、parseFloat(参数)

 将参数转为浮点数,浮点--->浮点      

 字符串开头的数字部分转为浮点数

 字母开头的字符串返回NaN

        c、typeOf(参数)

        返回所给参数的数据类型

        d、eval(参数)

        将字符串当做脚本执行(运算某个字符串)

三、内置对象

        语法中已经定义好的

1.日期对象

        表示程序运行时的时间

var date = new Date();              //创建一个日期对象
var year = date.getFullYear();       //年
var month = date.getMonth()+1;       //月 (0-11)
var da  =date.getDate();            //月中的天数
var hour = date.getHours();         //小时
var minute = date.getMinutes();     //分钟
var s = date.getSeconds();          //秒
var w = date.getDay();              //星期 (0-6)
/*设定日期*/
date.setFullYear();                 //设置年份
date.setDate();                     //设置月的某一天
setMonth();                         //设置月份 (0 ~ 11)

2、算术对象

        包含一些算数运算的函数

alert(Math.PI);             //获取圆周率PI的值
alert(Math.pow(2,3));       //数的幂;x的y次幂
alert(Math.sqrt(10));       //计算平方根
alert(Math.abs(-9));        //绝对值
alert(Math.ceil(9.1));      //向上取整
alert(Math.floor(9.99));    //向下取整
alert(Math.round(9.5));     //四舍五入
alert(Math.random());       //获取0-1之间的随机数,可能会为0但不会为1
alert(Math.max(10,5));      //取最大值
alert(Math.min(10,5));      //取最小值

四、事件

        属于html标签中的内容,例如点击按钮,会触发一个事件,不同的事件触发方式不同,触发方式有鼠标触发和键盘触发两种方式

onclick();              //单击:鼠标左键单击
ondblclick();           //双击:鼠标左键双击
onmouseover();          //移入: 鼠标移动到标签上触发
onmouseout();           //移出: 鼠标移出标签触发
onfocus();              //聚焦: 输入组件获得鼠标焦点触发
onblur();               //失焦: 输入组件失去鼠标焦点触发
onchange();             //内容改变: 内容发生改变且失去焦点触发
onload();               //页面加载: 当页面内容一旦加载触发
onkeydown();            //键盘按下: 按键按下时触发
onkeyup();              //键盘抬起: 按键抬起触发

五、HTML DOM对象

        HTML标签可以触发事件,事件可以调用js中的函数,在函数中操作网页中的内容(标签)。

        HTML DOM对象,指的是网页中的具体的一。

        js是面向对象的语言,在js的世界中,认为网页中的每一个标签就是一个对象,操作网页就是操作对象。

        document对象:表示整个html文档,通过document对象,就可以获得网页中的标签。

        要操作,先得到

1、通过标签id获得HTML标签

document.getElementById("id名");
标签名.interHTML;              //获得标签的内容
​
对象名.属性名                 //获得属性的名
对象名.属性名=值               //给属性赋值

example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function test(){
                var message1 = document.getElementById("message1");
                    message2 = document.getElementById("message2");
                message2.value = message1.value;
                message1.value = "";
                message1.type = "button";
                message1.value = "返回"
            }
        </script>
    </head>
    <body>
        <input type = "text" id="message1"  />
        <input type="text" id="message2" /><br />
        <input type="button" value="测试" onclick="test()" />
    </body>
</html>

2、通过标签名找到HTML标签

document.getElementsByTagName("标签名");
//获得到的是一个数组对象,对标签进行操作,循环遍历数组中的每一个标签

3、通过name找到HTML标签

ducument.getElementsByName("name名")

4、通过类名找到HTML标签

document.getElementsByClassName("class名");

即使标签名,name,class属性值只剩一个,仍然是数组

5、对css样式进行操作

document.getElementById("id名").style.属性="属性值";
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript"> 
            function test(){
                 // var objects = document.getElementsByTagName("input
                  var objects  =document.getElementsByName("a1");
                  //var objects  =document.getElementsByClassName("c1");  
                  //对标签进行操作,循环,遍历数组中的每一个标签
                  for(var i=0;i<objects.length;i++){
                      // console.log(objects[i].value);
                      objects[i].value  = 666;
                  }  
            }
           function test1(){
               var divobj = document.getElementById("box1");
               divobj.style.backgroundColor  = "red";
               divobj.style.width  = "200px";
               divobj.style.height = "200px";
           }
        </script>
    </head>
    <body>
          <input type="text"   value="1" name="a1" class="c1"/>
          <input type="text"   value="2" class="c1"/>
          <input type="text"   value="3" class="c1"/>
          <input type="text"   value="4" class="c1"/><br/>
          <input type="button" value="测试" onclick="test()" />
          <div id="box1">     
          </div>
           <input type="button" value="测试css" onclick="test1()" />
    </body>
</html>

六、计时

setTimeout("函数",时间);//在指定时间后,调用指定的函数,只调用一次

定时器开启后会返回一个编号

clearTimeout(序号);//取消指定的定时器

setInterval("函数",时间);//每隔指定时间调用指定的函数,调用多次

clearInterval(序号);//取消指定的计时器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
        
            function test(){
                 alert("执行");
            }
              var t;
            function startTime(){
                  //定时器开启后会返回一个编号
                  //t = setTimeout("test()",5000);//在指定的时间后,调用指定的函数,只调用一次
                  t = setInterval("test()",3000);//每隔指定的时间调用指定的函数,多次调用
            }
            
            function stopTime(){
                 //clearTimeout(t);//取消指定的定时器
                 clearInterval(t);
            }
        </script>
    </head>
    <body>
        <input type="button" value="开始"  onclick="startTime()"/>
        <input type="button" value="停止"  onclick="stopTime()"/>
    </body>
</html>
​

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值