傻逼的开始(JavaScript)

  一,JavaScript的简介

      1. 什么是JavaScript?是基于对象和事件驱动的语言,应用于客户端

      基于对象:

      · java是面向对象,使用对象需要创建

      · js里面提供好了一些对象,直接使用

      事件驱动:每次滑动鼠标,变换一张图片

      客户端:指的是浏览器

      2.JavaScript的特点(3个)

(1)交互性

      (2)安全性:JavaScript不能访问本地硬盘

      (3)跨平台性:

      在java里面跨平台,通过虚拟机实现的

      JavaScript跨平台,只要在系统里面安装了支持JavaScript的浏览器,就可以运行JavaScript

      3. java和JavaScript的区别

      (1)java是由sun公司,现在是oracle;JavaScript是网景公司

      (2)java面向对象的语言,js是基于对象的语言

      (3)java跨平台依靠虚拟机实现,JavaScript只要浏览器就可以运行

      (4)JavaScript是弱类型语言,java是强类型语言

      比如:在java中定义int x ="10";就是错误的

      (5)java运行先编译通过虚拟机运行,JavaScript直接使用浏览器运行

      4. JavaScript由3部分组成

      ECMAScript:由ECMAScript组织制定语句,语法

      BOM: broswer object model:浏览器对象模型

      DOM: document object model:文档对象模型

      二,js和html的结合方式

      有2种结合方式:

      第一种:使用html中的标签js代码

      第二种:使用html的标签,引入外部的.js文件

      不能在标签内结束;不要在标签内写内容,不会被执行到

      .js文件有2种注释:java的单行注释和多行注释

      三,js的变量声明和数据类型

1. 在js中声明变量都是使用关键字var

      2. js的原始类型:

      (1)在java里面有基本数据类型:8个

      (2)在js有原始类型:5个

      string类型:var str = "str";

      number数字类型:var a = 10;

      boolean布尔类型(true false):var c = true;

      null(特殊的引用类型,表示对象引用为空):var date = null;

      undefined(表示定义了一个变量,但是没有赋值):var a;

      (3)typeof(变量名称):查看当前变量的类型

      四,js的引用类型和类型转换

      · 引用对象:

      object 对象:所有对象都是由这个对象继承而来

      Boolean 对象: Boolean原始类型的引用类型

      Number 对象:Number原始类型的引用类型

      · 类型转换

      转换成字符串

      转换成数字: parseInt() 和 parseFloat()

      强制类型转换:

      Boolean(value) - 把给定的值转换成Boolean型

      Number(value) - 把给定的值转换成数字(可以是整数或者浮点型)

      String(value) - 把给定的值转换成字符串

      五,js的语句

      · 在java中使用的switch语句、if语句、for语句、while语句、do while语句在js中都一样使用。需要注意的是,在js中所有的变量定义都是var

      · java里面的switch语句,在JDK1.7之后,数据类型支持string类型

      六,代码练习:向页面输出99乘法表

      1. document.write可以直接向页面输出html代码

      2. html中的属性和属性值之间可以使用双引号,也可以使用单引号

      3. 代码:

document.write("

"); //循环9行 for(var i=1;i<=9;i++) {  document.write("");  //循环每行的部分  for(var j=1;j<=i;j++) {  document.write("");  }  document.write(""); } document.write("");  //向页面输出内容  document.write(j+"*"+i+"="+i*j);  document.write("");

七,js的运算符--和java基本一致

      1. 算术运算符

      + - * / ......

      2. 赋值运算符

      +=的含义:x+=y相当于 x=x+y

      3. 比较运算符

      4. 逻辑运算符

      5.和java中不一样的内容:

      (1)在js里面不区分整数和小数,所以:var a = 123/1000*1000;结果在java里面是0,在js中是123

      (2)字符串的相加和相减操作:如果是字符串和数字相加则是拼接操作,如果是相减则是真正的相减操作,如果不是数字则提示NaN

var a = "12"; document.write(a+1);//输出121 document.write(a-1);//输出11 var b = "a"; document.write(b-1);//输出NaN(3)在js中boolean类型也可以参与运算,true代表1,false代表0

(4)==和===是有区别的:==比较的是值,===比较的是值和类型

var a = 10; if(a=="10") {  document.write("== yes");//输出 } if(a==="10"){  document.write("== = yes");//不输出 }

      八,js的数组

      · 什么是数组?定义一个变量只能存储一个值,想要存多个值,可以使用数组进行存储

      · js里面定义数组的方式:

      1. var arr = [];

      2. var arr=["a",1,2,true];//可以存储任意类型

      3. var arr = new Array(3);//数组长度为3

      4. var arr = new Array(3,4,5);//往数组里面存了3个元素

      · 查看数组的长度:length

      · 获取数组里面的值:

for(var i=0;i var a = arr[i];  document.write(a);  document.write("
"); }· 数组的长度:在js中数组的长度是可变的

      · 数组的长度是最大的下标+1,之间如果没有赋值直接默认是空字符串

      九,js的string对象

      1. 字符串数组:创建字符串var a = "abc"; var b = new String("bb");

      2. 属性length获取字符串的长度

      3. 方法:

第一类:与html相关的方法(设置字符串的样式的方法) = bold() 使用粗体显示字符串。 ** document.write(a.bold()); = fontcolor() 使用指定的颜色来显示字符串。 ** document.write(a.fontcolor("red")); = fontsize() 使用指定的尺寸来显示字符串。 ** document.write(a.fontsize(7)); = link() 将字符串显示为链接 ** document.write(a.link("04-练习99乘法表.html")); 第二类:与java相似的方法(在java里面也有类似的方法) = charAt() 返回在指定位置的字符。 如果位置不存在字符,返回空字符串"" ** var str = "abcdefg"; document.write(str.charAt(1)); = concat() 连接字符串 ** document.write(str.concat(str1)); = indexOf() 检索字符串,得到检索的字符的位置,如果没有找到返回-1 ** var str2 = "ABCD"; document.write(str2.indexOf("R")); = split() 把字符串分割为字符串数组 ** var str3 = "a-b-c"; var arr = str3.split("-"); document.write("length: "+arr.length); = substr() 从起始索引号提取字符串中指定数目的字符。 = substring() 提取字符串中两个指定的索引号之间的字符 ** var str4 = "MARYJACKLUCY"; document.write(str4.substr(2,3)); //RYJ, 第一个参数表示从哪个位置开始,第二个参数表示向后取几个位置的值 document.write("
"); document.write(str4.substring(2,3)); //R ,第一个参数表示从哪个位置开始,第二个参数到哪个位置结束(不包含这个位置) [2,3)

      十,js的Array对象

1. 创建数组

      2. 属性 length设置或返回数组中元素的数目

      3. 方法

= concat():连接数组 ** var arr2 = [6,7,8]; document.write(arr1.concat(arr2)); = join():把数组根据指定字符进行分割 ** var arr3 = new Array(3); arr3[0] = "mary"; arr3[1] = "jack"; arr3[2] = "lucy"; document.write(arr3); document.write("
"); document.write(arr3.join("-")); = pop() 删除并返回数组的最后一个元素 ** var arr4 = ["aa","bb","cc"]; //输出数组的原始的值 document.write("old: "+arr4); //输出执行pop方法之后的返回值 document.write("
"); document.write("return: "+arr4.pop()); //输出执行pop方法之后新的数组内容 document.write("
"); document.write("new: "+arr4); = push() 向数组的末尾添加元素,并返回新的长度 ** var arr5 = ["zhangsan","lisi","wangwu"]; //输出数组的原始的值 document.write("old: "+arr5) document.write("
"); //输出执行push()方法之后的返回值 document.write("return: "+arr5.push("lucy")); //输出执行push()方法之后新的数组内容 document.write("
"); document.write("new: "+arr5); ** 向数组里面使用push方法添加一个数组 document.write("


"); var arr6 = ["AAA","BBB"]; var arr7 = ["CCC","DDD"]; //输出数组arr6的原始的值 document.write("old: "+arr6) //输出执行push()方法之后的返回值 document.write("
"); document.write("return: "+arr6.push(arr7)); //输出执行push()方法之后新的数组内容 document.write("
"); document.write("new: "+arr6); //遍历数组 for(var i=0;i"); document.write(arr8.reverse());

十一,js的Math对象

1. 进行数学运算,在Math对象里面的方法,直接使用Math.方法名进行调用

      2. 方法

= ceil(x) 对一个数进行上舍入。 = floor(x) 对一个数进行下舍入。 = round(x) 把一个数四舍五入为最接近的整数 = random() 返回 0 ~ 1 之间的随机数 ** 代码 var a = 10.2; //ceil(x) 对一个数进行上舍入。 document.write(Math.ceil(a)); //11 document.write("


"); //floor(x) 对一个数进行下舍入。 document.write(Math.floor(a)); document.write("
"); //round(x) 把一个数四舍五入为最接近的整数 document.write(Math.round(a)); document.write("
"); //random() 返回 0 ~ 1 之间的随机数 document.write(Math.random()); //生成0-9之间的随机数 0.0 -- 0.9之间的值 document.write("
"); document.write(Math.floor(Math.random()*10));

十二,js的Date对象

1. 进行日期操作的对象

      2. 使用Date对象: new Date()

      3. 方法:

= toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串。  ** //得到当前的时间 var date = new Date(); document.write(date.toLocaleString()); = 得到当前的年 getFullYear() 从 Date 对象以四位数字返回年份  ** document.write(date.getFullYear()); = 得到当前的月 getMonth() 从 Date 对象返回月份 (0 ~ 11)  ** document.write(date.getMonth()+1); = 得到当前的星期 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)  ** 如果当前的星期是星期日,返回的是0  ** document.write(date.getDay()) = 得到当前的日 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)  = 得到当前的小时  getHours() = 得到当前的分  getMinutes() = 得到当前的秒 getSeconds() ** document.write(date.getHours()); document.write("
"); document.write(date.getMinutes()); document.write("
"); document.write(date.getSeconds()); = 得到毫秒数 getTime() 返回 1970 年 1 月 1 日至今的毫秒数

十三,js的RegRxp对象

      1. RegRxp对象表示正则表达式

      2. 正则表达式:规定字符串出现的规范

      3. 使用: new RegExp("正则表达")

      4. 方法:

      test() 检索字符串中指定的值,如果存在则返回true,如果不存在匹配的字符返回false

      5. 代码:

//创建正则表达式对象 var reg = new RegExp("[a]"); //创建一个字符串 var name = "lisi"; //使用正则对象匹配字符串 var flag = reg.test(name); document.write(flag);

      十四,js的bom对象

      1. script标签放置位置

      · 建议方法到后面,html的解析是从上到下解析的,如果在head里面就获取不到输入项里面的值,因为还没解析到输入项,所以肯定得不到值

      2. 什么是bom:浏览器对象模型

      navigator:浏览器的信息

      screen:屏幕信息

      history:访问地址的历史信息

      location:设置url,href设置或者返回完整的URL

      window对象:是窗口对象,是顶层对象

      · 方法:

setInterval("执行的js代码",毫秒数) 在指定的时间内,重复执行js代码 ** 有两个参数 *** 第一个参数要执行的js代码(js的方法),第二个参数是时间(毫秒数) ** 代码 setInterval("alert('setinterval');",3000); setTimeout("执行的js代码",毫秒数) 在指定的时间之后,执行js代码,执行一次 ** 有两个参数 *** 第一个参数要执行js代码(js的方法),第二个参数是时间(毫秒数) ** 代码 setTimeout("alert('settimeout');",3000); clearInterval(id) 取消由 setInterval() 设置的 timeout。 clearTimeout(id) 取消由setTimeout() 方法设置的 timeout。

      十五,js的全局变量和局部变量

      1. 全局变量:在js里面,如果在一个script标签里面定义变量,在页面中其他script标签里面都可以使用

      2. 局部变量:在js方法里面定义一个变量,这个变量只能在方法里面使用

      3. 浏览器的调试工具:F12

      十六,js的全局函数

      1. 不属于任何对象,可以直接使用

      2,主要的函数方法:

eval(): 把字符串当成js代码执行 ** var str = "alert('123456');"; //alert(str); eval(str); isNaN() 检查某个值是否是数字 ** 如果是数字返回 false,如果不是一个数字返回 true。 parseInt() 解析一个字符串并返回一个整数 ** var str1 = "123"; alert(parseInt(str1)+1); encodeURI() 把字符串编码为 URI ** var str2 = "abc测试中文"; var encodestr2 = encodeURI(str2); document.write(str2); document.write("
"); document.write(encodestr2); decodeURI() 解码某个编码的 URI ** var decodestr2 = decodeURI(encodestr2);

JavaScript基础

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,721评论 0 8
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,171评论 0 5
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,293评论 18 399
  • 《ijs》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 4,734评论 0 7
  • 思维导图可以激发学习积极性,提高创新思维能力和自主学习的意识,增强记忆,提高了学习效率。 请欣赏思维导图——绘制要...
    4721063929e0阅读 352评论 1 0