JavaScript基础（第一部分）

一、

js只需要有浏览器就行

js是弱类型，java是强类型

两种方式

第一种（嵌入）

<title>无标题文档</title>

指定类型
<script type="text/javascript">

定义函数函数名
function sayHello(){

对话框文本内容
alert ("Hello ");
}
</script>
</head>

在body里面使用onload方法调用函数名

第二种（单独写一个js文件）

第一步：创建一个js文件

// JavaScript Document
//定义函数
fuction hell(){
alter("hello");
}

第二种在html文件中使用js资源，在调用函数名

<title>无标题文档</title>

使用js文件
<script type="text/javascript" src="outer.js">
</script>
</head>
调用函数名
<body οnlοad="hello();">

二、3种数据类型

（1）简单数据类型：数值型字符型布尔型

数值类型：以不带引号的数字形式出现在JavaScript程序中，进行各种数学运算

字符类型：以单引号或双引号形式出现在JavaScript的程序中，主要用于进行各种字符穿处理。转义字符：由反斜线“\”开始的特殊字符

布尔类型：只有两个值：true和false，主要用于进行数据的真假，开关逻辑运算，不能用1和0。

（2）复合数据类型：对象数组函数

（3）特殊数据类型：null undefined

null：有变量没有值，没有值但是定义了变量

undefined（未定义）：变量创建后未赋值，没有定义，

三、转义字符

\b退格符

\f换页符

\n换行符

\r回车符

四、变量和常量

常量：不能改变的数据例 1、2、

变量：在计算机内存中暂时保存的数据的地方例 vari; i=10; var count =10; var i.j;

变量可以不声明就可以直接使用k =100；

五、+号的用法

————————————————————————————————————

var x=100;数值类型

var y;字符串类型

var z;字符串类型

document指的是整个文档

document.write（"<h2>竞拍数码相机"+x+"$起价</h2>"）；

prompt：文本输入框默认值，字符串类型

y=prompt（"加多少银子","1"）；

将字符串y转换成数值类型与x相加得到z

z=x+parseFloat（y）；

文本框跳出最终出价

alter（"您最终的出价\n"+z+"$"）;

————————————————————————————————————————————————————————————————

字符串转换成数值类型的两种

parseFloat（）函数将字符串转换为folat数据

parseInt（）函数将字符串转换为int数据

如果转换失败，返回NaN值（not a number）

六、运算符和表达式

（1）算术运算符

（2）比较运算符（判断总价，加if语句）

（3）逻辑运算符

（4）嵌套

（5）switch语句

例：

定义函数函数名字
function calcu(){

取出num1和num2的值

获取表单中输入的数据

用 document.表单名.表单元素名.value

整个文档 form表单名输入框num1 用value属性获取输入框的值（取出来的是字符串）
var n1= document . f1 . num1 . value;
var n2= document.f1.num2.value;

if((n1!="")&&(n2!="")){

定义变量n1，n2（将之前的拆分开）

var price = parseFloat(n1);
var number = parseFloat(n2);

if嵌套判断是不是数字
if(isNaN(price)){
alert("竞拍价格必须是数值\n请重新输入");
return ;函数返回，不在执行后面的代码
}else{

如果n1小于0
if(price<0){
alert("竞拍价格不能小于0\n请重新输入");
return ;
}
}

if(isNaN(number)){
alert("竞拍数量必须是数值\n请重新输入");
return;
}else{

如果n2小于0
   if(number<0){
  alter("竞拍数量不能小于0\n请重新输入");
  return;
}
}

（在显示总价之前写switch）

var total = price*number; （n1*n2）

var grade=0;（折扣）

var zhifu=document.f1.pay.value;（支付方式）

switch(zhifu){

case'银行支付':

grade=0.6;

break;

case'支付宝支付':

grade=0.7;

break;

case '电话转账':

grade=0.8;

break;

case 'Q币支付':

grade=0.9;

break;

default：

alert("请选择支付方式");

return；

}

total=total*grade；（给后total重新赋值=之前的total*折扣）

由于n1,n2是从输入框获取过来的，所以都是字符串，所以要转换成数值类型才可以计算

var total =parseFloat（n1）*parseFloat（n2）；

用document（表单名、 result输入框的名字、value属性）为输入框的属性赋值
document.f1.result.value=total*grade;优惠的级别

如果total总价大于500 或者小于1000
if((total>500)&&(total<=1000)){

跳出提示框
alert("送你20Q币");
}
if((total>1000)&&(total<=2000)){
alert("送你100Q币");
}
if((total>2000)){
alert("送你无限Q币");
}

和判断是否为空时一起的

}else{
alert("购买数量或竞拍价格没有输入\n请重新输入");
}
}
</script>
</head>

下拉列表
支付方式：<select name="pay">

<option value="">请选择支付方式</option>
<option value="银行支付">中国银行</option>
<option value="支付宝转账">支付宝转账</option>
<option value="电话转账">电话转账</option>
<option value="Q币支付">Q币支付</option>
</select>
<br/>
预计总价:<input type="text" name="result" />
<br/> 单击属性（触发事件）
<input type="button" οnclick="calcu()" value="计算结果" />
</form>
</body>

七、流程控制

（1）顺序结构：一条接一条，自上而下

（2）选择结构：判断给定条件，根据不同情况做不同处理

（用于测试条件）if（条件）{JavaScript代码；}

（3）循环结构：多次重复执行同一系列的命令

JavaScript基础（第一部分）相关推荐

JavaScript基础(第一部分 -- 简介、注释、输入输出、变量、数据类型、运算符、流程控制)
前言根据视频和PPT整理 JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程视频对应资源(在视频简介里面) ...
javascript基础(第一天)
前面一句话: 挖掘知识的边界,抠的越细,深度和广度才越高,才越牛. js的性能已经达到java的五分之一 (1) == ===的区别?? null == undefined //true ...
JavaScript基础第一天
1 - 编程语言 1.1 编程编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌 ...
JavaScript基础——第一章，基础
一,Javascript的基本结构 <script type="text/javascript"><!-JavaScript语句;-> </scrip ...
javascript百炼成仙第一章掌握JavaScript基础1.6 叶老
这一日,叶小凡来到青山院附近的小山上修炼,忽然,被一块石头绊了一跤.正在他自认倒霉打算爬起来的时候,在石头缝里边发现了一枚古怪的戒指.戒指通体呈现一种枯黄色,似有一些年代悠久之感. "摔了一 ...
javascript百炼成仙第一章掌握JavaScript基础01 初入宗门
前些天发现了一个巨牛的人工智能学习博客,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转乐阳村,处于脚本大陆东部的边缘地带,民风淳朴,村民日出而作,日落而息.这一日清晨,所有村民来到村庄的门口,正 ...
javascript百炼成仙第一章掌握JavaScript基础1.8 对象的取值
"小娃娃,我现在问你,如果我事先不知道对象的某个属性叫什么,那又该怎么访问对象中对应这个属性的值呢?"叶老笑呵呵地问到. "什么什么,事先都不知道对象的属性名称,那怎么可 ...
javascript百炼成仙第一章掌握JavaScript基础1.4数据类型
修行还在继续,随着对要诀的深入,叶小凡明白,在编程世界,刚才的直接量都属于一种数据.和人有男女一样,数据也是有类型的. 在JavaScript中,数据可分为两类,分别为原生数据类型(primitive ...
javascript百炼成仙第一章掌握JavaScript基础 1.12 JavaScript运算符
题目一出,真是几家欢喜几家愁,那些复习得好的,自然可以款款而谈,可是那些本身基础就薄弱的弟子,立刻尴尬地说不出话来.甚至有的弟子已经举双手表示要放弃比赛.这些举动立刻引来了场外那些大弟子的哄笑.尤其是 ...
javascript百炼成仙第一章掌握JavaScript基础1.7 对象数据类型
听到这句话,叶小凡一顿,动作停止了下来. 对象数据类型,这在JavaScript基础修炼要诀中只是提了一下,但是并没有细讲,这个对象数据类型一直以来都深深地勾起了叶小凡的好奇心. "小娃娃, ...

JavaScript基础（第一部分）

JavaScript基础（第一部分）相关推荐

最新文章

热门文章