JavaScript1

简介: JavaScript1

1、 JavaScript介绍

Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行JavaScript代码。

Js是Netscape网景公司的产品,最早取名为LiveScript;为了吸引更多java程序员。更名为JavaScripto

Js是弱类型,Java是强类型。

弱类型就是类型可变。

强类型,就是定义变量的时候。类型已确定。而且不可变。

inti=12;

vari; i=12;

数值型

i="abc1

字符串类型|

特点:

1.交互性(它可以做的就是信息的动态交互)

2.安全性(不允许直接访问本地硬盘)

3.跨平台性(只要是可以解释s的浏览器都可以执行,和平台无关)

2、 JavaScript和html代码的结合方式

2.1、第一种方式

只需要在head标签中,或者在body标签中,使用script标签来书写JavaScript代码

01-helllo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //alert是javascript语言提供的一个警告型函数。
        //它可以接受任意类型的参数 ,这个参数就是警告框提示信息
        alert("hello javascript");
    </script>
</head>
<body>
</body>
</html>

2.2、第二种方式

使用script标签引入单独的JavaScript代码文件

1.js

alert("1125 hello!")

02-helllo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        现在需要使用script引入外部的js文件来执行
            src属性专门用来引入结束文件路径(可以使相对路径,也可以是绝对路径)
        script标签可以用来定义结束代码,也可以用来引入js文件
        但是,两个功能二选一使用,不能同时使用两个功能
    -->
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript">alert("国哥可以帅了")</script>
</head>
<body>
</body>
</html>

3、变量

什么是变量?
变量是可以存放某些值的内存的命名。


javascrpt的变量类型:

数值类型:number

字符串类型:string

对象类型:object

布尔类型:boolean

函数类型:function


JavaScript里特殊的值: undefined

未定义,所有js变量未赋于初始值的时候,默认值都是undefined.

null 空值

NAN 全称是:Not a Number。非数字。非数值。


JS中的定义变量格式:

var 变量名 ;

var 变量名=值;

03-变量.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
    <script type="text/javaScript">
        var i;
        alert(i);//undefined
        i=12;
        //typeof是javascript语言提供的一个函数
        // alert(typeof (i));//number
        //它可以取数据的类型返回
        alert(typeof (i));//number
        i="abc";
        alert(typeof (i));//String
        var a=12;
        var b="abc";
        alert(a*b);//NAN 非数字
    </script>
</head>
<body>
</body>
</html>

4、关系(比较)运算

等于:==

等于是简单的做字面值的比较

全等于:===

除了做字面值的比较之外,还会比较两个变量的数据类型

04-关系运算.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a="12";
        var b=12;
        alert(a==b);//true
        alert(a===b);//false
    </script>
</head>
<body>
</body>
</html>

5、逻辑运算

且运算: &&

或运算: ||

取反运算: !
在Jascript语言中,所有的变量,都可以做为一个boolean类型的变量使用


0、null、 undefined、"空串)都认为是false;


&& 与运算。

有两种情况:

第一种:当表达式全为真的时候。返回最后一个表达式的值。

第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值

|| 或运算

第一种情况:当表达式全为假时,返回最后一个表达式的值

第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值


并且8&与运算和||或运算有短路。

短路就是说,当这个&&或||运算有结果了之后。后面的表达式不再执行

var a = "abc";  
var b = true;  
var d = false; 
var c = null;

05-逻辑运算.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*在java语言中所有的变量都可以作为一个boolean类型去运算
        0 、null、""(空串)都是false*/
        // var a=0;
        // if (a){
        //     alert("0为真");
        // }else {
        //     alert("0为假");
        // }
        // var b=null;
        // if (b){
        //     alert("null为真");
        // }else {
        //     alert("null为假");
        // }
        // var c=undefined;
        // if (c){
        //     alert("undefined为真");
        // }else {
        //     alert("undefined为假");
        // }
        // var d="";
        // if (d){
        //     alert("空串为真");
        // }else {
        //     alert("空串为假");
        // }
        /*
        &&与运算
        有两中情况
        第一种:当表达式全为真时,返回最后一个表达式的值
        第二种:当表达式中,有一个为假,返回第一个为假的值
        */
        var a="abc";
        var b=true;
        var d=false;
        var c=null;
        //
        // alert(a&&b);//true
        // alert(b&&c);//abc
        // alert(a&&d);//false
        // alert(a&&c);//null
        alert(a&&d&&c);//false
        /*
         ||或运算
         有两中情况
         第一种:当表达式全为假时,返回最后一个表达式的值
         第二中:当表达式中,有一个为真,返回第一个为真的值
         */
        // alert(d||c);//null
        // alert(c||d);//false
        alert(a||c);//abc
        alert(b||c);//true
    </script>
</head>
<body>
</body>
</html>

6、数组

数组定义方式

JS中数组的定义:

格式:

var数组名=[];//空数组

var数组名=[1,‘abc’ true];//定义数组同时赋值元素

06-数组.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var arr=[true];//定义一个空数组
        // alert(arr.length);//0
        arr[0]=12;
        // alert(arr[0]);//12
        // alert(arr.length);//1
        //javaScript语言中的数组,只要我们通过数组下标赋值,就会自动个数组作扩容操作
        arr[2]="abc";
        // alert(arr.length);//3
        alert(arr[1]);//undefined
        //数组的遍历
        for (var i=0;i<arr.length;i++){
            alert(arr[i]);
        }
    </script>
</head>
<body>
</body>
</html>

7、函数

7.1、函数的二种定义方式

第一种,可以使用function关键字来定义函数。 使用的格式如下:

function 函数名(形参列表){
  函数体
}

在JavaScript语言中,如何定义带有返回值的函数?

只需要在还数体内直接使用return语句返回值即可!

07-函数的第一种定义方式.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //定义一个无参函数
        function fun() {
            alert("无参函数fun()被调用了")
        }
        //函数调用才会执行
        // fun();
        function fun2(a, b) {
            alert("有参函数fun()被调用了 a=>"+a+"b=>"+b);
        }
        // fun2(12,"abc");
        //定义带有返回值的函数
        function sum(num1,num2) {
            var result=num1+num2;
            return result;
        }
        alert(sum(100,50))
    </script>
</head>
<body>
</body>
</html>

函数的第二种定义方式。

格式如下

var 函数名 =function (形参列表){
  函数体
}

08-函数的第二种定义方式.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var fun=function () {
            alert("无参函数")
        }
        // fun();
        var fun2=function (a,b) {
            alert("有参函数a="+a+"b="+b);
        }
        fun2(1,2);
        var fun3=function (num1,num2) {
            return num1+num2;
        }
        alert(fun3(100,200));
    </script>
</head>
<body>
</body>
</html>

注:在Java中函数允许重载。但是在JS中函数的重载会直接覆盖掉上一次的定义

09-js不允许重载.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun() {
            alert("无参函数fun()");
        }
        function fun(a,b) {
            alert("有参函数fun(a,b)");
        }
        fun();
    </script>
</head>
<body>
</body>
</html>

7.2、函数的arguments隐形参数(只在function函数内)

就是在function函数中不需要定义,但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。 隐形参数特别像java基础的可变长参数一样。

public void fun (object…args);

可变长参数其他是一个数组。


那么js中的隐形参数也跟java的可变长参数一样。操作类似数组。

10-隐形参数arguments.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun(a) {
            // alert(arguments.length);//查看参数个数
            alert(a);
            for (var i=0;i<arguments.length;i++){
                alert(arguments[i]);
            }
            alert("无参函数fun()");
        }
        // fun(1,"ad",true);
        //需求:定义一个函数,返回所有参数的和
        function sum(num1,num2) {
            var result=0;
            for(var i=0;i<arguments.length;i++){
                if(typeof (arguments[i]) =="number")
                result+=arguments[i];
            }
            return result ;
        }
        alert(sum(1,2,3,4,"abc",5,6,7,8,9));//10abc56789
    </script>
</head>
<body>
</body>
</html>
相关文章
|
JavaScript 前端开发
70.【JavaScript 6.0】(一)
70.【JavaScript 6.0】
56 0
|
存储 JSON JavaScript
70.【JavaScript 6.0】(四)
70.【JavaScript 6.0】
53 1
|
Web App开发 JavaScript 前端开发
JavaScript Day01 初识JavaScript 1
JavaScript Day01 初识JavaScript
88 0
|
JavaScript 前端开发 Java
09.初识javascript
09.初识javascript
63 0
|
JavaScript 前端开发
JavaScript 介绍
JavaScript 介绍
208 0
JavaScript 介绍
|
JavaScript 前端开发
有趣的JavaScript(2)
有趣的JavaScript(2)
|
JSON JavaScript 前端开发
javascript
理解ES 全称: ECMAScript js语言的规范 我们用的js是它的实现 js的组成 ECMAScript(js基础) 扩展-->浏览器端 BOM DOM 扩展-->服务器端 Node.
1309 0
|
Web App开发 JavaScript 前端开发
javascript 如何正确使用getElementById,getElementsByName(), and getElementsByTagName()
WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签。 (1)getElementById():                       getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义,就是通过ID来取得元素,所以只能访问设置了ID的元素。
1230 0
|
JavaScript 前端开发 API
|
移动开发 JavaScript 前端开发