JavaScript 初步认识

首先呢 要成为WEB全栈工程师呢 JavaScript 是必须要会的 高级技术看自身兴趣爱好，但是基础必须掌握 因为有良好的基础学习jQuery会比较轻松。

js是一门轻量的脚本语言 我学它主要目的是针对HTML页面的响应。

 

 1 JS在什么地方写？

JS可以在HTML中的head标签内出现，也可以在body标签中出现，或是在body标签下面写，你也可以把它放在一个后缀为 .js 的文件中。最常见的是在body标签后 和 生成js文件后引入。

1.1 在body后面写js

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
</head>
<body>

</body>
{{--js--}}
<script>
    alert("yo man what's up");
</script>
</html>

1.2 外部引入

新生成一个js文件 在它的内部写你想写的js代码（这里我们就简单写写）：

alert("yo man what's up");

然后在页面中引用：

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
</head>
<body>

</body>
{{--js--}}
<script src="demo.js"></script>
</html>

 

2 输出功能

 js常用的输出数据的方法有四种：

  1. document.write：写入HTML文档中。
  2. window.alert：弹出一个警告窗口。
  3. console.log：写入到浏览器控制台中。
  4. innerHTML：写入到HTML元素中。

2.1 写入HTML文档

<script>
    document.write("<h1>hohoho</h1>");
    document.write(Date())
</script>

这仅仅是往HTML中写入内容，但是如果在页面已经加载完毕了在执行write的话 页面就会被覆盖。

2.2 警告窗

我们可以通过警告窗向用户展示错误信息或是别的，在开发中也可用于测试。

<script>
    window.alert("alert");
    alert(1 + 1);
</script>

2.3 写入浏览器控制台

<script>
    var number = 5 + 6;
    console.log("write to console:" + number)
</script>

这样我们就可以打开浏览器 在开发者工具中的console控制台看见这段话了。很合适调试测试时使用。

2.4 写入HTML元素

这是最常用的方法了，它可以改变HTML中元素的内容。

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
</head>
<body>
<p id="demo" onclick="showDate()">现在几点？</p>
</body>
{{--js--}}
<script>
    function showDate(){
        // 首先通过ID来查找元素 然后用innerHTML来修改内容。
        document.getElementById("demo").innerHTML = Date();
    }
</script>
</html>

 

posted @ 2017-09-04 15:54  Sky_sunkang  阅读(107)  评论(0)  编辑  收藏  举报