JavaScript基础1

最新推荐文章于 2024-11-08 14:35:14 发布

weixin_33924220

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量151

点赞数

文章标签： javascript java ViewUI

原文链接：https://yq.aliyun.com/articles/14370

版权

什么是Javascript？
Javascript是一种基于对象和事件驱动的，与平台无关的，具有安全性的，弱类型的脚本语言。
为什么要用？
使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择。

Javascript的特点：
1.是一种脚本编写语言
JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。
它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。
2.基于对象的语言。
JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
3.简单性
JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。
4.安全性
JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
5.动态性的
JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
6.跨平台性
JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。

JavaScript学习内容：
1.script
2.DOM：文档对象模型（操作HTML CSS代码）
3.BOM:浏览器对象模型（操作浏览器）

JavaScript运行顺序
从html页面的最上面向下运行的.
最佳实践: 将html,css写前面，将js代码写后面.
浏览器加载顺序：
1.HTML解析完成
2.外部脚本和样式加载
3.脚本在文档内解析并执行
4.HTML DOM完全构建
5.图片和外部内容的加载
6.网页完成加载

   js可以放在页面的任何地方，不过建议放在head或body中。
示例：

<script>
alert("你好1");
</script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js</title>
<script>
    alert("你好2");
</script>
</head>

<body>
    <p>中国</p>
    <!--
        JS(Javascript)：基于对象的、事件驱动的、与平台无关的(运行环境由浏览器提供)、弱类型的脚本语言

        强类型和弱类型
            在声明变量时，是否需要指定变量的数据类型

       它的执行顺序是从上往下
    -->
    <script>
        alert("你好3");
    </script>

    <h1>中华人民共和国</h1>
</body>
<script>
    alert("你好4");
</script>
</html>
<script>
    alert("你好5");
</script>

javascript如何加入到html中:
a. // 页面内的js代码.
b. 使用 //引入外部js文件.
c.基于事件的写法:
实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!-- 引入外部的js -->
<script src="外部定义的一个（自己写一个js代码）.js"></script>

<!--内部js-->
<script>
    var a;
    document.write("<br />"+typeof(a)+"<br />"); //undefined

    a=10; //给a赋值为一个整形数据10
    document.write(typeof(a)+"<br />"); //number

    a="string"; //给a赋值为一个字符串string
    document.write(typeof(a)+"<br />"); //string

    a=true; //给a赋值为一个布尔类型true
    document.write(typeof(a)+"<br />"); //boolean

    //弱类型的语言，变量的数据类型在给它赋值时，才能确定，并且会随着赋值的变化而变化

</script>
</head>

<body>

</body>
</html>

javaScript是一种弱类型的语法：
Java中 int x 强类型
js中 var x //var 不知道什么类型 >>弱类型
类型：
undefined: 未定义
number: 数字
string: 字符串
boolean: 布尔型
实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>==和===</title>
<script>
    var i=10;
    var j=10;

    document.write( i==j); //true 
    document.write("<br />");

    document.write( i===j); //true
    document.write("<br />");

    var k="10";

    document.write( i==k); //true
    document.write("<br />");

    document.write( i===k); //false
    document.write("<br />");

    //==：值相等就行
    //===：除值相等外，数据类型也必须相等
</script>
</head>

<body>
</body>
</html>

var声明变量时的规则: 变量的作用域:
a. 在函数外用var或在函数内不用var声明的变量为全局
b. 在函数内用var声明的是局部的
c. 在函数的参数中定义的变量为局部的,并且函数的参数不能加 var定义.
实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>全局变量和局部变量</title>
<script>
    var a=10; 


    function add(){
        var x=20;  
        alert(x+a); 
    }
    add();      //30


    m=30; 

    function add1(){
        var x=20;
        y=30; 
        alert(x+y+a+m);   //90
    }

    add1();

    function add2(){
        alert(y+a);
    }

    add2();    //40



    function add3(z){   // 局部
        z=90;  
        alert(y+z);    //120
    }

    add3();

    alert(z);
</script>
</head>
<body>
</body>
</html>

实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>变量的作用域</title>
<script>
    function show(){
        for(var i=1;i<10;i++){
            document.write(i+"<br />"); //1-9
        }

        document.write(i+"<br />");  //10

        var i;

        document.write(i+"<br />"); //10

        i="string";

        document.write(i+"<br />"); //string
    }

    show();

    //说明在js中没有块级作用域，即使你重新声明，如果没有重新赋值，则还是会保留原有的值
</script>
</head>

<body>
</body>
</html>

js中的函数的定义语法:
a. function 函数名 (参数列表){
return 值; / 无返回值, 直接写代码
}
b. 函数名=function(参数列表){
return 值; / 无返回值, 直接写代码
}

调用:
a. 函数名(参数列表);
b. 值变量=function(参数列表){
return 值; / 无返回值, 直接写代码
}();
实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
<script type="text/javascript">

    function add(x,y){
        return x+y;
    }


    add=function(x,y){
        return x+y;
    } 

    alert( add );   //   输出一个字符串  function类型( java的class)  "function(x,y){      return x+y; }"

    alert(   eval(    '('+  add+'(3,2) ' +')'    )      );

    alert( add(3,4) );//7


    add1=function(x,y){
        return x+y;
    }(3,4); 

    alert( add1 ); //7

</script>
</head>

<body>
</body>
</html>

实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
    var a;
    a=10;
    document.write(typeof(a)+"<br />");

    a=true;
    document.write(typeof(a)+"<br />");
</script>

<script>
    var x=1;

    function add(a){
        y=2;  //全局的
        a=3; //局部的
        alert(x+y+a); //6
    }

    add();

    alert(a); //true 引用上面那个script中的全局变量a


    function add1(){
        alert(x+y+a); //1+2+1=4   由于此时a=true，对应的值为1  (false=0)
    }

    add1();

</script>

</head>

<body>
</body>
</html>

注意：js中的方法中没有重载这个概念, 即如果有多个函数，函数名相同，参数不同，最后一个方法会覆盖前面的方法 .
实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>

<script>
    function add(x,y){
        return x+y;
    }

    function add(x,y,z){
        return x+y+z;
    }

    function add(x,y,z,m){
        return x+y+z+m;
    }

    function add(x){
        return x;
    }

    document.write( add(3,4) +"<br />"); //调用函数     3
    document.write( add(3,4,5) +"<br />"); //调用函数  3
    document.write( add(3,4,5,6) +"<br />"); //调用函数  3
    document.write( add(3,4,5,6,7) +"<br />"); //调用函数 3
</script>
</head>

<body>
</body>
    </html>

结果都是3
改进：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
    /*add(x,y)：说明此函数期望获的两个参数*/
    function add(x,y){
//alert(arguments.length);  //内置对象arguments是用来获取此函数实际接收到的参数
        var num=0;
        for(var i=0;i<arguments.length;i++){
            num=num+arguments[i];
        }
        return num;
    }
document.write( add(3) +"<br />"); //调用函数       
document.write( add(3,4) +"<br />"); //调用函数    
document.write( add(3,4,5) +"<br />"); //调用函数 
document.write( add(3,4,5,6) +"<br />"); //调用函数  
document.write( add(3,4,5,6,7) +"<br />"); //调用函数

/*在js中调用方法是根据名字来的，与后面的参数个数无关，如果方法同名，则后面的会把前面的覆盖*/




</script>
</head>

<body>
</body>
</html>

结果：
3
7
12
18
25
js中的常见函数
eval() 计算javascript代码串
isNaN() 检测一个值是否是非数字的值
parseInt() 将字符串转换为整数，转换第一个无效字符之前的字符串
parseFloat() 将字符串转换为数字，转换第一个无效字符之前的字符串
alert() 弹出对话框显示消息
confirm() 用对话框询问一个回答为是或否的问题
prompt() 弹出对话框，请求用户输入一个字符串
实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>强制类型转换</title>
<script>
    var iNum=10;
    var sNum = iNum.toString(8); //将10转换为8进制
    var iNum1= parseInt("12.6");
    var iNum2= parseInt("hello");
    var iNum3= parseInt("123world");
    var fNum4= parseFloat("25.12.6");
    var Num= Number("123world");
    var b1 = Boolean("");

    document.write(sNum);  //12
    document.write("<br />");

    document.write(iNum1); //12
    document.write("<br />");

    document.write(iNum2); //NaN
    document.write("<br />");

    document.write(iNum3); //123
    document.write("<br />");

    document.write(fNum4); //25.12
    document.write("<br />");

    document.write(Num); //NaN
    document.write("<br />");

    document.write(b1);  //false
    document.write("<br />");

    document.write(isNaN("12")); //false

    //带一个确定按钮的提示框
    alert("用户名或密码错误...");

    //带确定和取消按钮的选择框
    confirm("您确定要删除吗?"); //选择确定则返回true,选择取消则返回false

    //带一个文本输入框的提示框
    prompt("请输入您的安全密码","123"); 

</script>
</head>
<body>
</body>
</html>