javascript 基础

image.png

第一个js 程序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>测试js</title>
        <script >
             alert(123);
        </script>
    </head>
    <body>
    </body>
</html>

JS 使用示范

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <Script >
            alert(123123123123);
    //将内容写到 html代码中 
            document.write("这是以JavaScript印出的！");
            document.write("<br>");
    </Script>
</head>
<!--onload时间触发 body中加载完成时 才触发时间 -->
<body onload="alert('hello')">
    <Script Language="JavaScript">
        alert("a");//先执行，然后才触发onload代码；
        // 使用系统自定义的函数   获得当前的日期
        var d = new Date();
        var time = d.getHours();
        
        //js 控制台
        console.log(time);
        
        //逻辑代码
        if(time < 20){
            document.write("<b>Good morning</b>");
        }
        else{
            document.write("<i>Good day</i>");
        }
    </Script>

    <br>aaaa
    
    <Script Language="JavaScript">
        alert("b");//先执行，然后才触发onload代码；
    </Script>
</body>
</html>

外部引入 :<script src="js/externalJS.js"> </script>

<!DOCTYPE html>
<html>
    <head>
        <title>Firs JavaScript Sample</title>
        <meta charset="utf-8">
        <script src="js/externalJS.js"> </script>
    </head>
    <body>
        <script Language="JavaScript">
        alert("a");
            document.write("<body bgcolor='yellow' text='blue'><br>");
            document.write("<font size='+3'>This is just plain old HTML stuff.</font>");
        </script>
    </body>
</html>

书写javaScript 需要注意的事儿

注释与java 类似

image.png

特殊字符 即 类似于java中的转义字符
image.png

常量

image.png

变量

image.png

image.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>

var a;                                  //声明单个变量。var关键字与变量名之间以空格分隔
var b, c;                               //声明多个变量。变量之间以逗号分隔
var d = 1;                              //声明并初始化变量。等号左侧是变量名，等号右侧是值
var e = 2, f = 3;                           //声明并初始化多个变量。以逗号分隔多个变量
var e = f = 3;                          //声明并初始化多个变量，且定义变量的值相同
console.log( a );
console.log( b );
console.log( c );
console.log( d );
console.log( e );
console.log( f );
</script>
</head>

<body>
    
</body>
</html>
image.png

js数据类型 5种基本数据类型1种复杂类型

image.png
image.png
image.png

image.png

image.png

image.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
    var a = "1232.45";
    document.write(parseInt(a)+"<br>");
    document.write(parseFloat(a)+"<br>");
    document.write(Number(a)+"<br>");
    document.write("<hr>");
    
    var b = "1232w45";
    document.write(parseInt(b)+"<br>");
    document.write(parseFloat(b)+"<br>");
    document.write(Number(b)+"<br>");
    document.write("<hr>");
    
    var c = true;
    document.write(parseInt(c)+"<br>");
    document.write(parseFloat(c)+"<br>");
    document.write(Number(c)+"<br>");
    document.write("<hr>");
    
    
</script>
</body>
</html>
运算结果
image.png

运算符优先级

image.png

image.png

image.png

定义函数 两种方式

1.静态定义

image.png

2.动态定义

image.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script language="javascript">
    var circularityArea = new Function( "r", "return r*r*Math.PI" );    // 创建一个函数对象
    var rCircle = 2;                        // 给定圆的半径
    var area = circularityArea(rCircle);    // 使用求圆面积的函数求面积
    alert( "半径为2的圆面积为：" + area );  // 输出结果
</script>
</body>
</html>
image.png

动态传参数 arguments对象

image.png

函数调用

1.连接调用

image.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>Functions</title>
    <script language=javascript>
        function greetings(){  // Function defined within <head> tags
            document.bgColor="lightblue";
            alert("Greetings to you!");
        }
    </script>
    </head>
    <body><center>
        <a href="javascript:greetings()"><big>Click here for
            Salutations</big>
        </a><br>
    </center>
    </body>
    </html>

2.事件触发 （最常用）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>Functions and Events</title>
    <script language=javascript>
        function greetings(){  // Function definition
            document.bgColor="pink";
            alert("Greetings and Salutations! ");
        }
    </script>
    </head>

    <body><center>
        <form>
            <input type="button" value="Welcome button" onClick="greetings();">
        </form>
  </body>
</html>
image.png
eval("alert(123)");

作用域：

1.共有函数

image.png

2.私有函数

image.png

定义数组 参考java中定义数组方式，语法上有些许差异。

//Object[] arr=new Object[0];
var arr=new Array();
//Object[] arr=new Object[5];
var arr=new Array(5);
//Object[] arr=new Object[]{"5"};
var arr=new Array("5");
//Object[] arr={1,2,3,4,5,6};
var arr=new Array(1,2,3,4,5,6);
var arr=[1,2,3,4,5,6];

//使用数组 用arr[n]
//输出
console.log(arr[2]);
//输入
arr[2]=10;

遍历数组

var arr=[1,2,3,4,5,6];
for(var n in arr){
console.log(arr[i]);
}
image.png

image.png

image.png

对象

在js中 只有对象的 概念 没有类的概念 我们创建对象可以使用new关键字 ,而new 可以省略

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • javascript笔记
    是什么 一门脚本语言 一门解释型语言 动态类型语言 基于对象的语言 弱类型语言 使用场景 网页特效 服务端开发 命...
    珲_cysky2018阅读 428评论 0赞 0
  • 《高性能javascript》笔记
    第一章 加载和执行 知识点 由于页面在加载遇到script标签时，会下载并执行js文件，从而阻塞包括页面绘制在内的...
    jacktown阅读 362评论 0赞 0
  • javascript笔记
    JavaScript 将字符串转换为数字 parseInt() ◆只保留数字的整数部分，不会进行四舍五入运算。 ...
    AkaTBS阅读 1,001评论 0赞 9
  • RYF javascript笔记1
    标签： 我的笔记 ---学习资料：http://javascript.ruanyifeng.com/ 1. 导论 ...
    暗夜的怒吼阅读 852评论 0赞 1
  • WY-javascript笔记
    严格模式 曾益 消除js语法的一些不合理、不严谨、不安全问题，减少怪异行为并保证代码运行安全 提高编译器效率，增加...
    ddai_Q阅读 923评论 0赞 2