JavaScript总结(一)
一、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文件。
- JS代码存放在标签对<script>．．．</script>中。
- 使用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/>"); //100
document.write(b + "<br/>"); //3.14
document.write(c + "<br/>"); //true
document.write(d + "<br/>"); //a
document.write(e + "<br/>"); //hello
document.write(f + "<br/>"); //undefined
document.write("<hr/>");
document.write( typeof a + "<br/>"); //number
document.write( typeof b + "<br/>"); //number
document.write( typeof c + "<br/>"); //boolean
document.write( typeof d + "<br/>"); //string
document.write( typeof e + "<br/>"); //string
document.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); //输出 34
alert(d); //输出 2014
var x = "20";
var y = "12";
var xy = x + y;
alert(xy); //输出 2012
var 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/>"); //16 var 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/>"); //false document.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：false
NaN: false
*/
var workAge = 1; //为0是false;非0是true
var str =""; //为空是false;不为空是true
var b; //未定义，为false
if(workAge){
document.write("明天过来面试！！");
}else{
document.write("不要在投我们公司了，不要你！");
} /*
选择语句：
switch语句 switch(变量){
case 值1: 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>
JavaScript总结(一)的更多相关文章
- JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议
软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收
执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...
- 探究javascript对象和数组的异同，及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 《Web 前端面试指南》1、JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
- JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
- JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...
- JavaScript进阶之路（一）初学者的开始
一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- Spring Boot 2.0 教程 | 快速集成整合消息中间件 Kafka
欢迎关注个人微信公众号: 小哈学Java, 每日推送 Java 领域干货文章,关注即免费无套路附送 100G 海量学习.面试资源哟!! 个人网站: https://www.exception.site ...
- [翻译] .NET Core 3.0 Preview 9 发布
原文: Announcing .NET Core 3.0 Preview 9 今天,我们宣布推出 .NET Core 3.0 Preview 9.就像 Preview 8 一样,我们专注于打磨 .NE ...
- 01 Python 基础数据类型
基础数据类型,有7种类型,存在即合理. 1.int 整数 主要是做运算的 .比如加减乘除,幂,取余 + - * / ** %...2.bool 布尔值 判断真假以及作为条件变量3.str 字符串 存 ...
- Installing the JMeter CA certificate for HTTPS recording
参考: http://jmeter.apache.org/usermanual/component_reference.html#HTTP(S)_Test_Script_Recorder User m ...
- HDU2276 Kiki & Little Kiki 2 矩阵快速幂
Kiki & Little Kiki 2 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java ...
- d3.js 制作简单的俄罗斯方块
d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏--俄罗斯方块.话不多说先上图片. 1. js tetris类 由于方法拆分 ...
- 【Offer】[68] 【树中两个结点的最低公共祖先】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入两个树结点,求它们的最低公共祖先. [牛客网刷题地址]无 思路分析 该题首先要确定是否为二叉树,还要确定是否为二叉搜索树,是否有父指 ...
- springboot使用memcache缓存
Memcached简介 Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的 ...
- 2019沈阳网络赛B.Dudu's maze
https://www.cnblogs.com/31415926535x/p/11520088.html 啊,,不在状态啊,,自闭一下午,,都错题,,然后背锅,,,明明这个简单的题,,, 这题题面不容 ...
- 2019-2020-1 20199322《Linux内核原理与分析》第一周作业
图解sudo deluser name和sudo deluser name --remove -home的区别? 先众所周知地创建一个用户“hanmeimei” 然后给韩梅梅创建一个二级的目录,并且在 ...