码迷,mamicode.com
首页 > 编程语言 > 详细

01.JavaScript简介

时间:2015-10-11 15:19:21      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:

学习JavaScript之前,确定你已经有了HTML、CSS基础。

 

JavaScript能做什么?

1、动态改变页面内容(典型Angular)

2、通过修改CSS样式,动态改变网页的外观

3、验证表单数据

4、响应事件

 

JavaScript编辑工具(编辑器):

记事本(不多说,你懂的~可以进行简单修改)、Visual Studio、Dreamweaver、SublimeText、Notepad++、WebStorm...

 

JavaScript在HTML的引用共有4种:

  • (1)页头引入(head标签内);
  • (2)页中引入(body标签内);
  • (3)元素事件中引入(标签属性中引入);
  • (4)引入外部JS文件;

这四种方式都非常常用,一定要掌握掌握再掌握,并理解其含义。尤其是加载先后顺序的问题。

一、页头引入JS

在页头引入JS,指的就是在<head></head>标签内编写JavaScript。

 1  <html>
 2  <head>
 3      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 4      <title></title>
 5      <script type="text/javascript">
 6          //这里编写JavaScript程序
 7        document.write(JavaScript入门教程);
 8      </script>
 9  </head>
10  <body>
11  </body>
12  </html>

<script type="text/javascript">……</script>格式是固定的,JavaScript代码必须在<script></script>标签内编写,并且必须设置type属性值为“text/javascript”。

和<style type="text/css"></style>类似。

document.write(‘...‘);在页面输出某一内容,很常用哦!

二、页中引入JS

在页中引入JS,指的就是在<body></body>标签内编写JavaScript。

 1  <html>
 2  <head>
 3      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 4      <title></title>
 5  </head>
 6  <body>
 7      <script type="text/javascript">
 8          //这里编写JavaScript程序
 9         document.write(JavaScript);
10      </script>
11  </body>
12  </html>

 

三、元素事件中引入JS

在元素事件中引入JS,就是指在元素的某一个属性中直接编写JavaScript程序或调用JavaScript函数,这个属性指的是元素的“事件属性”。

1  <html>
2  <head>
3       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4      <title></title>
5  </head>
6  <body>
7      <input type="button" onclick="alert(‘JavaScript入门‘);" value="按钮"/>
8  </body>
9  </html>

 

元素事件属性调用JavaScript函数:

 1  <html>
 2  <head>
 3  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 4  <title></title>
 5  </head>
 6  <body>
 7      <script type="text/javascript">
 8          function myFunction () {
 9              alert(JavaScript入门);
10          }
11      </script>
12      <input type="button" onclick="myFunction()" value="点我弹窗" />
13 </body>
14 </html> 

 

四、引入外部JS文件

引入外部JS文件,说白了就是把JavaScript程序存放在一个后缀名为.js的文件中,然后使用script标签来引用。此外,引用外部JS文件的script标签可以放在head标签内,也可以放在body标签中。

 

1 <script type="text/javascript" src="js/index.js"></script>

 

 简单训练题:

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
 4 <title></title>
 5 <script type="text/javascript">
 6 function enterMessages() {
 7     alert(welcome);
 8 }
 9 
10 window.onload = enterMessages();
11 </script>
12 </head>
13 <body></body>
14 </html>

 

对JavaScript的解释:

  尽管JavaScript是一门比较容易入门的语言,一些非程序人员都可以很容易使用JavaScript进行编程。但是JavaScript却是一门具有非常丰富特性的语言,它有着和其他编程语言一样的复杂性,或更复杂。实际上,编写一些复杂的JavaScript程序,就需要对JavaScript有扎实的理解。

  之前看过一些现象,发现不少人(零基础或有基础的),会直接跳过基础阶段的学习(字符串对象、数组对象等),直接学习JavaScript的事件模型了,并立刻着手各种事件特效的操作。其实这个方法也行,不过还是不太推荐。对于一个真正想做前端工程师的人来说,基础知识不过关是绝对不可行的。

  学习JavaScript,不要以为你会做一两个如图片切换、tabs选项卡这样特效(当然你要先会做...),就以为自己对JavaScript精通了。JavaScript的用途不仅仅是用来做一两个特效,更大的用途是用来开发各种应用的。

  举个很简单的例子,例如在线代码测试工具、在线调色板、JSON在线解析等等,这些工具很多都是使用JavaScript开发出来的。不过,这些工具如果只用JavaScript事件特效,外加简简单单的编程基础知识是做不出来的。

01.JavaScript简介

标签:

原文地址:http://www.cnblogs.com/lqcdsns/p/4869155.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!