JavaScript介绍

  •   JavaScript跟java没半毛钱关系
  •   JavaScript有三部分组成:ECMAScript,document object model,broswer object model
  •   两种引入方式,直接在body后<script></script>或者文件导入<script src=""></script>

JavaScript基础知识

  变量

     var iMyValue = 0, sMystring = "gaga"

  •     关键字var,表示声明一个局部变量,没有则是全局。
  •     区分大小写
  •     命名规则大致一样,推荐匈牙利类型。前一个是类型后面是驼峰。

    

  关键字

    

  数据类型

 整数:
           在JavaScript中10进制的整数由数字的序列组成
           精确表达的范围是
-9007199254740992 (-253) 到 9007199254740992 (253)
           超出范围的整数,精确度将受影响
  浮点数:
           使用小数点记录数据
           例如:3.4,5.6
           使用指数记录数据
           例如:4.3e23 = 4.3 x 1023

16进制和8进制数的表达
           16进制数据前面加上0x,八进制前面加0
           16进制数是由0-9,A-F等16个字符组成
           8进制数由0-7等8个数字组成
           16进制和8进制与2进制的换算

  字符串

     <script> var str="\u4f60\u597d\n欢迎来到\"JavaScript世界\"";

       alert(str);

     </script>

    常用的转义字符 \n:换行 \':单引号 \":双引号 \\:右划线

  布尔型

    仅有两个值:true或者false。也等于用1和0表示。

  null和undefined

  •     undefined类型只有一个值,就是undefined。当变量未定义或者函数无返回值的时候。
  •     null跟undefined一样,只是在该对象找不到时。
  •     判断null==undefined时,为true。

  数据类型转换

    计算过程中一些数据类型会被自动转换,不会报错。

    比如:

数字 + 字符串:数字转换为字符串

数字 + 布尔值:true转换为1,false转换为0

字符串 + 布尔值:布尔值转换为字符串true或false

    有一些强行转换的关键字:parseInt,parseFloat,eval。

    在强行转换成int的过程中出现了一个NaN。表示转化失败。是一种特殊类型。

    NaN在比较时,只有NaN!=NaN为true。

    typeof来查询数据类型。

  ECMAScript运算符

  •     有些时候加号+可以用在字符串的拼接。
  •     减号—有时候表示负数。
  •     --i和i--,的区别像是c语言中。先加在赋值和先赋值再加。
  •     逻辑运算符:等于 ( == ) 、不等于( != ) 、 大于( > ) 、 小于( < ) 
大于等于(>=) 、小于等于(<=)
    与 (&&) 、或(||) 、非(!)

  ECMAScript关系运算符

    

1
2
var bResult = "Blue" "alpha";
alert(bResult); //输出 true  

    在上面的例子中,字符串 "Blue" 小于 "alpha",因为字母 B 的字符代码是 66,字母 a 的字符代码是 97。

    比较数字和字符串

    另一种棘手的状况发生在比较两个字符串形式的数字时,比如:

1
2
var bResult = "25" "3";
alert(bResult); //输出 "true"

    上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串,所以比较的是它们的字符代码("2" 的字符代码是 50,"3" 的字符代码是 51)。

    不过,如果把某个运算数该为数字,那么结果就有趣了:

1
2
var bResult = "25" < 3;
alert(bResult); //输出 "false"

    这里,字符串 "25" 将被转换成数字 25,然后与数字 3 进行比较,结果不出所料。

    总结:

1
2
比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.
比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.

   Boolean运算符

var temp=new Object();// false;[];0; null; undefined;object(new Object();)

    if(temp){
console.log("yuan")
}else {
console.log("alex")
}

    都是假!

  void()  

    没有返回值的函数返回的都是undefined,同样被void的函数也是undefined。

控制语句

  if语句

     if (true) { alert("为真的时候执行")}else{ alert("为假的时候执行")}

    同样中间也有else if。

  switch语句

switch基本格式

switch (表达式) {

case 值1:语句1;break;

case 值2:语句2;break;

case 值3:语句3;break;

default:语句4; }

    switch效率更高。

  for循环

    for循环一般也用于遍历操作。

    但是注意循环出来的i是序列号。

for (初始化;条件;增量){
语句1;
...
}

  while循环

   var i=1; while (i<=7) {

    document.write("<H"+i+">hello</H "+i+"> ");

    document.write("<br>"); i++; }

  异常处理

try {
//这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
//e是一个局部变量,用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
}

ECMA对象

  创建一个对象

    var sMyStrObj = “gaga”;

    var sMyStrObj = new String("gaga");

  字符串方法

   var str2=str1.toLowerCase();转换成为小写
   var str3=str1.toUpperCase();  转换成为大写
     var str2=str1.indexOf("l");从左到右 显示索引
var str3=str1.lastIndexOf("l");从右到左 显示索引
    var str2=str1.match("world");返回一个数组都是“world”
var str3=str1.search("world");返回索引
     var str2=str1.charAt(28);返回字符串
var str3=str1.charCodeAt(28);返回字符串的Unicode编码     
     var str2=str1.substr(2,4);从2截取4个
var str3=str1.substring(2,4);从2截取到4 包括尾部
     var str2=str1.replace("cd","aaa");替换 
     var strArray=str1.split(",");分割 返回数组 
     var str2=str1.concat("efgh");拼接  或者+号

  数组Array

    类似于元组(),支持索引[],切片slice().

    new Array(element0, element1, ..., elementn)

    几个常用方法

    push(value);入栈操作。

    pop();出栈操作。

    unshift();首端入栈。

    shift();首端出栈。

    reserve();反向排序。

    sort();排序。

  date对象   

    var nowd1=new Date();

    alert(nowd1.toLocaleString( ));

获取日期和时间
getDate() 获取日
getDay () 获取星期
getMonth () 获取月(0-11)
getFullYear () 获取完整年份
getYear () 获取年
getHours () 获取小时
getMinutes () 获取分钟
getSeconds () 获取秒
getMilliseconds () 获取毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)

  RegExp对象

    定义一个re对象和规则。

    var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g");

    reg1.test("df14"); 返回值是true或者false。

    "hello world".match(/e/g); 查找符合e规则的,g是关键字。

  math对象

    math是内置对象。调用:

    Math.random(10);生成10以内的随机数。

    Math.round();四舍五入。

    其他:abs,exp,min,max等。

  function对象    

function 函数名 (参数){

函数体;
return 返回值;
}
//another way:
var 函数名 = new Function("参数1","参数n","function_body");

   匿名函数:

    (function ($) {

      var num=13;

      $.fn.extend({

        print:function () {

          console.log($(this).html())} });

      }

    )(jQuery);直接运行的匿名函数,其中中间的是自己的拓展函数。fn是宝石标签的拓展。没有fn是$的拓展。

  作用域

    js的作用域跟py的一致,在大括号{}中的是代码块有着自己的作用域。

    需要注意的是js解释器在加载js文件的时候就形成了作用域链。

BOM对象

  bom浏览器对象模型,使得js有能力跟浏览器对话。

  Window对象

所有浏览器都支持 window 对象。

概念上讲.一个html文档对应一个window对象.

功能上讲: 控制浏览器窗口的.

使用上讲: window对象不需要创建对象,直接使用即可.

    一些方法: 

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。 open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。

  history对象

  location对象

DOM对象

  dom节点  

    根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点(NODE):

  •   整个文档是一个文档节点(document对象)
  •   每个 HTML 元素是元素节点(element 对象)
  • HTML 元素内的文本是文本节点(text对象)
  • 每个 HTML 属性是属性节点(attribute对象)
  • 注释是注释节点(comment对象)

    画dom树是为了展示文档中各个对象之间的关系,用于对象的导航。

    节点(自身)属性:

  •   attributes - 节点(元素)的属性节点
  • nodeType – 节点类型
  • nodeValue – 节点值
  • nodeName – 节点名称
  • innerHTML - 节点(元素)的文本值

导航属性:

  • parentNode - 节点(元素)的父节点 (推荐)
  • firstChild – 节点下第一个子元素
  • lastChild – 节点下最后一个子元素
  • childNodes - 节点(元素)的子节点

  DOM事件

    HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 //练习:输入框
onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。  应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动) onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。 onselect 文本被选中。
onsubmit 确认按钮被点击。

    两种添加事件的方式:

<div onclick="alert(123)">点我呀</div>
<p id="abc">试一试!</p> <script>
var ele=document.getElementById("abc"); ele.onclick=function(){
alert("hi");
}; </script>

    onload:

    当某个标签加载完之后马上运行。这样将js代码放在了标签上面。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <script>
// window.onload=function(){
// var ele=document.getElementById("ppp");
// ele.onclick=function(){
// alert(123)
// };
// }; function fun1() {
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
} </script>
</head>
<body onload="fun1()"> <p id="ppp">hello p</p> </body>
</html>

  修改HTML

  • 改变 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML ,innerText。

  • 改变 CSS 样式
1
2
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";<br>                             .style.fontSize=48px
  • 改变 HTML 属性

elementNode.setAttribute(name,value)

elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

  • 创建新的 HTML 元素

createElement(name)

  • 删除已有的 HTML 元素

elementNode.removeChild(node)

  • 关于class的操作

elementNode.className

elementNode.classList.add

elementNode.classList.remove

    

    

  

javaScript的简单学习的更多相关文章

  1. django之JavaScript的简单学习2

    前言:ajax预备知识:json进阶 1.JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javascript对象: 请大家记住一 ...

  2. JavaScript 的简单学习2

    AJAX 一 AJAX预备知识:json进阶 1.1 什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javas ...

  3. JavaScript闭包简单学习

    因为实验室项目要用,所以最近在学习OpenLayers,但是从来没有做过前端呀,坑爹的,硬着头皮上吧 反正正好借这个机会学习一下JS,本来对这门语言也挺感兴趣的,多多少少写过一下JS代码了,差不多学一 ...

  4. [javascript] Promise简单学习使用

    原文地址:http://www.cnblogs.com/dojo-lzz/p/4340897.html 解决回调函数嵌套太深,并行逻辑必须串行执行,一个Promise代表一个异步操作的最终结果,跟Pr ...

  5. 深入浅出的javascript的正则表达式学习教程

    深入浅出的javascript的正则表达式学习教程 阅读目录 了解正则表达式的方法 了解正则中的普通字符 了解正则中的方括号[]的含义 理解javascript中的元字符 RegExp特殊字符中的需要 ...

  6. javaScript(2)---简单使用

    javaScript(2)---简单使用 学习要点: 1.创建一张HTML页面 2.<Script>标签解析 3.JS代码嵌入的一些问题 一.创建一张HTML页面 <!DOCTYPE ...

  7. 治愈 JavaScript 疲态的学习计划【转载】

    来源:伯乐在线 - Rose Wang 像其他人一样,最近我读了 Jose Aguinaga 的文章 <How it feels to learn JavaScript in 2016>. ...

  8. javascript与浏览器学习(一)

    待学习…………     20160421 标题:JavaScript中浏览器兼容问题  博客地址:http://www.cnblogs.com/DF-fzh/p/5408241.html     简单 ...

  9. javascript的ES6学习总结(第三部分)

    1.ES6中的面向对象的类 1.1.定义类 在ES5中,我们写一个类,通常是这么写的 function Person(name,age){ this.name = name; this.age = a ...

随机推荐

  1. win10预览版9926升级10049操作步骤

    文章转自:豆豆系统收藏备用 win10预览版系统安装的用户非常多,现在最新版本已经到了10049,但是之前很多装了9926版本或者10041版本的同学在通过系统自动更新的时候,且发现,微软官方提供的速 ...

  2. Android Studio增加NDK代码编译支持--Mac环境

    Android的APP开发基本都是使用Java或者跨平台框架进行开发的,对于很多APP来说已经足够了,但是,对于提供功能给外部使用或者性能要求很高的需求下,如图像处理等,可能会需要C/C++库的支持, ...

  3. SignalR 2.1 简单入门项目

    概述 SignalR是通讯框架,前台Web页面与后台服务实现数据的交互.ASP.NET SignalR 是一个为 ASP.NET 开发人员的库,简化了将实时 web 功能添加到应用程序的过程.实时We ...

  4. 2.Java异常学习

    1.Java异常的概念 异常的例子 1.除法就是一个需要捕获异常的例子,除数又可能是0 异常处理的基本流程如下 一旦发生异常,就使得程序不按照原来的流程继续的运行下去 a.程序抛出异常 try{ th ...

  5. 微软的R语言发行版本MRO及开发工具RTVS

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:微软在收购R语言的开发商后,也独立发行或在自己的产品中集成了R语言,这里就介绍下它们包 ...

  6. 当年只会C# 所以写C++就成这样了!

    这应该是4-5年前了. 当年之会c#敲敲代码也不会C++但深信开发这东西只要思想有了. 只是语法问题. 对于C++这貌似只有大牛才能胜任的,而对于我来说是如此困难. 所以想想办法搞了很多通用类来避免C ...

  7. NewBluePill源码学习

    NewBluePill的源码也看的差不多了,一直说等有时间了再写学习的一些心得,拖来拖去弄到现在了,时间不是等来的,慢慢开始吧. 0x00     初识硬件虚拟化 硬件虚拟化对大数人来讲还是比较陌生. ...

  8. WIN32/API/SDK/MFC四者之间的联系和区别

    上面大家都说Win32是一个子系统,这个当然是对的,不过我们有时候我们所说Win32通俗的就是指32位的Windows系统,从 windows95/98到NT/2000/XP都是32位Windows. ...

  9. Create a REST API with Attribute Routing in ASP.NET Web API 2

    原文:http://www.asp.net/web-api/overview/web-api-routing-and-actions/create-a-rest-api-with-attribute- ...

  10. BZOJ 2431 & DP

    题意:求逆序对数量为k的长度为n的排列的个数 SOL: 显然我们可以对最后一位数字进行讨论,判断其已经产生多少逆序对数量,然后对于前n-1位同样考虑---->每一个长度的排列我们都可以看做是相同 ...