插入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对象

热门文章

最新文章

相关课程

相关电子书

相关实验场景

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

练习移动方块