Javascript基础知识(一)
来源:互联网 发布:php页面输出乱码 编辑:程序博客网 时间:2024/06/15 05:26
web前端可以从三个层面来描述:
- 1 . 结构层 HTML 从语义的角度,描述页面结构。
- 2 . 样式层 CSS 从审美的角度,美化页面。
- 3 . 行为层 JavaScript 从交互的角度,提升用户体验。
JavaScript运行在客户的电脑里面,而不是服务器上,所以我们称为“前台语言”。JavaScript就是一个简单的制作页面效果的语言,不能操作数据库。它服务于页面的交互效果、美化、绚丽。
今天开始学习一些Javascript的基础知识。
1.Javascript的历史背景介绍
布兰登•艾奇(Brendan Eich,1961年~),1995年在网景公司,发明的JavaScript。一开始JavaScript叫做LiveScript,但是由于当时Java这个语言特别火,所以为了傍大牌,就改名为JavaScript。
同时期还有其他的网页语言,比如VBScript、JScript等等,但是后来都被JavaScript打败,所以现在的浏览器中,只运行一种脚本语言就是JavaScript。
Javascript和ECMAScript的关系
JavaScript是由公司开发而成的,公司开发而成的一定是有一些问题,不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织,牵头制定JavaScript的标准,取名为ECMAScript。
Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association。ECMAScript不是一门语言,而是一个标准。符合这个标准的比较常见的有:JavaScript、Action Script(Flash中用的语言)。
Javascript发展历程
2003年之前,JavaScript被认为“牛皮鲜”,用来制作页面上的广告,弹窗、漂浮的广告。
2004年JavaScript命运开始改变。人们逐渐开始提升用户体验,谷歌公司带头使用Ajax异步交互技术(搜索框智能感应)。(Ajax技术就是JavaScript的一个应用)。
2007年,用户就多了上网的途径——移动设备上网。JavaScript在移动页面中,也是不可或缺的。并且这一年,互联网开始标准化,按照W3C规则三层分离,人们越来越重视JavaScript了。
2010年,人们更加了解HTML5技术了,HTML5推出了一个东西叫做Canvas(画布),工程师可以在Canvas上进行游戏制作,利用的就是JavaScript。
2011年,Node.js诞生,使JavaScript能够开发服务器程序了。
2. JS 语法格式
Js 的书写位置非常的自由。
- 行内式
<button onclick="alert('哈哈哈')">点击我</button>
- 内嵌式
<script type=”text/javascript”> </script> 任何一个地方
- 外链式
<script type=”text/javascript” src=”hh.js”></script>
跟链入css一样,写在head里面。
1.书写在body里面任何一个地方。
<script type="text/javascript"> 内容</script>
3.JS语句
1.alert语句
alert就是英语里面的“警报”的意思。用途就是弹出“警告框”:
<script type="text/javascript"> alert("警报:密码含有大写字母!");</script>
代码截图:
效果:
JavaScript对换行、缩进、空格不敏感,但最后一定要加分号,否则压缩代码后,就会出问题。
2.控制台输出语句——console
例:
<script type="text/javascript"> console.log("警报:密码含有大写字母!");</script>
在网页上右键,点击检查,找到console。
3. document.write() 文档打印输出
document.write() 直接在文档中显示。
4.直接量——数字和字符串
“直接量”也称为“字面量”,就是看见什么,它就是什么。简单的直接量有2种:数字、字符串。
数值的直接量的表达非常简单,它不需要任何的符号:
alert(666); //666是数字,所以不需要加引号。
字符串就是人说的话,比如单词、句子,一定要加上引号。
5.变量
计算机的程序中,用字母来表示数字、字符串等其他东西的,称为“变量”。跟小学数学代数差不多。
<script> var a = 100;//把数字100赋值给a,用var来定义一个变量。 console.log(a);//在控制台输出a</script>
效果:
var就是英语“variant”变量的缩写。后面要加一个空格,空格后面的东西就是“变量名”。
1. 变量名有命名规范:
只能由英语字母、数字、下划线、美元符号$构成,且不能以数字开头,并且不能是JavaScript保留字。
下列的单词,叫做保留字,就是说不允许当做变量名:
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
- 输出变量,一定不要加引号
2.变量的类型
变量里面能够存储数字、字符串。变量会自动的根据存储的东西类型不同,来决定自己的类型。
-数值型
如果一个变量中,存放了数字,那么这个变量就是数值型的。
var a = 100; //定义了一个变量a,并且赋值100console.log(typeof a); //输出a变量的类型
typeof表示“某某的类型”
3.字符串型
1 var a = "abcde";2 var b = "回家吃饭";3 var c = "123123";4 var d = "哈哈哈哈哈";5 var e = ""; //空字符串
4.布尔值
布尔类型的值,就两个,true、false,用的时候千万不要加上引号。
var a = true;var b = false;
5.连字符和加号
“+”号有两种含义:
1) 连字符
2) 加
console.log("我" + "爱" + "你"); //连字符,把三个独立的汉字,连接在一起了console.log("我+爱+你"); //原样输出console.log(1+2+3); //输出6
如果加号两边都是数值,此时是加。否则,就是连字符。
5.变量值的传递
语句:
1 a = b;
将等号右边的值,赋给左边的变量;等号右边的变量,值不变。
把b的值赋给a,b不变。
var a = 1; //定义a,并且赋值1 var b = 2; //定义b,并且赋值2 a = b; //就是将b的值给a,b的值不变。所以a就是2了,b是2不变。 console.log(a); //2 console.log(b); //2
6.变量的分类
根据变量的作用范围 可以分为全局变量和局部变量
全局变量:
1. 在最外层声明的变量。
2. 在函数体内部,但是没有声明var 的变量也是全局变量
局部变量:
在函数体内部声明的变量。
6.运算符和表达式
运算符有很多分类:数学运算符、逻辑运算符、自增运算符等等。
1.数学运算符:
运算顺序跟数学中学的一样,只是没有中括号和大括号,全部都是小括号。
语法:
Math.pow(a,b);
1.乘方:
var a = Math.pow(3,4);console.log(a);
可以嵌套:
var a = Math.pow(3,Math.pow(2,2));console.log(a);
2.开根号:
var a = Math.sqrt(81); console.log(a);
3.关系运算符
> 大于号< 小于号>= 大于或等于<= 小于或等于== 等于=== 全等于!= 不等于!== 不全等于
注意:在JS中=符号只有一个意思!表示赋值!!如果想判断两个东西,是否相等,需要使用符号==。==和===的区别是:一个判断值是否相等,一个是判断值及类型是否完全相等。
console.log("5" == 5); //trueconsole.log("5" === 5); //false
关系运算符的意思和数学上学得一样。它们得到的结果都是布尔值,要么是true,要么是false。
示例:
<script type="text/javascript"> //得到用户的成绩 var chengji = parseInt(prompt("请输入成绩")); //输出结果: alert(chengji >= 60);</script>
4.逻辑运算符
逻辑运算符有三个:
&& 与(且)|| 或! 非
只有true、false才能参与逻辑运算,得到的答案,仍然是布尔值。
// &&表示“且”的意思,都真才真console.log(true && true); //trueconsole.log(true && false); //falseconsole.log(false && true); //falseconsole.log(false && false); //false
//或,都假才假console.log(true || true); //trueconsole.log(true || false); //trueconsole.log(false || true); //trueconsole.log(false || false); //false
- 连比要分开写
应该拆开,中间用一个&&连接。
console.log(1< 2 && 2 < 4);//true
7.变量格式转换
1.用户输入 prompt
<script type="text/javascript"> var a = prompt("请输入点什么"); console.log(a);</script>
prompt就是专门用来弹出能够让用户输入的对话框:
alert(“哈哈哈”); //直接使用,不需要变量
var a = prompt(“请输入一个数字”); // 必须用一个变量,来接收用户输入的值
2.字符串→数字 parseInt parseFloat
parseInt是一个非常多功能的东西,可以将字符串转为数字,也可以将数字取整,也可以转换进制。
console.log(parseInt("365天做10000个娃娃"));
只保留开头的数字:365
console.log(parseInt(5.8));
浮数取整:5
parseInt(值, 进制);
parseInt(110,2)
把110 这个2进制转换为 10进制
parseFloat将它的字符串参数解析成为浮点数并返回。
Number函数把对象的值转换为数字。
3.Null undefined
Null 空的 没有值 。
Undefined 未定义的 应该有值,但是没有给。
- JavaScript(一、基础知识)
- JavaScript基础知识(一)
- javascript基础知识(一)
- JavaScript基础知识(一)
- javaScript基础知识(一)
- Javascript基础知识(一)
- JavaScript基础知识(一)
- JavaScript基础知识(一)
- javascript数组基础知识(一)
- 【JavaScript】基础知识整理(一)
- javascript基础知识轨迹(一)
- 锋利的JQuery----JavaScript基础知识(一)
- 牛腩javascript总结(一)---基础知识
- html+css+javascript 基础知识(一)
- JavaScript基础知识之Array类型(一)
- JavaScript 基础知识总结归纳(一)
- JavaScript基础(一)--基础知识归纳
- JavaScript基础知识(一、二的补充)
- mybatis+mysql如何批量执行多条语句
- myeclipse中表单提交乱码问题
- WPF应用
- iOS面试笔记(1)
- 【CSS】float属性详解
- Javascript基础知识(一)
- 尚硅谷_JavaScript_学习笔记
- elasticsearch笔记_字段(名词)类型_分析过程(三)
- LeetCode 242. Valid Anagram (map使用)
- Properties
- 推荐系统-推荐冷启动问题
- 关于八进制改十进制程序的修改
- java中的equals( )和hashcode( )
- 手游客户端开发招聘要求