一、JavaScript 简介

1.1 、什么是 JavaScript?

JavaScript 的简称:JS。

JavaScript 是一个脚本。(不需要经过编译器编译的语言就叫做脚本)

JavaScript 的作用:
            1)动态改变网页内容
            2)动态改变网页的外观
            3)验证表单数据
            4)响应事件

  1.2、 JavaScript 的特点

1)语法简单,易学易用。
        2)解释型语言。
        3)动态执行。
        4)跨平台,JavaScript是依赖于浏览器本身的,与操作系统无关。
        5)基于对象和事件驱动(单击、悬浮、双击、聚焦、失焦...)
        6)仅限客户端。
     直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,就称为“事件”。比如按下鼠标,移动窗口,选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。

1.3、 JavaScript 与 Java 的区别?

1)Java 需要编译。JavaScript 需要解释。
        2)Java 彻底的面向对象
        3)Java 是强类型(数据要特别指定类型来存储)。
           JavaScript 是弱类型(会根据给定的数据来推算出类型)。

二、 引入方式与引入位置

  向HTML页面插入JavaScript的主要方法,就是使用<script元素>。

  使用<script>元素的方式有两种:直接在HTML页面中嵌入JavaScript代码和包含外部的JavaScript文件。

  1. JS代码存放在标签对<script>...</script>中。
  2. 使用script标签的src属性引入一个js文件。(方便后期维护,扩展)

    例:<script src=”test.js” type=”text/javascript”></script>

      注:规范中script标签中必须加入type属性。

内部

<html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>在HTML中使用JavaScript</title></head><body><h1>在页面中嵌入JavaScript</h1><script type="text/javascript">window.document.write("hello,world");</script></body>
</html>

外部

html文件使用src引入外部my.js

JavaScript文件

JavaScript代码

<script>标签的位置

关于<script>标签的位置,<script>一般应该放在页面的<head>元素中。

<html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>在HTML中使用JavaScript</title><script type="text/javascript" >window.document.write("世界你好!!!");</script></head><body><h1>将JavaScrip标签放在head上</h1></body>
</html>

注意:

  1、 页面上可以有多个<script>标签

  2、 <script>标签按顺序执行

  3、 <script>标签可以出现在任意的页面位置

4、<script>标签一定要写</script>关闭,而不能<script/>这样关闭。否则没有任何错误信息,但是没有运行结果。

三、区分大小写

  JavaScript区分大小写

四、常用函数

  window.alert() 或写为 alert() :显示一个提示框显示内容。

  window.document.write() :在网页的当前位置处写内容。

 五、变量

JavaScript的变量是弱类型的,定义变量时只用 var 运算符,可以将它初始化为任意值。

  //所有的数据都是用var定义
         var name = "admin";  
         var age = 26;
         var obj = new Date();

 六、数据类型

   使用typeof关键字查看变量代表的具体数据类型

   var name = "admin";
         var age = 26;
         var obj = new Date();

alert(typeof(name)+"=="+typeof(age)+"=="+typeof(obj));

弹出:string==number==Object

有4种基本数据类型:

Undefined, Boolean,Number和String

  • undefined - 如果一个变量没有初始化值的时候,其类型为undefined类型。表示没有定义
  • boolean -布尔是boolean类型
  • number - 所有的数值都是number类型
  • string -字符和字符串都是string类型
  • object - 如果变量是一种引用类型或 Null 类型的
<script type="text/javascript" >var a = 100;var b = 3.14;var c = true;var d = 'a';var e = "hello";var f;document.write(a + "<br/>");  //100document.write(b + "<br/>");  //3.14document.write(c + "<br/>");  //truedocument.write(d + "<br/>");  //adocument.write(e + "<br/>");  //hellodocument.write(f + "<br/>");  //undefineddocument.write("<hr/>");document.write( typeof a + "<br/>");    //numberdocument.write( typeof b + "<br/>");  //numberdocument.write( typeof c + "<br/>");  //booleandocument.write( typeof d + "<br/>");  //stringdocument.write( typeof e + "<br/>");  //stringdocument.write( typeof f + "<br/>");    //undefined</script>

七、类型转换

<script type="text/javascript">var a = 20;var b = 14;var c = a + b;var d = a + "" + b;alert(c);      //输出  34alert(d);    //输出  2014var x = "20";var y = "12";var xy =  x + y;alert(xy);    //输出  2012var xy2 = parseInt(x) + parseInt(y);window.document.write(xy2);   //输出   32    parseInt将字符串解析为数字</script>

    ECMAScript 提供了两种把非数字的原始值转换成数字的方法,即 parseInt() 和 parseFloat()。只有对 String 类型调用这些方法,它们才能正确运行;对其他类型返回的都是 NaN。

在判断字符串是否是数字值前,parseInt() 和 parseFloat() 都会仔细分析该字符串。

    parseInt() 方法首先查看位置 0 处的字符,判断它是否是个有效数字;如果不是,该方法将返回 NaN,不再继续执行其他操作。但如果该字符是有效数字,该方法将查看位置 1 处的字符,进行同样的测试。这一过程将持续到发现非有效数字的字符为止,此时 parseInt() 将把该字符之前的字符串转换成数字。

例如,如果要把字符串 "12345red" 转换成整数,那么 parseInt() 将返回 12345,因为当它检查到字符 r 时,就会停止检测过程。

<script type="text/javascript">
/*字符串转数字parseInt()  可以把一个字符串转换成整数。parseFloat() 可以把一个字符串转换成小数。
*/var a = "12";a = 12.64;a = "123abc123"; /* parseInt方法如果接收的字符串含有非数字的字符,那么parseInt方法会从字符串的首个字符开始寻找,一直找到非数字字符为止,然后就使用前面的数字字符转换成数字, */a = "a123";  // NaN not a number(不是一个数字)
    a = "012"; /* 12 如果首位是0,那么就想祛除0再进行转换。*/a = "0x10"; /* 如果一个字符串是以0x开头,那么会把字符串中的内容当成十六进行的数据处理的。 */var b = parseInt(a);document.write("结果:"+b+"<br/>");    //16var c= "3.14";c = "10";   // 如果是一个字符串是整数的,那么使用parseFloat还是转换 成整数 。
    c = "100a";c = "abc123";c = parseFloat(c);document.write("结果:"+c+"<br/>");   //NaN/*javascript提供一个IsNaN的方法让我们判断该字符串是否是 一个数字。is not a muber  不是一个数字。不是一个数字返回true,是一个数字返回false.
*/document.write(isNaN("123")+"<br/>"); //falsedocument.write(isNaN("abc123"));    //true</script>

 八、比较运算符

<script type="text/javascript">var a = 20;var b = "20";// 如果用==判断是否相等,JS会尽力把它们搞成同一个类型,然后进行比较
     console.log( a == b );   //true   "==" 只是比较数值是否相等console.log( a === b );  //false  "==="比较数值和类型是否相等console.log( a != b );   //false   "!=" 比较数值是否不等console.log( a !== b );  //true   "!=="比较类型和数值是否不等</script>

三目运算

三目运算符    布尔表达式?值1:值2;
*/        var age = 10;document.write(age>18?"成年人":"未成年人"); //未成年人    //表达式?返回值1:返回值2     如果表达式成立则返回返回值1;如果表达式不成立,则返回返回值2

九、流程控制语句

<script type="text/javascript">
/*
控制流程语句if语句格式:if(判断条件){符合条件执行的代码    }    if语句的特殊之处: 1. 在javascript中的if语句条件不单止可以写布尔表达式,还可以写任何的数据。number  非0为true, 0为false.string  内容不为空是true, 内容空的时候是false。undefined:falseNaN:    false
*/       var workAge = 1;    //为0是false;非0是truevar str ="";        //为空是false;不为空是truevar b;        //未定义,为falseif(workAge){document.write("明天过来面试!!");}else{document.write("不要在投我们公司了,不要你!");    }/*
选择语句: switch语句switch(变量){case 值1:&nbsp;break;case 值2:break;case 值3:break;.....default:break;}特殊之处:1.     在javascript中case后面可以跟常量与变量还可以跟表达式     *//*    var option = "A";var score =98;switch(option){case score>=90?"A":"B":document.write("java");break;case "B":document.write("ps");case "C":document.write("javascript");break;case "D":document.write("C++");break;}*/</script>

转载于:https://www.cnblogs.com/guzhou-ing/p/6464249.html

JavaScript总结(一)相关推荐

  1. 【AJAX】JavaScript的面向对象

    Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...

  2. 【JavaScript总结】JavaScript语法基础:JS高级语法

    作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...

  3. 【JavaScript总结】JavaScript语法基础:DOM

    ->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...

  4. 【JavaScript总结】JavaScript语法基础:JS编码

    运算符 数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...

  5. 【JavaScript总结】JavaScript语法基础:数据类型

    ------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...

  6. 【JavaScript总结】JavaScript发展与学习内容

    发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...

  7. Python:模拟登录、点击和执行 JavaScript 语句案例

    案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...

  8. [JavaScript] JavaScript数组挖掘,不只是讲数组哟(2)

    课程来源:后盾人 上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟 数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...

  9. [JavaScript] JavaScript 数组挖掘,不只是讲数组哟

    课程来源:后盾人 数组引用类型分析 数组的定义 const array = new Array('hello', 'dust', 1, 2, 3, 4, 5) console.log(array) l ...

  10. linux下用js生成xml,js2xml:将javascript字符串转换为xml

    有时候爬数据遇到像下面这种,数据在script标签中以javascript形式存在. var totalReviewsValue = 32; var averageRating = 4.5; if(t ...

最新文章

  1. 华为RH2288V3服务器部署指南
  2. DualGan 学习笔记
  3. Zipkin 基于MQ存 储链路信息至 MySQL
  4. 计算机的3类系统总线分别是_《深入理解计算机系统》读书笔记—第六章、存储器层次结构...
  5. 交叉编译工具链的使用
  6. Scala类型系统的目的——Martin Odersky访谈(三)
  7. python牛客网编程题_一波优秀的自学编程语言网站
  8. Linux内核分析 - 网络[八补]:IP协议补充
  9. 售价3998元!iQOO 3拉力橙明日全款预售:3月29日首销
  10. Java研发知识图谱
  11. iOS 2x 3x
  12. 宝塔Linux面板公司,宝塔面板_宝塔Linux面板-九州数码,一站式云安全服务平台
  13. 广西电力职业技术学院计算机应用,广西电力职业技术学院电子与信息工程系
  14. C++面向对象高级编程(上) 第一周笔记 GeekBand
  15. 用react-custom-scrollbars插件美化 滚动条
  16. 金融,财务,融资相关知识(一)
  17. 超大文件上传 WebUploader 断点续传,分片上传
  18. win8/win10微信QQ邮箱可登陆,浏览器显示无网络连接
  19. 曹祖圣VB.NET视频学习工具
  20. 教你获取Microsoft Office 365E5账号

热门文章

  1. java ocr识别pdf_如何知道PDF是否仅包含图像还是已经过OCR扫描以进行搜索?
  2. 电脑日常故障及处理(二)
  3. 【译】理解 JavaScript 中函数调用和 this
  4. ASP.NET 安全认证(一)
  5. Oracle sql 中的字符(串)替换与转换[转载]
  6. iOS开发之--打印一堆奇怪东西的解决方案
  7. 字符串匹配的KMP算法——Python实现
  8. 使用StarWind为RAC设置存储
  9. openSUSE-openOffice无法输入中文
  10. 意外发现:网盾升级后支持soso和有道