前端-JavaScript1-2——JavaScript建立认知

关于首篇的“ Hello world ! ”这事儿吧，挺有意思，就是学习任何的语言，我们都喜欢在屏幕上直接输出一点什么，当做最简单、最基本的案例。输出什么大家随意，但是很多人都习惯输出“hello world”，世界你好。感觉自己很有情怀的样子。[说白了就是装逼】

2.1 JavaScript书写的位置

1 <script type="text/javascript">

2 alert("Hello World!");

3 </script>

JavaSript程序，要写在HTML页面中，运行页面的时候，这个页面上的JS也就一起运行了。也就是说，js的运行必须有宿主环境，最最常见的宿主环境，就是浏览器。

JS写在<script>标签对儿里面，type属性就是类型，text/javascript就是纯文本的javascript；注意，这个type必须写准确，可以不写，但是要写，一定要写准确，否则失效。

2.2 alert()语句

alert就是英语中“警报”的意思，能够让页面弹出警告框。

实际上这条语句，在运行一个内置函数，运行函数就要加圆括号。不要纠结这个东西，学习所有的程序，都是从模仿开始的。前期，不要去纠结语法的机理是什么，只需要进行模仿。你只需要知道，你模仿了，你就能实现效果。随着课程的深入，你将知道每条语句的确切机理。

1 alert("你好啊！");

这是一条语句，每条语句之后用;结尾。注意，所有的符号都是英文的符号，不要使用中文！

程序是顺序执行的，任何程序都是这样。

语句都要遵循语法，alert的语法比较简单，就是后面的圆括号。

2.3 控制台

控制台是Chrome浏览器“检查”里面的功能，快捷键是F12。英文叫做console。

程序的所有未捕获的错误，都会在控制台中输出。控制台是调试程序的一个利器。

比如下面的语句用了中文的符号，有语法错误：

1 alert(“你好”)；

有些时候我们想在控制台中自己输出点什么，那么就要使用语句：

1 console.log();

console就是控制台，log就是日志的意思，这里是动词，表示打印。

还是那句话，只需要模仿就行了，后面的课程你将知道console是一个内置对象，log是它的一个方法。

比如：

1 console.log("你好啊");

养成打开控制台调试程序的习惯。

2.4 行文特性

JavaScript语句和语句之间的换行、空格、缩进都不敏感。

1 <script type="text/javascript">

2 alert("你好");alert("帅");

5 alert("哈哈哈哈");

6 </script>

等价于：

1 <script type="text/javascript">

2 alert("你好");

3 alert("帅");

4 alert("哈哈哈哈");

5 </script>

语句后面的分号，不是必须写的，如果语句是一行一行写的，那么分号是没有必要的。但是压缩页面的时候，语句结尾的分号，非常重要。

我们把页面做好之后，通常都会进行压缩，用软件把所有的空格、换行都去掉。此时，语句末尾的分号显得非常重要，如果去掉分号，将不能执行。

不能执行：

1 <script type="text/javascript">

2 alert("你好")alert("帅")alert("哈哈哈哈")

3 </script>

正确写法：

4 <script type="text/javascript">

5 alert("你好");alert("帅");alert("哈哈哈哈");

1 </script>

2.5 注释

给人看的东西，对读程序是一个提示作用。复习一下HTML的注释：

1

CSS注释：

1 /*我是注释*/

JavaScript里面的注释：

单行注释：

1 <script type="text/javascript">

2 //我是一行注释

3 //再来一行

4 alert("你好");

5 </script>

或者多行注释：

1 /*

2 我是一行注释

3 再来一行

4 哈哈，我又写了一行

5 */

注释的符号，不能嵌套，错误的示范：

1 /*

2 我是一行注释

3 /*

5 */

6 再来一行

7 哈哈，我又写了一行

8 */

sublime中注释的快捷键，就是ctrl+/

OK，这篇文章就先到这里，附上一些代码供大家参考。

这个是基本语句alert【皮一下】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        alert("从前有座山");

        alert("山上有座庙");

        alert("庙里有个老和尚");

        alert("在给小和尚讲故事");

        alert("讲的什么呢？");

        alert("从前有座山");

        alert("山上有座庙");

        alert("庙里有个老和尚");

        alert("在给小和尚讲故事");

        alert("讲的什么呢？");

        alert("从前有座山");

        alert("山上有座庙");

        alert("庙里有个老和尚");

        alert("在给小和尚讲故事");

        alert("讲的什么呢？");

        alert("从前有座山");

        alert("山上有座庙");

        alert("庙里有个老和尚");

        alert("在给小和尚讲故事");

        alert("讲的什么呢？");

     </script>

</head>

<body>

</body>

</html>

然后是控制台console.log()直接输出语句

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        //下面的语句有语法错误，会在控制台中显示

        //alert(“你好”)；

        //也可以在控制台中输出内容

        console.log("京东(jd.com)，前端开发工程师岗位等你来，坐标北京/上海/深圳/成都/南京，简历可邮件至liuwei1#jd.com (请将#替换为@，标题格式:姓名-前端开发工程师-期望城市-来自京东首页)");

        console.log("你好啊2");

        console.log("你好啊3");

        console.log("你好啊4");

        console.log("你好啊5");

        console.log("你好啊6");

        console.log("你好啊7");

    </script>

</head>

<body>

</body>

</html>

还有JavaScript对换行空格不敏感的特性【即换不换行空不空格对程序执行没有影响】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        //javascript对换行缩进不敏感

        alert("你好");alert("帅");alert("哈哈哈哈");

    </script>

</head>

<body>

</body>

</html>

以及注释内容的样子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        //我是一行注释

        //再来一行

        //哈哈，我又写了一行

        /*

            我是一行注释

            /*

            */

            再来一行

            哈哈，我又写了一行

        */

        alert("你好");

    </script>

</head>

<body>

</body>

</html>

好了，就这些了，下一篇走起。