JavaScript学习笔记---07看书学习总结--01JavaScript基础

最新推荐文章于 2022-12-01 07:30:00 发布

心湖中的石子

最新推荐文章于 2022-12-01 07:30:00 发布

阅读量196

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43745804/article/details/105892619

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.引入外部js文件

src方式

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

伪URL方式

<input type="button" value="提交" onclick="javascript:alert('hello world')" />

html文档处理程序引入

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" >
      function hint(){
        alert(navigator.appName);  
      }
    </script>
</head>

<body>
    <input type="button" value="提交" onclick="hint()" />
</body>

2.屏蔽代码

使用注释

  <!-- 注释掉的代码-->

noscript方式

<noscript>这里是不用的代码</noscript>

3.六类基本数据类型

在这里插入图片描述
其中Function也是一种数据类型

4.组合类型Array类型，Object类型

Array类型

<script type="text/javascript" >
      var score=[1,2,3,4,5];//隐式申明数组并赋值
      var score1=new Array(34,5,6,"hello world",23)//显示申明数组并赋值
    </script>

Object类型

<script type="text/javascript" >
   document.bgColor;
</script>

5.运算符

空运算符
对应关键字 void
三元运算符
（表达式）? 表达式1：表达式2；

<script type="text/javascript" >
      var a=10;
      var b=20;
      var show=a>b? a:b;
      alert(show);
    </script>

对象运算符 .运算符，new运算符，delete运算符,（）运算符

<script type="text/javascript" >
      var color=document.bgColor;
      alert(color);
    </script>

typeof运算符

<script type="text/javascript" >
      var color="hello world";
      alert(typeof(color));
    </script>

6.控制语句

with对象操作语句
连续引用一个对象时，为了省略可以用with把响应对象简化引用

<script type="text/javascript" >
    document.write("statement1<br>");
    document.write("statement2<br>");
    document.write("statement3<br>");
    //简化为一下做法
    with(document){
        write("statement1<br>");
        write("statement2<br>");
        write("statement3<br>");
    }
    </script>

7.函数

基本格式

<script type="text/javascript" >
    function funcName([parameters]){
        statements;
        [return 表达式];
    }
    </script>

<script type="text/javascript" >
    var fun=new Function();

    function docaculate(m,n){
        alert(m+n);
    }

    fun=docaculate;
    fun(5,6);
    </script>

8.事件的一种写法（this及其属性）

1.事件绑定（注册）

<a href="myself.html" onclick="javascript:this.href='http://www.baidu.com'">跳转</a>

2.浏览器事件onload，onfoucus，onblur,onscroll,onresize）

<script type="text/javascript" >
    msg="show somthing to me ";
    onload=function (){
        alert(msg+"load");
    }
     /*
    οnfοcus=function (){
        alert(msg+"focus");
    }
   
    οnblur=function (){
        alert(msg+"blur");
    }
    */
    onscroll=function (){
        alert(msg+"scroll");
    }

    onresize=function (){
        alert(msg+"resize");
    }
   
    </script>

3.html元素事件
在button，链接，表单，图片等html元素上的用户动作
在这里插入图片描述

4.IE浏览器扩展事件

9.js如何处理事件

1.匿名函数

<html lang="ch">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" >
    onload=function(){
        var msg="show somthing to me ";
        
        document.myform.mybut.onclick=function(){
            alert(msg);
        }
        /*
        document.forms[0].mybut.οnclick=function(){
            alert(msg);
        }
       */      
    }
    </script>
</head>

<body>  
    <form action="#" name="myform" method="POST">
    <input type="button" name="mybut" value="匿名函数">
    </form>
</body>

</html>

2.显示声明

<html lang="ch">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" >
    function showantoher(){
        document.all.myimg.src="dress02.png";
    }
    function showback(){
        document.all.myimg.src="dress01.png";
    }
    </script>
</head>

<body> 
    <img src="dress01.png" name="myimg"/>
    <script type="text/javascript" >
        document.all.myimg.onmouseover=showantoher;
        document.all.myimg.onmouseout=showback;
    </script> 
</body>

</html>

3.手动触发

<html lang="ch">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" >
    function tiggle(){
            alert("we click the submit")
        }
   
    </script>
</head>

<body>  
    <form action="#" name="myform" method="POST" onsubmit="tiggle()">
    <input type="button" name="mybut" value="匿名函数1" onclick="submit()"><br>

    <input type="button" name="mybut." value="匿名函数2" onclick="document.all.myform.submit()">
    </form>
</body>

</html>

这几个案例都使用了对象方式来调用具体的控件

心湖中的石子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记---07看书学习总结--01JavaScript基础

1.引入外部js文件src方式<script type="text/javascript" src="loaded.js"> </script>伪URL方式<input type="button" value="提交" onclick="javascript:alert('hello world')" />html文档处理程序引入&...
复制链接

扫一扫

专栏目录