为何学习?

1. 所有主流浏览器都支持JavaScript。

2. 目前,全世界大部分网页都使用JavaScript。

3. 它可以让网页呈现各种动态效果。

4. 做为一个Web开发师,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。

易学性

1.学习环境无外不在,只要有文本编辑器,就能编写JavaScript程序。

2.我们可以用简单命令,完成一些基本操作。

从哪开始学习呢?

学习JavaScript的起点就是处理网页,所以先学习基础语法和如何使用DOM进行简单操作。

如何写入JS代码?

使用<script>标签在HTML网页中插入JavaScript代码。

注意, <script>标签要成对出现,并把JavaScript代码写在<script></script>之间。

引用JS外部文件

我们知道使用<script>标签在HTML文件中添加JavaScript代码,如图:

JavaScript代码只能写在HTML文件中吗?当然不是,我们可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js,然后将JS代码直接写在JS文件中。

注意:在JS文件中,不需要<script>标签,直接编写JavaScript代码就可以了。

JS文件不能直接运行,需嵌入到HTML文件中执行,我们需在HTML中添加如下代码,就可将JS文件嵌入HTML文件中。

<script src="script.js"></script>

<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。

例如:

运行结果为:

JS在页面中的位置

我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分。
放在<head>部分
最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分。
放在<body>部分
JavaScript代码在网页读取到该语句的时候就会执行。

注意: javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置css等);而如果是通过事件调用执行的function那么对位置没什么要求的。

例如:

运行结果为:

认识语句和符号

JavaScript语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。

每一句JavaScript代码格式: 语句;

先来看看下面代码

<script type="text/javascript">
alert("hello!");
</script>

例子中的alert("hello!");就是一个JavaScript语句。

一行的结束就被认定为语句的结束,通常在结尾加上一个分号";"来表示语句的结束。

看看下面这段代码,有三条语句,每句结束后都有";",按顺序执行语句。

<script type="text/javascript">
document.write("I");
document.write("love");
document.write("JavaScript");
</script>

注意:

1. “;”分号要在英文状态下输入,同样,JS中的代码和符号都要在英文状态下输入。

2. 虽然分号“;”也可以不写,但我们要养成编程的好习惯,记得在语句末尾写上分号。

注释很重要

注释的作用是提高代码的可读性,帮助自己和别人阅读和理解你所编写的JavaScript代码,注释的内容不会在网页中显示。注释可分为单行注释与多行注释两种。

我们为了方便阅读,注释内容一般放到需要解释语句的结尾处或周围。

单行注释,在注释内容前加符号 “//”。

<script type="text/javascript">
document.write("单行注释使用'//'"); // 我是注释,该语句功能在网页中输出内容
</script>

多行注释以"/*"开始,以"*/"结束。

<script type="text/javascript">
document.write("多行注释使用/*注释内容*/");
/*
多行注释
养成书写注释的良好习惯
*/
</script>

开始JavaScript的学习了的更多相关文章

  1. 正则表达式(javascript)学习总结

    正则表达式在jquery.linux等随处可见,已经无孔不入.因此有必要对这个工具认真的学习一番.本着认真.严谨的态度,这次总结我花了近一个月的时间.但本文无任何创新之处,属一般性学习总结. 一.思考 ...

  2. 大量Javascript/JQuery学习教程电子书合集

    [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  3. [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  4. JavaScript 基础学习1-day14

    JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...

  5. JavaScript正则表达式学习笔记(二) - 打怪升级

    本文接上篇,基础部分相对薄弱的同学请移步<JavaScript正则表达式学习笔记(一) - 理论基础>.上文介绍了8种JavaScript正则表达式的属性,本文还会追加介绍几种JavaSc ...

  6. 初步总结javascript中学习DOM之前的知识

    嘿嘿,又到了周末时间,周六其实就是总结这周的学习的,记得周二周三刚开始接触javascript时间,还是不知道怎么学习的,就感觉找不到方向,那时间学习的只是总结了一些简单的定义或者是学习结构,今天就把 ...

  7. JavaScript紧凑学习

    JavaScript紧凑学习 windows本地,调用命令行: win键+R 键入cmd , (cmd是Command 命令行 简称) 目录是C盘下的 C:\Users\Administrator&g ...

  8. javascript正则表达式 - 学习笔记

    JavaScript 正则表达式 学习笔记 标签(空格分隔): 基础 JavaScript 正则表达式是用于匹配字符串中字符组合的模式.在javascript中,正则表达式也是对象.这些模式被用于Re ...

  9. JavaScript Shell学习分享

    目录 JavaScript Shell学习分享 简介 安装 使用原因 小结 JavaScript Shell学习分享 简介 JavaScript Shell是由Mozilla提供的综合JavaScri ...

  10. JavaScript简易学习笔记

    学习地址:http://www.w3school.com.cn/js/index.asp 文字版: https://github.com/songzhenhua/github/blob/master/ ...

随机推荐

  1. Delphi 10.3.2来了!

    昨晚,官方正式发布了Delphi 10.3.2,增加对Mac 64应用的开发,支持Linux桌面开发,这个是通过集成fmxlinux实现的,同时修正400个bug,编译器,102个ide,84个fmx ...

  2. kbmMW均衡负载与容灾(1)

    kbmMW为均衡负载与容灾提供了很好的机制,支持多种实现方式,现在看看最简单的一种,客户端控制的容灾和简单的负载均衡. 现在,我们将kbmMWServer部署到不同的服务器,或者在同一服务器部署多份实 ...

  3. Python map学习笔记

    map是一个高阶用法,字面意义是映射,它的作用就是把一个数据结构映射成另外一种数据结构. map用法比较绕,最好是对基础数据结构很熟悉了再使用,比如列表,字典,序列化这些. map的基本语法如下: m ...

  4. DA_06_iptables 与 firewalld 防火墙

    8.1 防火墙管理工具 防火墙作为公网与内网之间的保护屏障,在保障数据的安全性方面起着至关重要的作用.主要功能都是依据策略对穿越防火墙自身的流量进行过滤.防火墙策略可以基于 流量的源目地址.端口号.协 ...

  5. Nginx负载均衡和HTTPS配置及集群搭建

    Nginx的高可用(HA)配置 1.高可用配置结构(画图说明) 2.KeepAlived的安装和配置 1.安装 yum install keepalived 2.keepalived.conf配置文件 ...

  6. Ubuntu 18.04 手动升级内核

    一般情况下,系统正常更新,会自动升级内核到可用的最新版. 查看已安装的内核 $ sudo dpkg -l | grep linux-image 查看当前使用的内核 $ sudo uname -r 查看 ...

  7. JavaScript入门学习之二——函数

    在前一章中讲了JavaScript的入门语法,在这一章要看看函数的使用. 函数的定义 JavaScript中的函数和Python中的非常类似,只不过定义的方式有些不同,下面看看是怎么定义的 //定义普 ...

  8. 集合(五) TreeMap

    4.TreeMap SortedMap接口继承Map接口,是排序键值对的接口,实现排序的的方法是Comparator.而NavigableMap接口继承于SortedMap,新增了一些导航方法.而Tr ...

  9. 浮动float和清除clear

    一.浮动(float) float简介 取值:left,right,none,inherit,默认none(不浮动) 可应用与所有元素 没有继承性 不在正常流中,但会影响布局.因为一个元素浮动时,其他 ...

  10. 基于LVM 测试磁盘写性能.md

    准备工作 /dev/sdb 创建一个卷组,基于卷组创建5个逻辑卷,各100G 在10.10.88.214 新建5台虚拟机,每台虚拟机用到lvm建的逻辑卷 dd 压测 在每台虚拟机上执行dd 命令: d ...