首先呢 要成为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. 【Cocos2d-x 3.0 基础系列一】 各类回调函数写法汇总

    一.button回调 1. Lambda 表达式,C++11 Lambda 赋予了Cocos2d-x 3.0创建回调函数的灵活性. auto itemNor = Sprite::create(&quo ...

  2. angularJS 中的two-way data binding.

    原文: https://stackoverflow.com/questions/11616636/how-to-do-two-way-filtering-in-angularjs ---------- ...

  3. 蓝鲸安装Agent

    1. APPO 所在机器(在 app 运行所在机器) 必须能通过 ssh 登陆到 Agent 机器2. Agent 所在机器可以访问到 zk 的端口3. 支持 Linux/Windows/AIX 操作 ...

  4. riched32.dll riched20.dll msftedit.dll 解析

    摘要: 本文对Rich Edit控件底层消息机制进行了讲解,以期读者对Windows平台下的Rich Edit控件有一个更深入的认识,同时对于使用Win32 SDK进行开发的人员具有一定参考价值.因为 ...

  5. Unity iOS打开AppStore评星页面,浅谈Application.OpenURL()方法。

    http://fairwoodgame.com/blog/?p=38 Unity iOS打开AppStore评星页面,浅谈Application.OpenURL()方法. Posted in  Uni ...

  6. 【BIEE】18_时间序列函数的使用

    三个时间序列函数 AGO: 实现同环比 TO DATE:实现累计指标,如MTD月累计.YTD年累计 Period Rolling:当前时间的x个时间单位开始到y个时间单位结束这一时段内的度量总和 BI ...

  7. 获取取并下载tuku的漫画的爬虫

    代码地址如下:http://www.demodashi.com/demo/12842.html 概述 一个简单的爬虫,实现是爬取tuku网站的漫画.并下载到脚本的文件夹中,下载的漫画按照章节名放在各自 ...

  8. mybatis+oracle的批量插入

    // 批量插入,手动控制事务 SqlSession batchSqlSession = null; try { batchSqlSession = sqlSessionTemplate.getSqlS ...

  9. Oracle undo 表空间管理 (摘DAVID)

    Oracle 的Undo有两种方式: 一是使用undo 表空间,二是使用回滚段. 我们通过 undo_management 参数来控制使用哪种方式,如果设为auto,就使用UNDO 表空间,这时必须要 ...

  10. 集成ueditor工具

    摘要: 摘要: 版权声明:本文为博主原创文章,未经博主允许不得转载. UEditor 是百度的一套开源的在线HTML编辑器. 第一步:去官网看官网文档,了解这个工具如何使用以及下载,本人下载的是1.4 ...