写在前面

本文是对 javascript 的部分说明和提点,不展开特别全面的论述 ,所以 需要 参考文档 (点击这儿下载)的帮助

本文主要讲述javascript的语法与HMTL结合的方法 , 第二篇讲述javascript对象(包含javascript基本对象、bom对象和dom对象)、第三篇幅附上 javascript案例(包括与HMTL表单的验证案例、动态时间案例、下拉列表左右选择、鼠标点击效果、省市联动等)[链接点不动,说明文章还没有写]

javascript不同于java等语言,出现错误也很少提示,所以应该书写认真。

一、javascript(js)是什么


是基于对象和事件驱动的语言,
- 基于对象:提供很对对象,直接拿来用,像String对象,可以直接拿来使用其中的一些方法,如字符串分割等
- 事件驱动: 网页动态效果
- 客户端: 浏览器中

javascript和java没有任何关系,就像 雷锋和雷峰塔,只是名字一样而已。

javascript 的组成:
- ECMAScript : ECMA 组织机构 规定的 js语法
- BOM : (broswer object model )浏览器对象模型
- DOM : (document object model)文档对象模型

二、javascript 与 HTML 的结合


第一种方法:

在HTML网页中 用 <script></script> 直接编写js代码

<html ><head></head><body>HTML 代码</body><script type="text/javascript"> js代码        </script>
</html>

第二种方法:

在外部创建一个.js 的文件,里面直接编写js 代码 。 HTML网页直接用<script></script> 将 .js文件引进来

<html ><head></head><body>HTML 代码</body><script type="text/javascript" src="此处是 .js 文件的路径">     </script>
</html>

NOTE : <script></script> 可以放在HTML 中的任意位置,如放在<head> 中, <body> 中 ,但是最好放在 </body> 的后面,因为HMTL是从上向下解析,如果 js 代码放在前面,可能 某些需求会变的难以实现 。
另外,<script></script> 中的type="text/javascript" 属性对于现代浏览器来说可以省略。

三、javascript 语法简单说明

该语法详细部分请参考 W3S 手册

文中该语法部分在W3CSchool 参考文档中的 正文标题javascript—–课程表——javascript——–js教程 部分


(一)、原始类型 和 声明变量

无论声明何种类型,全部都用关键字 var
五种原始类型;
- String : var str = " abc " ;
- number :var n = 123.25 / 123 / 123e5 ;
- boolean :var flag = true / false
- null : var a = null ;
- undifined :var aa ;

可以用 new 对象来声明变量,如 :var n = new Num() ;var date = new Date () ;

(二)、三大语句

以下语句在javascript中同样适用:

if...else..
if ...else if ...else...
for (){...........}
while(){.........}
do{.......}while()
switch(a) {       //a可以是字符串,区别于java,不过java中jdk1.7 开始支持了case 1:break;case 1:break;default:......}

(三)、运算符

不做太多详述,查 W3S 手册 , 这里只做几点不同的说明:
- javascript中不区分整数和小数,比如: 123 / 1000 的结果是0.123, 而不是0 。
- 字符串在相加时,是做字符串的链接 ; 相减时是做运算 。 比如 : var str =" 123 " , str+1 的结果是 1231 , 而 str-1的结果是 122 。
- == 比较的是值,===比较的是值和类型

(四)、数组

数组的定义:
- var arr = [1,"hello",true]var arr = [1,"hello",true]
- 使用Array对象(后面详述) var arr1 = new Array(5); arr1[0] = "1";
- 使用Array对象(后面详述) var arr2 = new Array(3,4,5);

需要说明的是 数组可以存放不同类型的数据

(五)、函数

关键字 function :
- function 方法名(参数值) { 方法体 }
- 匿名函数fuction (参数值) { 方法体 }(通常只用一次,不希望再被调用,有些大型项目,给方法起名字确实是个头疼活)
- 动态函数(用的很少) var add = new Function("参数列表","方法体和返回值");

javascript中的函数通常是作为HMTL的事件驱动函数,在HTML网页中定义一个按钮,触发的函数就写在javascript中: 比较典型的用法:

<html><head></head><body>//定义一个按钮<button onclick="myFunction()" >点击这里</buttion></body><script type="text/javascript">//定义事件函数function myFunction(){alert("Hello World");//弹出对话框}</script>
</html>

NOTE: javascript中没有函数重载, 如果有多个函数重载了,那么只执行最后一个函数。 其他不执行的重载函数的参数值在传递过程中保存到arguments 数组中。 如果有必要,可以直接对 arguments数组进行长度(参数个数)判断,定位是那个重载函数,然后进行取数组值等操作。

(六)、注释

同java ; 单行 用 //; 多行用 /*.....*/

(七)全局变量和局部变量

  • 全局变量: 在<script></script>内定义的变量,在什么地方都可以使用,甚至在另一个<script></script>中也可以使用

  • 局部变量:只能在局部使用,如: 方法函数中定义的变量,只能在函数体中使用。

在IE8以上版本中,按F12 , 能看到关于变量作用域的提示的错误,算是一个调试工具吧 。
如:提示如下错误

-SCRIPT5009:  “aa”未定义
15-js的局部变量.html, 行20 字符3

(八)、几个全局函数说明

这儿有几个函数,由于不属于任何的一个对象(开始说过,js是基于对象的,依托对象,js会用很多丰富的函数使用),这些函数直接写名字,不需要写成对象名.函数名()的形式。 (关于其他重要丰富函数,将会在javascript对象 中说明)

  • eval ( ) : 执行js代码
var str="alert('aaaa') ;
eval (str);   // 弹出框,内容是aaaa。 而非 alert( 'aaaa' );
  • encodeURI() :对字符进行编码 ; decodeURI() :对字符进行解码
//编码
var str1 = "中文aaa46";
var encode = encodeURI(str1);
document.write(encode); //输出 %E4%B8%AD%E6%96%87aaa46
//解码
var decode1 = decodeURI(encode);
document.write(decode1);  //输出 中文aaa46
  • isNaN() : 判断当前字符串是否是数字

    如果是数字,返回false ;如果不是数字,返回true

  • parseInt():类型转换,转换成int类型

javascript 学习指南--语法相关推荐

  1. 最棒的 JavaScript 学习指南

    在过去的一年间(2017年),我们对比了近24000篇 JavaScript 文章,并从中挑选出了最好的55篇.我们做了这个目录,认为阅读有经验的程序员写的文章是一个很好的学习方式.在学习了一两门课程 ...

  2. C/C++学习指南(语法篇) - 邵发

    C/C++学习指南(语法篇),清华大学出出版,作者:邵发 ,ISBN: 9787302419891,一部C/C++基础语法教材,配套100集视频讲解,在线题库.官网:阿发你好 本书简介 一部C/C++ ...

  3. javascript学习指南——先导片

    javascript学习: - 带有src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的JavaScript代码,如果 ...

  4. 菜鸟网html dom对象,JavaScript学习指南

    1.1 JavaScript基础概念: JavaScript (ECMAScript) :JavaScript 是脚本语言.JavaScript和ECMAScript通常被人用来表达相同的含义,但是J ...

  5. javascript学习指南,这个车架号是什么车?通过车架号查车辆信息!

    <span class="sectionHeading">A Heading</span> <br /> <br /> Lorem ...

  6. JavaScript 权威指南-学习笔记(一)

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! JavaScript 权威指南-学习笔记 ...

  7. 【JavaScript权威指南(第七版)】之阅读学习总结

    写在前面 最近借着空闲时间断断续续两个月看完了<JavaScript权威指南(第七版)>,<JavaScript权威指南>一直以来被称为"犀牛书",前面的第 ...

  8. Javascript权威指南学习笔记一:数据类型

    决定从最基础的开始学JavaScript,最近看了<<Javascript权威指南>>第3章,记些笔记备忘. 本章一个重点是类型.按我的理解应该如下表所示: 复合类型中,关联数 ...

  9. JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】

    w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...

  10. javascript立体学习指南

    javascript立体学习指南 第一章:首先了解javascript 首先,什么是javascript? JavaStrip出生于1995年,是一种文本脚本语言,成都装修公司是一种动态的.弱类型的. ...

最新文章

  1. 从BloomFilter到Counter BloomFilter
  2. 关于C#调用非托管DLL,报“内存已损坏的”坑,坑,坑
  3. 如何运用NLP向个性类型客户介绍产品
  4. js对html进行转义和反转义的操作
  5. asp.net ajax中文乱码的解决?2010-01-19 12:06
  6. Nginx使用upstream实现动静分离
  7. Spinner 学习笔记
  8. Java架构-每秒上千订单场景下的分布式锁高并发优化实践!
  9. python调用matlab函数_python调用matlab的m自定义函数方法
  10. linux运维工程师做些什么-肤浅篇
  11. 快速实现对接京东EDI系统
  12. 【STP】生成树协议及STP 802.1D (上)
  13. linux系统开启ntp服务器配置,Linux系统 NTP服务器配置详解
  14. 功率是电压电流乘积的波形在一个周期内积分后除以周期。
  15. 圆角矩形大小怎么调整html,html圆角矩形
  16. PyQt4转PyQt5心得
  17. Web前端之响应式 Gulp 中文网
  18. 复杂网络的任意子节点的网络最短距离
  19. js 事件绑定传入自定义参数
  20. form表单与ajax的两种提交方式

热门文章

  1. 群晖nas存储系统原理_为群晖 NAS 加上 SSD 缓存,享受高速带来的酸爽吧!
  2. 计算机系统建模与仿真论文,《系统建模与仿真》课程论文.pdf
  3. php做抖音在微信中播放,微信小程序实现抖音播放效果的实例代码
  4. 一小时做出Java实战项目——飞翔的小鸟
  5. Lanproxy任意文件读取漏洞复现(CVE-2021-3019)
  6. 计算机的基本组成及工作原理
  7. 大数据毕设/课设 - 基于大数据的可视化分析模板
  8. java实现人脸识别(附源码)
  9. 凤凰os linux双系统,逍遥安卓模拟器双系统无缝连接完胜Remix、凤凰OS
  10. java 汉字按照拼音排序