首先呢 要成为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>

JavaScript 初步认识的更多相关文章

  1. python成长之路【第十五篇】：JavaScript初步认识

    JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...

  2. Javascript——初步

    1.基本概念 Javascript是一门脚本语言,它是一门解释性的语言.网页和用户之间实时.动态的进行交互. 2.特点 简单性:没有严格的数据类型.语句简单而紧凑. 安全性:仅仅能通过浏览器实现浏览和 ...

  3. HTML 5 JavaScript初步 编译运行.doc

    编译运行 解释运行 JavaScript:只有一种变量类型,var.数据类型:整型,小数,字符串,布尔型 1.如何把数值型字符串变成数字型: parseInt("字符串")——把字 ...

  4. javascript初步了解

    0.1   <script> 和 </script> 会告诉 JavaScript 在何处开始和结束. <script> 和 </script> 之间的 ...

  5. JavaScript初步

    隐式转换 其他类型转换成布尔类型: undefined --> false null --> false 0或者0.0或者NaN --> false 字符串长度为0 --> f ...

  6. JavaScript初步学习----基本使用，简单事件，修改样式，数据类型

    JavaScript基本使用 JavaScript原名叫livescript,是一门动态类型,弱类型基于原型的脚本语言   用于页面特效,前后交替,后台开发(node)   JavaScript写在s ...

  7. JavaScript基于对象编程

    js面向对象特征介绍 javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDirven)并具有安全性能的脚本语言.它具有面向对象语言所特有的各 ...

  8. Python基础+Pythonweb+Python扩展+Python选修四大专题 超强麦子学院Python35G视频教程

    [保持在百度网盘中的, 可以在观看,嘿嘿 内容有点多,要想下载, 回复后就可以查看下载地址,资源收集不易,请好好珍惜] 下载地址:http://www.fu83.cc/ 感觉文章好,可以小手一抖 -- ...

  9. div模拟selection标签 下拉列表

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何查看错误代码

    一般模块出错会在Error中显示为TRUE,同时ErrorID中会有一个错误代码,下图所示就是出错之后的效果   在变量表中也可以看到,右击转成16进制查看   由于是NC模块出错,所以可以再NC的E ...

  2. JAVA 的IO操作实例

    实例要求: 1,加法操作: 键盘输入两个数字,完成加法操作.因为从键盘接收过来的内容都是通过字符串形式存放的,所以此时直接通过包装类 Integer将字符串变为基本数据类型. 2,菜单显示: 采用的知 ...

  3. Redis 配置文件及命令详解

    ==基本配置 daemonize no 是否以后台进程启动 databases 16 创建database的数量(默认选中的是database 0) save 900 1 #刷新快照到硬盘中,必须满足 ...

  4. @using (Html.BeginForm()) @using (Ajax.BeginForm(new AjaxOptions() { })) 区别

    @using (Html.BeginForm()) 返回页面 也是页面 都是返回页面 只是 多了一个 data-ajax="true"

  5. Log4Net 最最最基本的应用。作为个人记录

    本文只记录了将日志按照日期记录到文件中的方法. 注:1.如果将该方法封装在类库中,在引用类库的项目中添加配置文件. 2.如果程序为控制台程序.winfrom程序,需将配置文件存放在/bin/debug ...

  6. Redis之最大内存置换策略

    0.前言 Redis默认最大内存大小是应用程序可访问的内存大小, 32位windows下是2GB, linux下是3GB. 64位下可以访问的内存为2^64字节, Redis提供了maxmemory字 ...

  7. 如何将webbrowser控件的Cookie倒入CookieContainer供WebRequest使用

    先建一个 "CookieContainer "   把WebBrowser中的Cookie保存在里面                       //在WebBrowser中登录 ...

  8. Qt 推断一个IP地址是否有效

    QHostAddress test; if (!test.setAddress("111.111.111.1")) { ui->statusBar->showMessa ...

  9. Codeforces Round #277 (Div. 2)---A. Calculating Function （规律）

    Calculating Function time limit per test 1 second memory limit per test 256 megabytes input standard ...

  10. C++语言基础(10)-虚继承

    一.产生背景 先看下列一份代码: //间接基类A class A{ protected: int m_a; }; //直接基类B class B: public A{ protected: int m ...