一、JavaScript的概念:是基于对象和事件的脚本语言

  1、特点:

    a)、安全性。

    b)、跨平台性(只要可以解释JS的浏览器就可以执行,和平台无关)  

  2、JavaScript与Java的区别:

    a)、JS是NetScape公司产品,Java是Oracle公司
    b)、JS是基于对象,Java是面向对象
    c)、JS只需解释就可以执行,Java需要先编译成字节码文件再执行
    d)、JS是弱类型,Java是强类型

  3、JavaScript与HTML的结合:

    a)、JS代码存放在标签<script>...</script>
    b)、使用script标签的src属性引入一个js文件(<script type="text/javascript" src="JS文件"></script>)

  4、<script>的存放位置:

    a)、HTML文件的<head>标签中

    b)、HTML文件中<body>标签中

二、JavaScript语法:

  1、变量通过关键字var来定义,弱类型不需要指定具体的数据类型(注意:JS中特殊常量值undefined,当变量没有初始化就被使用,该变量的的值就是undefined)
        var v;
        v = v + 5;
        alert(v);// 结果是NaN
  2、语句(与Java语句格式相同):逻辑运算符:&& ||
    if语句:
          注意:var x = 3;
            if(x==4)//可以进行比较运算
            if(x=4)//可以进行赋值运算,而且同样可以进行判断
            原因:在JS中0可以表示false,非0可以表示true(通常用1表示),因此if(x=4)结果为true   。非null为true,null为false
    switch语句:switch(x),其中x可以接收字符串
    循环语句(while\do...while\for)
    for(变量 in 对象){...}
  3、函数:
    一般函数:格式:function 函数名(形式参数...){...}
      注意:调用有参数的函数时,但没有给其传值,函数一样可以运行,或者调用没有参数的函数并给其传值,该函数一样可以运行。
         在函数中有一个参数数组对象(arguments),该对象将传递的参数都封装在一个数组中
         在函数中定义变量时没有使用var关键字,那么执行该函数后,此变量就成为一个全局变量
         函数在调用时的写法:
         var s = method();// s变量接收method函数的返回值
         var s = method;// s和method代表同一个函数,那么该函数也可以通过s()的方式调用
    匿名函数:格式:function(){...}  (或者说是直接将函数作为参数直接传递,不进行封装)
           例:var demo = function(){...}
           调用:demo();
  4、数组
    特点:长度是可变的,可以存任意元素(数组里存放的元素类型可以不同)
    定义格式:var arr = new Array();
         arr[0] = "hello";
         arr[1] = 1;
         arr[2] = true;

         输出:var arr = ["123", 23, true];

三、JavaScript语句示例:

  1、在<head>标签中编写:

 <!-- 鼠标单击显示按钮后弹出提示对话框,提示内容为:JavaScript示例 -->
<html>
<head>
<title>JavaScript示例</title>
<script type="text/javascript">
function test(){
alert("JavaScript示例");
}
</script>
</head> <body>
<input type="button" value="显示" onclick="test()">
</body>
</html>

  2、外部 .js 文件中编写

    a)、创建一个  .js 文件:如文件名为  testJavaScript.js 类容为:

function test(){
alert("JavaScript示例");
}

    b)、在<head>标签中利用<script>标签引入 testJavaScript.js文件,便可以达到与上例相同的结果。

 Transitional//EN">
<!-- 鼠标单击显示按钮后弹出提示对话框,提示内容为:JavaScript示例 -->
<html>
<head>
<title>JavaScript示例</title>
<script type="text/javascript" src="testJavaScript.js"></script>
</head> <body>
<input type="button" value="显示" onclick="test()">
</body>
</html>

四、DOM(document object model):文档对象模型

  1、DHTML:是多个技术的综合体,称为动态HTML
    HTML:将数据进行封装
    CSS:负责标签中数据的样式
    DOM:将标签封装成对象
    JS:将以上三者进行融合,通过程序来操作这些对象,完成动态效果

  2、节点:根据 DOM,HTML 文档中的每个成分都是一个节点。

  DOM 是这样规定的:

      • 整个文档是一个文档节点
      • 每个 HTML 标签是一个元素节点
      • 包含在 HTML 元素中的文本是文本节点
      • 每一个 HTML 属性是一个属性节点
      • 注释属于注释节点

    父级节点:parentNode
    子节点:childNodes
    兄弟节点:
      上一个兄弟节点:previousSibling
      下一个兄弟节点:nextSibling

五、JavaScript中的常见对象中

  1、Document对象:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document节点</title>
<script type="text/javascript">
function test(){
/* 将String类型的数据强转为number型
document.getElementsById返回的是一个具体的对象
*/
var sum= Number(document.getElementById("data1").value);
sum+= Number(document.getElementById("data2").value);
alert(sum);
}
function test1(){
/* 将String类型的数据强转为number型
document.getElementsByName返回的是一个数组对象
*/
var sum = document.getElementsByName("data1")[0].value;
sum -= document.getElementsByName("data2")[0].value;
alert(sum);
}
</script>
</head> <body>
数值一:<input type="text" id="data1" name ="data1" value="1"/>
数值二:<input type="text" id="data2" name ="data2" value="1"/>
<input type="button" onclick="test()" value="计算加" />
<input type="button" onclick="test1()" value="计算减" />
</body>
</html>
close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据。
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
open() 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。

  2、Date对象:

Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
 function test(){
var da = new Date(); /*返回当前日期和时间*/
alert(da.getDate()); /*返回一个月中的某天*/
alert(da.getDay()); /*返回一周中的某天*/
alert(da.getHours()); /*返回对象的小时数*/
};

4、JavaScript的更多相关文章

  1. 前端网络、JavaScript优化以及开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...

  2. JavaScript学习笔记(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  3. JavaScript学习总结(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  4. javascript实用技巧、javascript高级技巧

    字号+作者:H5之家 来源:H5之家 2016-10-31 11:00 我要评论( ) 三零网提供网络编程. JavaScript 的技术文章javascript实用技巧.javascript高级技巧 ...

  5. 新手理解HTML、CSS、javascript之间的关系

    http://www.cnblogs.com/dreamingbaobei/p/5062901.html 工作多年,一直忙忙碌碌的应用各种技术,现在不忙了,问问自己究竟在做什么,究竟会什么竟答不上来, ...

  6. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  7. Python之路-python(css、JavaScript)

    css JavaScript 一.CSS 分层: position: fixed;(固定到页面的具体位置) 例如:返回顶部 <!DOCTYPE html> <html lang=&q ...

  8. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. Css、javascript、dom(二)

    一.css常用标签及页面布局 1.常用标签 position(定位) z-index(定位多层顺序) background(背景) margin(外边距) padding(内边距) font-size ...

随机推荐

  1. 如何安装虚拟机VMware

    虚拟机可以帮我们在一台电脑上面来模拟出多台电脑,而且可以装不同的系统.下面就教大家怎么装VMware虚拟机 1.下载Vmware安装包,建议下载VMware10 这个有中文版的,其他版本的都是英文的哦 ...

  2. 使用VNET-to-VNET连接Microsoft Azure国际版和中国版

    Microsoft Azure的VNET-to-VNET功能可以实现跨虚拟网络的VPN连接,通过VNET-to-VNET互联的两个虚拟网络可以在同一个订阅下或者隶属不同的订阅,而且可以跨数据中心.这实 ...

  3. 《InsideUE4》-7-GamePlay架构(六)PlayerController和AIController

    PlayerController:你不懂,伴君如伴虎啊 AIController:上来,我自己动 引言 上文我们谈到了Component-Actor-Pawn-Controller的结构,追溯了ACo ...

  4. HTTP状态码302、303和307的故事

        今日读书,无法理解HTTP302.303.307状态码的来龙去脉,决定对其做深究并总结于本文.       <HTTP权威指南>第3章在讲解30X状态码时,完全没有讲清楚为什么要有 ...

  5. HTML ------ 关于表单 Form

    Form(表单)主要用于采集和提交用户输入的信息,是页面与WEB服务器交互过程中 最重要的信息来源. 掌握表单(Form)有以下几个要点: 重要form属性 form常用控件 form提交方式 § 重 ...

  6. BZOJ2748[HAOI2012]音量调节

    Description 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都要改变一次音量.在演出开始之前,他已经做好了一个列表,里面写着在每首歌开始之前他想要改 ...

  7. HTML5入门(---------------HTML——基本骨架--------------)

    HTML基础 一.HTML 超文本标记语言.英文全拼:HyperText Markup Language.负责网页的语义描述. 二.HTML基本骨架 <!DOCTYPE html> < ...

  8. VS一直停留在“正在还原nuget程序包”

    VS一直停留在“正在还原nuget程序包” 在开发何问起收藏夹的时候,准备在WinFrom中加入网页浏览器,于是下载了一个CEFSharp的源码,生成解决方案的时候,一直提示“正在还原nuget程序包 ...

  9. 验证LeetCode Surrounded Regions 包围区域的DFS方法

    在LeetCode中的Surrounded Regions 包围区域这道题中,我们发现用DFS方法中的最后一个条件必须是j > 1,如下面的红色字体所示,如果写成j > 0的话无法通过OJ ...

  10. 微信小程序之小豆瓣图书

    最近微信小程序被炒得很火热,本人也抱着试一试的态度下载了微信web开发者工具,开发工具比较简洁,功能相对比较少,个性化设置也没有.了解完开发工具之后,顺便看了一下小程序的官方开发文档,大概了解了小程序 ...