JavaScript基础1

什么是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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏史上最简单的Spring Cloud教程

Java 代理模式

什么是代理 代理是一种设计模式,它的核心思想,是将对目标的访问转移到代理对象上。这样做的好处就是,目标对象在不改变代码的情况下,可以通过代理对象加一些额外的功能...

23780
来自专栏史上最简单的Spring Cloud教程

Java注解详解

在使用SpringBoot作为Web敏捷开发的框架之后,SpringBoot除了自动装配配置的便捷之外,在很多时候需要基于注解来开发。注解不仅增加了代码的可读性...

36170
来自专栏编程

Java后台编程初学者,这些常识你都知道吗?

小编也是一位Java后台编程初学者,以后每天利用下班时间来给大家分享一下Java编程中的一些常识,希望有心学习的可以多看一眼,如果你是高手欢迎指点文中小编的不足...

23890
来自专栏CodingBlock

Java数据结构和算法总结-数组、二分查找

前言:在平时开发中数组几乎是最基本也是最常用的数据类型,相比链表、二叉树等又简单很多,所以在学习数据和算法时用数组来作为一个起点再合适不过了。本篇博文的所有代...

26690
来自专栏CodingBlock

Java数据结构和算法总结-冒泡排序、选择排序、插入排序算法分析

前言:排序在算法中的地位自然不必多说,在许多工作中都用到了排序,就像学生成绩统计名次、商城商品销量排名、新闻的搜索热度排名等等。也正因为排序的应用范围如此之广...

33490
来自专栏从零学习云计算

Docker学习记录(2)——JAVA应用容器化(JAVA博客应用Solo)

以GitHub上一个开源JAVA博客应用为例,地址为:https://github.com/b3log/solo。它的项目结构是基于Maven的要求布置的,通过...

28900
来自专栏史上最简单的Spring Cloud教程

Java并发编程:线程封闭和ThreadLocal详解

什么是线程封闭 当访问共享变量时,往往需要加锁来保证数据同步。一种避免使用同步的方式就是不共享数据。如果仅在单线程中访问数据,就不需要同步了。这种技术称为线程封...

257100
来自专栏企鹅号快讯

Java Web 模板代码生成器的设计与实现

起因 项目中需要根据数据库表写很多Meta、Dao、Service代码,其中很多代码都是重复而繁琐的。因此如果有一个模板代码的生成器,就可以一定程度提高开发效率...

318100
来自专栏史上最简单的Spring Cloud教程

如何用Redlock实现分布式锁

之前写过一篇文章《如何在springcloud分布式系统中实现分布式锁?》,由于自己仅仅是阅读了相关的书籍,和查阅了相关的资料,就认为那样的是可行的。那篇文章实...

61870
来自专栏CodingBlock

Java数据结构和算法总结-字符串相关高频面试题算法

前言:周末闲来无事,在七月在线上看了看字符串相关算法的讲解视频,收货颇丰,跟着视频讲解简单做了一下笔记,方便以后翻阅复习同时也很乐意分享给大家。什么字符串在算...

44100

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励