JavaScript学习笔记（第一天）

最新推荐文章于 2023-01-08 20:56:14 发布

隔壁小王66

最新推荐文章于 2023-01-08 20:56:14 发布

阅读量467

点赞数

分类专栏： Web学习进阶文章标签： javascript 脚本语言

本文链接：https://blog.csdn.net/qq_16131393/article/details/72825754

版权

Web学习进阶专栏收录该内容

16 篇文章 0 订阅

订阅专栏

关于对JavaScript的介绍我就不多加述说了，因为我的理解肯定没有大佬们表述的清晰，JavaScript在我的印象里是一种很流行的脚本语言，至于为何流行？因为所有的网页，浏览器都是由js来驱动的，H5，跨手机，电脑，pad等多种平台。

工具：webstorm

快速入门：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascrip 入门1</title>
    <script>
        var abc='Hello world'
        alert(abc);
    </script>
</head>
<body>
</body>
</html>

为什么这么写？因为js是驱动h5与用户进行交互的，所以必须在html界面上进行操作。

这里创建一个局部字符串变量abc，赋值’Hello world’，将abc内容弹出到窗口上。

这里写图片描述

JavaScript除了可以将js代码直接写在

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascrip 入门1</title>
    <script src="js/alert.js">
    </script>
</head>
<body>
</body>
</html>

我在js文件夹创建了alert.js文件，内容如下：

/**
 * Created by WangChang on 2017/5/31.
 */
var abc='520'
alert(abc);

效果：

这里写图片描述

这里路径一定要写正确，alert.js是放置在js文件夹下的文件。

基本语法：

JavaScript语法跟java类似，这给Android开发的我带来一些便利。

JavaScript每个语句以;结束，语句块也用{},没啥说的，当然本文所述都是在规范的前提下，因为不加;，也不会报错，但是容易引起问题，所以这里不在讲这些。

赋值语句

var age=22;
var name='张三';
var sex='男';

不建议跟java一样一个var申明多个变量。

语句块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascrip 入门1</title>
    <script >
        var a=2;
        if(a>1){
            alert('a=2');
        }else {
            alert('a=1');
        }

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

语句块感觉和java一样，可以内嵌多个判断逻辑，不过原则上建议将逻辑以单一功能封装调取，这样便于理解。

注释：

跟Java一样，略，//单行注释，/多行注释/

数据类型和变量

Javascript定义的数据类型有Number，字符串，布尔值，比较运算符等，看起来比java要简单的多。

Number：

javascript不区分java中的int，double和float等，统一用Number表示。

123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

运算跟java一样采用四则运算。

字符串：

字符串可以用单引号”和双引号”“来表示，都行，看起来比java要包容的多。

布尔值：

跟java一样，true/false,&&，||，！与或非也没啥可说的。

比较运算符：

2 > 5; // false
5 >= 2; // true
7 === 7; // true

这里采用===而不采用==，原因就是js支持不同类型的数据比较，==会将类型转换在比较，===则不会转换，如果不是同类型则false，同类型在比较。

NaN（not a number）它和所有数值均不相等，包括他自己。NaN===NaN(false)。它需要通过isNaN(NaN)；来判断，返回true。

浮点数的比较

1/3===（1-2/3） false，因为浮点数在运算过程中会产生误差

null和undefined：

表示空（不算”）和未定义，跟java一样，略。

数组：

var arr=[1,2,3,4,5];
alert(arr[0]);

跟java一样，[]，下标查找。

对象：

js的对象是由键值对来表示，类似java中的hashmap

        var persion={
            name:'Bob',
            age:'20',
            tags:['js','web','mobile'],
            city:'beijing',

        };
        alert(persion.name)

键是字符串，值可以是任意类型，包括null。

变量：

变量名是大小写英文、数字、$和_的组合，且不能用数字开头。变量名也不能是JavaScript的关键字，没啥可说的。

同一个变量可以赋值多次，而且可以是不同类型的值。

函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascrip 入门1</title>
    <script >
        function myFunction() {
            alert("js函数");
        }
    </script>
</head>
<body>
 <button onclick="myFunction()">请点击</button>
</body>
</html>

跟java类型，方法体放置在{}中，function是关键字，类似返回类型，myFunction是方法名。

带参数函数：

跟java类似,将上面的方法稍加改造

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascrip 入门1</title>
    <script >
        function myFunction(name,age) {
            alert(name+age+'岁了');
        }
    </script>
</head>
<body>
 <button onclick="myFunction('张三',15)">请点击</button>
</body>
</html>

结果：
这里写图片描述

带返回值的函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascrip 入门1</title>

</head>
<body>
<p id="demo"></p>
<script >

    function myFunction(age) {
        var x;
        if(age>18){
            x='成年人';
        }else {
            x='未成年人';
        }
        return x;
    }
    document.getElementById('demo').innerHTML=myFunction(20);
</script>
</body>
</html>

结果在p标签上输出成年人。

var声明的是局部变量，未用var声明的是全局变量

隔壁小王66

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（第一天）

关于对JavaScript的介绍我就不多加述说了，因为我的理解肯定没有大佬们表述的清晰，JavaScript在我的印象里是一种很流行的脚本语言，至于为何流行？因为所有的网页，浏览器都是由js来驱动的，H5，跨手机，电脑，pad等多种平台。工具：webstorm快速入门：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫