首页 > 编程语言 > 详细

JavaScript入门

时间:2020-05-06 00:40:56      阅读:68      评论:0      收藏:0      [点我收藏+]

JavaScript概述

什么是javascript: JavaScript一种直译式脚本语言

什么是脚本语言?

? java源代码 ----> 编译成.class文件 -----> java虚拟机中才能执行
? 脚本语言: 源码 -------- > 解释执行
? js由我们的浏览器来解释执行

HTML: 决定了页面的框架
CSS: 用来美化我们的页面
JS: 提供用户的交互的

JS的组成

ECMAScript : 核心部分 ,定义js的语法规范
DOM: document Object Model 文档对象模型 , 主要是用来管理页面的
BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高

JS的语法

变量弱类型: var i = true
区分大小写
语句结束之后的分号可以有,也可以没有
写在script标签内

JS的数据类型

  • 基本类型
    • string
    • number
    • boolean
    • undefine
    • null
  • 引用类型
    • 对象, 内置对象
  • 类型转换
    • js内部自动转换

JS的运算符和语句

  • 运算符和java一样
    • "===" 全等号: 值和类型都必须相等
    • "==" 值相等就可以了
  • 语句和java 一样

JS的输出

  • alert() 直接弹框

  • document.write() 向页面输出

  • console.log() 向控制台输出

  • innerHTML: 向页面输出

  • 获取页面元素: document.getElementById("id的名称");

JS声明变量

? var 变量的名称 = 变量的值

JS声明函数

? var 函数的名称 = function(){

? }
或者?

? function 函数的名称(){

? }

JS的开发步骤

  1. 确定事件
  2. 通常事件都会出发一个函数
  3. 函数里面通常都会去操作页面元素,做一些交互动作

点击按钮跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

        function f() {
            alert("123");
        }
    </script>

</head>
<body>

    <input type="button" value="点我" onclick="f()">


</body>
</html>

技术分享图片

点击按钮替换文字

技术分享图片

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

        function f() {
            // alert("123");
            var div = document.getElementById("div1");
            // div.innerText = "<font color = red>那里</font>";
            div.innerHTML = "<font color = red>那里</font>";
        }
    </script>

</head>
<body>

<input type="button" value="点我" onclick="f()">
<div id="div1">
    这里
</div>

</body>
</html>

// div.innerText = "那里";
innerText是以纯文本的形式打印,不会转义特殊标签字符,结果如下图

技术分享图片

JavaScript入门

原文:https://www.cnblogs.com/zllk/p/12833738.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!