JavaScript简介

scralet-moon

于 2018-11-30 12:38:56 发布

阅读量138

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_43682329/article/details/84647114

版权

HTML 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

学习前端脚本语言javascript的基本概念、页面引入方式、获取页面元素及操作元素属性的技巧，学习函数的基本定义方法和使用方法。

前端三大块

1、HTML：页面结构 2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果 3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能

什么是JavaScript？

JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。

1. JavaScript 是一种客户端脚本语言（脚本语言是一种轻量级的编程语言）。 
2. JavaScript 通常被直接嵌入 HTML 页面。
3. JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。

特点：

1. 弱类型 
2. 基于对象。(因为面向对象需要具有封装、继承、多态的特征)
3. 安全
4. 兼容性

js使用方法： // js 默认以回车换行为一条语句结尾 // 项目上线之前会对代码进行压缩(压缩到一行)

<body>
    <!-- 内嵌式 
            在html文档中通过 script标签 来写我们的js代码

        外部引入
            通过script标签当中src属性引入外部文件
            注意使用外部引入的script标签内部  不能写js代码(不执行)

    -->
    <script>
        // 将信息输出到控制台 
        console.log('1');

        // js中定义函数的方式
        function a(){
            // 弹框
            alert('1');
        }
        //console.log()

    </script>
    <!-- 外部引入 -->

    <script src="./1.js">
        /*
         console.log('3');
        */

    </script>


    <!-- 行间事件 -->
    <!-- on 当....的时候  click 单击  当点击按钮调用a函数-->
    <button onclick=a()>点我输出弹1</button>
    <a href="javascript:alert(2)">点我弹2</a>


</body>

小例子：

<!DOCTYPE html>
<html>
<body>

<h1>胡建秋真帅</h1>

<p id="demo">我的胡建秋真帅</p>

<script>
document.getElementById("demo").innerHTML="我的JavaScript";
</script>

</body>
</html>


<!DOCTYPE html>
<html>
<body>

<h1>我的胡建秋真帅</h1>

<p id="demo">以上说的对</p>

<button type="button" onclick="myFunction()">按我</button>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
  {
  element.src="/i/eg_bulboff.gif";
  }
else
  {
  element.src="/i/eg_bulbon.gif";
  }
}
</script>

<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">

<p>点击灯泡来点亮或熄灭这盏灯</p>

</body>
</html>