JavaScript学习笔记(第一天)

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

工具:webstorm

快速入门:



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

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

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

JavaScript学习笔记(第一天)_第1张图片

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascrip 入门1title>
    <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);

效果:

JavaScript学习笔记(第一天)_第2张图片

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

基本语法:


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

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

赋值语句

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

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

语句块:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascrip 入门1title>
    <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的关键字,没啥可说的。

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

函数:



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

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

带参数函数:

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


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

结果:
JavaScript学习笔记(第一天)_第3张图片

带返回值的函数:


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

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声明的是全局变量

你可能感兴趣的:(javascript,脚本语言,HTML自学系列)