插入Javascript脚本的三种方式

1.行间事件方式以及按钮的onclink和alert

<body>
    <input type="button" value="hello" onclick="window.alert('hello word!!!!!!!')"></input>
</body>

使用上述代码即可实现点击按钮弹出窗口的效果

2.代码块的方式

    <script type="text/javascript">
        window.alert("hello")
    </script>

执行上述代码，打开网页就会显示弹窗

3.外部文件的方式

创建js文件夹并在其中创建hello.js

在内部写入代码

window.alert("hello kitty");

然后在html中调用

<body>
    <script type="text/javascript" src="js/hello.js"></script>
</body>

运行后结果为

4.函数

编写如图所示代码

<body>
    <input type="button" onclick="sayhello('wwwww')" />
    <script type="text/javascript">
      function hanshu(a,b){
        window.alert(a+"？"+b);
      }
      hanshu("abc",true);
      hanshu();
      hanshu(1);
      hanshu(1,2);
      hanshu(1,2,3);
      // 第二种声明方式
      mysum=function(a,b){
        return a+b;
      }
      var res=mysum(10,20);
      window.alert(res);
      function sayhello(a){
        window.alert("hello!!!"+a);
      }
    </script>
  </body>

执行结果为：

全局变量与局部变量相较于java不同的地方

    <script type="text/javascript">
      function sayhello(){
        p="asdadasd";
      }
      sayhello();
      window.alert(p);
    </script>

调用结果为

在JavaScript中不使用var关键字进行声明的变量，都为全局变量

js中的函数是不能重载的

函数若重名后声明的会覆盖前面的

数据类型

number

NaN

在js脚本运行数学运算时，若结果不是数字，则会返回nan

例如

  <body>
    <script type="text/javascript">
      var res = 199/"http";
      window.alert(res);
    </script>
  </body>

infinity

无穷大在js中计算 100/0时变量中的值将为infinity

isNaN函数

isNaN会判断传入参数是否为数字

如果不是数字返回true

是数字，返回flase

特殊的bool型的数据使用isNaN也会被判定为数字

number函数

number函数会将传入的参数

<body>
    <script>
        var i=Number("123456");
        window.alert(typeof(i));
    </script>
</body>

结果为：

parseInt函数

使用parseInt可以将其他数据类型暴力取整

<body>
    <script>
        var i=Number("123456.999");
        window.alert(parseInt(i));
    </script>
</body>

或

<body>
    <script>
        var i=Number("123456qwe");
        window.alert(parseInt(i));
    </script>
</body>

运行结果都是：

Math.ceil函数

此函数作用与parseInt类似与之不同的是，此函数是向上取整

特殊

js中10/3不是3 而是3.3333333

Boolean类型

boolean只有ture和false两个值

Boolean函数

此函数会将任意类型的数据转换为Boolean类型

Boolean在js中会被隐式调用

下面两种方式是等价的

        if(Boolean("asd")){
        }
        if("abc"){
        }

string类型

常用属性和方法

<body>
    <script type="text/javascript">
      console.log("abcdef".length);//6
      console.log("qwerty".charAt(3))//r
      console.log("qwe".concat("rty"))//qwerty
      console.log("a=b&b=c".indexOf("="))//1
      console.log("a=b&b=c".lastIndexOf("="))//5
      console.log("1-1-501".replace("-",","))//1,1-501(只能替换第一个)
      var arr = "1-1-501".split("-");//拆分字符串 //不需要使用var[]
      for(var i=0;i<arr.length;i++){
        console.log(arr[i]);
      }
      console.log("abcdefg".substr(2))//cdefg
      console.log("abcdefg".substring(2))//cdefg
      //在参数为两个时
      //substr为（start，len）
      //substring为（start，end）（不包括end）
      console.log("abcdefg".substr(2,3))//cde
      console.log("abcdefg".substring(2,3))//c
      console.log("Abc".toLowerCase())//abc
      console.log("Abc".toUpperCase())//ABC
    </script>
  </body>

Object

与java相同，可以把Ovject类型看成是所有类的基类

Object对象其中最重要的是它的prototype属性

它可以动态的给类扩展方法和属性

例如

    <script type="text/javascript">
      var obj = new Object();
      Object.prototype.mytest = function(){
        console.log("test success");
      }
      obj.mytest();
      Object.prototype.username="zhangsan";
      console.log(obj.username)
    </script>

上述代码结果为

类

<script type="text/javascript">
      /*js中定义类
      第一种方法：
        function 类名（形式参数列表）{
          this.属性名 = 参数
          this.属性名 = 参数
          this.方法名 = function(){
          }
        }
      第二种方法：
        类名 = function(形式参数列表){
          this.属性名 = 参数
          this.属性名 = 参数
          this.方法名 = function(){
          }
        }*/
      //sayHello既是函数，也是类，取决于如何调用
      function sayHello(){
      }
      //这样调用是当作函数调用，不会在堆中new对象
      sayHello();
      //new 来调用 就是当作类来调用，会在浏览器的堆中开辟新对象
      var obj= new sayHello();
    </script>

示例（员工类）：

      function Emp(empno,ename,sal){
        //属性
        this.empno=empno;
        this.ename=ename;
        this.sal = sal;
        //方法
        this.work=function(){
          console.log(ename+"working.....");
        }
      }
      //创建对象
      var v1=new Emp();
      v1.work();
      var v2=new Emp(1);
      v2.work();
      var v3=new Emp(1,"zhangsan");
      v3.work();
      var v4=new Emp(1,"zhangsan",900);
      v4.work();
      console.log("第一种方式"+v4.sal);
      //另一种引用方式
      console.log("第二种方式"+v4["sal"])
      //给emp动态添加方法
      Emp.prototype.getSal=function(){
        return this.sal;
      }
      console.log(v4.getSal());

运行结果：

= =和= = =

===相当于java里的equals,即比较数据是否相等，又比较数据类型是否一致
==则只比较值是否相等
var v1=true;
var v2=1;
console.log(v1==v2);//true
console.log(v1===v2);//flase

null NaN 和undefined区别

null == undefined 但数据类型不同

NaN与任何都不能等同

javaScript 事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
load事件(在页面加载完毕之后触发)
<body onload="console.log('加载完毕')">
    焦点事件：<input type="text" onblur="console.log('失去焦点')" onfocus="console.log('获得焦点')">
    <br>
    单击事件：<input type="button" onclick="console.log('单击')" value="单击">
    <br>
    双击事件：<input type="button" ondblclick="console.log('双击')" value="双击">
    <br>
    按键事件：<input type="text" onkeydown="console.log('按键按下')" onkeyup="console.log('按键抬起')">
    <br>
    鼠标相关事件
    <div style="border: 1px solid black; width: 300px; height: 300px;"onmouseover="console.log('鼠标经过了')"
                                                                        onmousemove="console.log('鼠标在div内移动了')"
                                                                        onmouseout="console.log('鼠标离开了')"
                                                                        onmouseup="console.log('鼠标弹起了')"
                                                                        onmousedown="console.log('鼠标按下了')"
                                                                        ></div>
                                                                        <br>
    表单事件
    <form onsubmit="alert('表单提交了')" onreset="console.log('表单重置了')">
        <input type="submit" value="提交">
        <input type="reset"  value="重置">
    </form>
    <br>
    选中文本事件和修改事件
    <input type="text"  onselect="console.log('文本被选中了')" onchange="console.log('文本被修改')"></textarea>
    <br>
    <select onchange="console.log('选项被修改')"> 
        <option value="">请选择您的学历</option>
        <option value="bk">本科</option>
        <option value="zk">专科</option>
    </select>
</body>
</html>

ECMAScript DOM BOM

ECMAScript是javaScript的语法核心

DOM是组件如按钮，表格等，在js中 document是表示DOM组件

BOM是所有浏览器操作如弹窗等在js中使用window表示

事件注册

事件注册有两种方式

第一种就是直接在元素中通过onclick声明

第二种

<body>
    <input type="button" id="mybutton1" value="button1"/>
    <input type="button" id="mybutton2" value="button2"/>
    <script type="text/javascript">
        function t1(){
            console.log("1111");
            window.alert("t1被调用了");
        }
        var b1=document.getElementById("mybutton1");
        b1.onclick=t1;
        console.log(b1);
        var b2=document.getElementById("mybutton2");
        b2.onclick = function (){
            console.log("2222");
            window.alert("匿名函数被调用了")
        }
        console.log(b2);
    </script>
</body>

代码的执行顺序

在使用DOM获取元素时要注意脚本要写在元素声明之后

<body>
    <script type="text/javascript">
           var bt = document.getElementById("bt");
           bt.onclick = function(){
               alert("匿名函数");
           }
    </script>
    <input type="button" id="bt" value="BUTTON"/>
</body>

像上面这样的代码，因为先执行的脚本，导致bt对象为null，此时修改顺序即可解决问题

或者也可以将代码改为下面这种写法

<body onload="load()">
    <script type="text/javascript">
        function load (){
            var bt = document.getElementById("bt");
            bt.onclick = function(){
                alert("匿名函数");
            }
        }
    </script>
    <input type="button" id="bt" value="BUTTON"/>
</body>

或者

<body>
    <script type="text/javascript">
        window.onload=function(){
            var bt = document.getElementById("bt");
            bt.onclick = function(){
                alert("匿名函数");
            }
        }
    </script>
    <input type="button" id="bt" value="BUTTON"/>
</body>

键盘监听

上面提到了一系列键盘监听事件，我们可以通过以下代码获取得到的按键

  <body>
    <input type="text" id="username"/>
    <script type="text/javascript">
      function DL (a){
        if(a.keyCode==13){
          console.log("点击了enter");
        }
      }
      window.onload=function(){
        var username = document.getElementById("username");
        username.onkeypress=DL;
      }
    </script>
  </body>

或

  <body>
    <input type="text" id="username"/>
    <script type="text/javascript">
      window.onload=function(){
        var username = document.getElementById("username");
        username.onkeypress=function(a){
          if(a.keyCode==13){
            console.log("点击了enter")
          }
        }
      }
    </script>
  </body>

练习移动方块

  <body id="body">
    <div id="person" style="width: 10px; height: 10px; position: absolute; left: 50px; top: 50px; background-color: #2F2D2E;"></div>
    <script type="text/javascript">
      window.onload=function(){
        person = document.getElementById("person");
        body = document.getElementById("body");
        speed = 1.0;
        last_key='q';
        window.onkeydown=function(data){
          var y=parseInt(person.style.top);
          var x=parseInt(person.style.left);
          if (last_key==data.key){
            speed=speed+0.5;
          }
          else {
            speed=1;
          }
          last_key = data.key;
          if(data.key=='w'&&y>30){
            y=y-speed;
            person.style.top=y+'px';
          }
          if(data.key=='s'&&y<window.innerHeight-30){
            y=y+speed;
            person.style.top=y+'px';
          }
          if(data.key=='a'&&x>30){
            x=x-speed;
            person.style.left=x+'px';
          }
          if(data.key=='d'&&x<window.innerWidth-30){
            x=x+speed;
            person.style.left=x+'px';
          }
        }
      }
    </script>
  </body>

void运算符

void运算符的用法是 void(表达式)

那么表达式返回的将返回空值

假如我们想有一个超链接样式的文本，单击后执行js代码，并且在执行完js代码后不跳转页面。

我们就可以这样写

<body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="javascript:void(0)" onclick="alert('link')" >
        dlaks;lkalskdl;akdl;ak;l
    </a>    
</body>

如果写成href=""那么单击相当于访问当前页，不符合要求

array 数组

<body>
    <script type="text/javascript">
        var a=[];
        a.push(5);
        a.push(6);
        a.push(7);
        console.log(a.length);// 3
        console.log("pop"+a.pop());//pop7
        console.log(a.length);//2
        /****push和pop符合栈的特点*****/
        var b = new Array(2001,1,1);
        var str = b.join("_");
        console.log(str); //2001_1_1
        var c=[9,8,7,true,false];
        c.reverse();
        for(var i in c){
            console.log(c[i]); //false true 7 8 9
        }
    </script>
</body>

date对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var time=new Date();
        console.log(time);//Sun Dec 05 2021 14:57:56 GMT+0800 (中国标准时间)
        year = time.getFullYear();
        month = time.getMonth();
        //day = time.getDay(); 这样获取到的是星期几
        day = time.getDate();
        console.log(year+"年"+month+"月"+day+"日");//2021年11月5日
        var strDate = time.toLocaleDateString();
        var strtime = time.toLocaleTimeString();
        var strDateTime = time.toLocaleString();
        console.log(strDate); //2021/12/5
        console.log(strtime); //下午3:05:30
        console.log(strDateTime); //2021/12/5 下午3:05:30
        //获取1970-1-1 0：0：0到现在的总毫秒数
        var now = new Date();
        var timeMilis = now.getTime();//1638688162376
        console.log(timeMilis);
    </script>
</body>
</html>

WBE前端笔记3：JavaScript练习--基础语法

插入Javascript脚本的三种方式

1.行间事件方式以及按钮的onclink和alert

2.代码块的方式

3.外部文件的方式

4.函数

全局变量与局部变量相较于java不同的地方

js中的函数是不能重载的

数据类型

number

NaN

infinity

isNaN函数

number函数

parseInt函数

Math.ceil函数

特殊

Boolean类型

Boolean函数

string类型

常用属性和方法

Object

类

= =和= = =

null NaN 和undefined区别

javaScript 事件

ECMAScript DOM BOM

事件注册

代码的执行顺序

键盘监听

练习移动方块

void运算符

array 数组

date对象

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

WBE前端笔记3：JavaScript练习--基础语法

插入Javascript脚本的三种方式

1.行间事件方式 以及 按钮的onclink和alert

2.代码块的方式

3.外部文件的方式

4.函数

全局变量与局部变量相较于java不同的地方

js中的函数是不能重载的

数据类型

number

NaN

infinity

isNaN函数

number函数

parseInt函数

Math.ceil函数

特殊

Boolean类型

Boolean函数

string类型

常用属性和方法

Object

类

= =和= = =

null NaN 和undefined区别

javaScript 事件

ECMAScript DOM BOM

事件注册

代码的执行顺序

键盘监听

练习 移动方块

void运算符

array 数组

date对象

热门文章

最新文章

相关课程

相关电子书

相关实验场景

1.行间事件方式以及按钮的onclink和alert

练习移动方块