Javascript初学者扫盲 | 小白最爱
JavaScript
沙丁鱼
MusicTech砖工
59人收藏 5895次学习

Javascript初学者扫盲 | 小白最爱

什么是Javascript?

  • JavaScript是一种标准化的ECMAScript脚本语言。
  • JavaScript是一种动态客户端处理语言,其代码可直接在浏览器中运行。

  • JavaScript提供HTML和CSS接口。
  • 用JavaScript可以搭建出响应式网页与用户产生互动。

开发小前奏

下面我们开始编写第一个JavaScript程序。创建一个文件夹,将其命名为gdi。在其中创建一个新页面index.html。输入以下代码:

<!DOCTYPE html>
<html>
    <head>
        <title>Test Page</title>
    </head>
    <body>
    <p>This is my awesome JavaScript code.</p>
        <script>
            alert('Hello World!');
        </script>
    </body>
</html>

同时你可以混搭Scrpit和HTML,<script>会告诉浏览器,这些是功能代码而非文字内容。

<script>
    CODE GOES HERE
</script>

和CSS一样,你可以将一段很长的JavaScript代码作为源文件插入。

<script src="path/to/file.js"></script>

在每一个声明语句后面都要加上“;”

<script>
    console.log('Hello World!');
    console.log('I am glad to meet you');
    console.log('I am fuzzy');
</script>

添加注释有以下两种方法:

<script>
    /*I can wrap long comments 
    with multiple lines 
    like this*/
    console.log('Hello World!'); //Or mark short comments like this
</script>

结果呈现。

  • 打开一个弹出窗口:
alert('Hello World!');
  • 在控制台中呈现内容:
console.log('Hello World!');
  • 在页面上添加语句:
document.write('Hello World!');

小练习:

  • 打开index.html,试着在其中添加注释。
  • 用多种方法呈现你的内容,比如'Hello World!'。
  • 创建一个mycode.js文件,把你的JavaScript代码贴进去,将其链接到你的html页面代码中。

变量知多少

在Javascript中变量用于存储值。当你创建了一个新变量,它没有被赋值,是个空变量。你可以为新变量赋值。变量可以存储各种信息,包括字符、数字和数据集。变量的值可以被改变。

变量命名规则

在JavaScript中,变量名区分大小写,必须以字母、"$"或者"_" 开头。变量名中只能出现数字、字母、"$"或者"_" 。

变量声明:

创建或声明一个变量,只需在“var”后面加上你的变量名,例如:

<script>
    var numberOfKittens;
</script>

初始化变量是一个好习惯,这样你的变量一开始便被赋予了值:

<script>
    var numberOfKittens = 5;
</script>

创建了变量之后,你就可以在程序中使用它啦!

<script>
    var numberOfKittens = 5;
    console.log (numberOfKittens);
</script>

小练习:

在你的JavaScript代码中,创建变量并合法命名,给变量赋值并在控制台或页面中显示变量值。

数字与字符串

变量的值可以是整数或者浮点数(小数)。

<script>
    var numberOfKittens = 5;
    var cutenessRating = 9.6;
</script>

在一些必要的时候浏览器会自动将整数转换为浮点数。

当你有了这些变量数值之后,就可以进行运算啦!

<script>
    var numberOfKittens = 5;
    var numberOfPuppies = 4;
    var numberOfAnimals = numberOfKittens + numberOfPuppies;
</script>

变量的值也可以是字符串,需用引号' '将字符串括起来:

<script>
    var kittensName = 'Fluffy';
</script>
				

那么,如果你的字符串本身包含了“ ' ”这个字符怎么办呢?只需在前面加一个“\”即可:


<script>
    console.log('I\'d like to use an apostrophe');
</script>

用“+”可将两个字符串串联起来:

<script>
    var kittensName = 'Fluffy ';
    var fullName = kittensName + ' McDougle';
    console.log(fullName); //Outputs 'Fluffy McDougle'
</script>

上述语句你还可以这样写:

<script>
    var kittensName = 'Admiral ';
    kittensName += ' Snuggles';
    console.log(kittensName); //Outputs 'Admiral Snuggles'
</script>

小练习:

创建两个变量,一个作为姓,另一个作为名,将两个变量串连起来,在你的页面中显示姓名。

函数小窍门

函数是一段可拆分、可反复调用的代码。

函数的声明:

<script>
    function turtleFact() {
        console.log('A turtle\'s lower shell is called a plastron.');
    }
</script>

之后你就可以在任何时候调用它了:

<script>
    turtleFact();
</script>

函数名后面的括号内可以放置参数,用以获得输入信息。在下面的代码中,我们调用callkitten函数时以字符串'Fluffy'作为输入,于是kittenName就被赋予了'Fluffy'这个值。函数addNumbers也同理:

<script>
    function callKitten (kittenName){
        console.log('Come here, ' + kittenName + '!');
    }
    callKitten ('Fluffy'); //outputs 'Come here, Fluffy!'
    
    function addNumbers(a, b) {
        console.log(a + b);
    }
    addNumbers(5,7); //outputs 12
    addNumbers(9,12); //outputs 21
</script>

你也可以直接将变量放入参数的位置,变量名无需和参数名一致。请看下面一段代码:

<script>
    function addOne(inputNumber){
        var newNumber = inputNumber + 1;
        console.log('<p>You now have ' + newNumber);
    }
    //Declare variables
    var numberOfKittens = 5;
    var numberOfPuppies = 4;
    //Use them in functions
    addOne(numberOfKittens);
    addOne(numberOfPuppies);    
</script>

 

返回值。用return语句让函数在运行结束后返回一个值以供之后使用。注意一旦遇到“return”这个词,函数便会立即结束:

<script>
    function square(num) {
        return num * num;
    }
    console.log(square(4));   // outputs '16'.
    var squareOfFive = square(5); // will make squareOfFive equal 25.
</script>

 

更多资源

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部