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常用的输出数据的方法有四种：

document.write：写入HTML文档中。
window.alert：弹出一个警告窗口。
console.log：写入到浏览器控制台中。
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 初步认识的更多相关文章

python成长之路【第十五篇】：JavaScript初步认识
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...
Javascript——初步
1.基本概念 Javascript是一门脚本语言,它是一门解释性的语言.网页和用户之间实时.动态的进行交互. 2.特点简单性:没有严格的数据类型.语句简单而紧凑. 安全性:仅仅能通过浏览器实现浏览和 ...
HTML 5 JavaScript初步编译运行.doc
编译运行解释运行 JavaScript:只有一种变量类型,var.数据类型:整型,小数,字符串,布尔型 1.如何把数值型字符串变成数字型: parseInt("字符串")——把字 ...
javascript初步了解
0.1 <script> 和 </script> 会告诉 JavaScript 在何处开始和结束. <script> 和 </script> 之间的 ...
JavaScript初步
隐式转换其他类型转换成布尔类型: undefined --> false null --> false 0或者0.0或者NaN --> false 字符串长度为0 --> f ...
JavaScript初步学习----基本使用，简单事件，修改样式，数据类型
JavaScript基本使用 JavaScript原名叫livescript,是一门动态类型,弱类型基于原型的脚本语言用于页面特效,前后交替,后台开发(node) JavaScript写在s ...
JavaScript基于对象编程
js面向对象特征介绍 javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDirven)并具有安全性能的脚本语言.它具有面向对象语言所特有的各 ...
Python基础+Pythonweb+Python扩展+Python选修四大专题超强麦子学院Python35G视频教程
[保持在百度网盘中的, 可以在观看,嘿嘿内容有点多,要想下载, 回复后就可以查看下载地址,资源收集不易,请好好珍惜] 下载地址:http://www.fu83.cc/ 感觉文章好,可以小手一抖 -- ...
div模拟selection标签下拉列表
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

MongoDB mongoimport 报错：lost connection to server
MongoDB对单次处理有大小限制,所以导入大文件会出问题. mongoimport 默认10000条为一批导入,但如果单条数据过大,就会导致单次处理数据超过大小限制. 参数 --batchSize ...
2017.11.15 hashmap的工作原理
参考来自:http://blog.csdn.net/jeffleo/article/details/54946424 一 hashMap的基本概念 1.HashMap的定义 public class ...
学习ajax总结
之前公司的ajax学习分享,做一点总结,加深记忆什么是ajax? 异步的的js和xml,用js异步形式操作xml,工作主要是数据交互借阅用户操作时间,减少数据请求,可以无刷新请求数据创建一个对象 ...
Windows右击无新建文本文档怎么办
右击无新建文本文档2008-07-26 16:51 刚在网上找的,在运行项输入notepad,把下面的复制进去,然后保存为123.reg,双击导入. REGEDIT4 [HKEY_CLASSES_RO ...
css - 公众号样式
/* * @Author: WJ_LONG * @Date: 2018-09-06 15:32:06 * @Last Modified by: WJ_LONG * @Last Modified tim ...
Windows利用命令行快速清除以及建立密码
我们Win10一般是没有管理员权限的!这就要求我们获取管理员权限了,一般有两种方法获取,我就介绍下面一种最简单的老操作:WIn+R打开本窗口,输入:taskmgr 建立密码(administrato ...
Request.Cookies使用方法分析
本文章介绍了Request.Cookies的基本的语法和使用方法. 而且通过演示样例分析了Request.Cookies的使用过程. Request.Cookies方法能够检索Cookies 集合中的 ...
C++中string.find()函数与string::npos
先说说string::npos参数: npos 是一个常数,用来表示不存在的位置,类型一般是std::container_type::size_type 许多容器都提供这个东西.取值由实现决定,一般是 ...
struts2 接口如何接收客户端提交的json数据
struts2 接口如何接收客户端提交的json数据 CreationTime--2018年6月20日15点54分 Author:Marydon 1.情景还原使用struts2写的接口(服务端) ...
git merge rebase的区别及应用场景
前两天和同事交流发现他在日常开发中跟上游保持同步每次都是用git pull操作,而我一直习惯git fetch然后rebase,发现这两种操作后的log是有些区别的.他每次pull操作之后都会自动生成 ...