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

时间：2024-04-21 13:13:39

关于首篇的“ 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("帅");

3

4

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               /*

4     

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>

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