JS基础
web包括:html css javascript(交互)
html css 形式语言
javascript 逻辑语言
客户端的脚本语言
javascript 基础语法
javascript Dom操作
JavaScript基础
写法分类
1.内联
写在标签里面，以事件的属性表现，属性名就是事件属性名
例子：
<button onClick="alert('点我干嘛')">
按钮
</button>
2.内嵌(重点在内容)，
写在html文件里面，以标签的形式表现，标签名为script
script标签里面的代码会自己执行，从上到下
格式：
<script type="text/javascript" >具体js代码</script>
例如：
<script>
alert("发什么什么了");
</script>
3.外部引用(没有内容只有属性)，
写在html文件里面，以标签的形式表现，标签名为script
格式：
<script type="text/javascript" src="js文件"></script>
javascript 基础语法
1.注释
// 单行注释
或/* */ 多行注释
关键字
在代码里也有特殊含义的，如：
var，do，new，if等
标识符
所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是下列格式规则组合起来的一或多个字符：
1.第一字符必须是一个字母、下划线(_)或一个美元符号($)。
2.其他字符可以是字母、下划线、美元符号或数字。
3.不能把关键字、保留字、true、false和null作为标识符。
变量
定义 赋值，使用
先定义再赋值
通用类型var，可以随便存储其它类型的值，可以直接使用，不用定义，但习惯上定义。
定义变量：var a；所有变量定义都用var定义，var是通用的可变类型。
例如：
var name = '张三';//定义并赋值 var nn; nn = 'lisi'; nn = '张三lisi';
alert(nn);
区分大小写
2.数据类型 数据类型非常重要
强类型语言 定义的时候必须指名数据类型是什么
弱类型语言 定义的时候不用指明数据类型 全部自动转换
字符类型
例如：var name="qwer";
数字类型
例如：name=123;
boolean布尔类型
null类型：空对象类型
undefined未定义类型
3. 运算符
算数运算符
+ - * / %取余 ++自增 --自减
+运算符
字符串拼接
用于把文本值或字符串变量加起来（连接起来）。
如需把两个或多个字符串连接起来，请使用+运算符
实例：
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮创建及增加字符串变量。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
document.getElementById("demo").innerHTML=txt3;
}
</script>
</body>
</html>
结果为：
要想在两个字符串之间增加空格，需要把空格插入一个字符串之中：
代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮创建及增加字符串变量。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;
document.getElementById("demo").innerHTML=txt3;
}
</script>
</body>
</html>
或者把空格插入表达式中：
代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮创建及增加字符串变量。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
document.getElementById("demo").innerHTML=txt3;
}
</script>
</body>
</html>
结果为：
对字符串和数字进行加法运算
两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串，如下实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮创建及增加字符串变量。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x=5+5;
var y="5"+5;
var z="Hello"+5;
var demoP=document.getElementById("demo");
demoP.innerHTML=x + "<br>" + y + "<br>" + z;
}
</script>
</body>
</html>
结果为：
“1”+1+1 =>"111"
在字符串里面加内容：
例子：
在“lisi” “wangwu”中间加“zs”
var name = "zs"; "lisi"+name+"wangwu"
在
'<div id=""></div>'
双引号里面放
var id="zs" 的字符串
结果应为：
var id="zs"; '<div id="'+id+''"></div>'
在
"<div id=''></div>"
的单引号里面加
var id="zs"
结果：
var id="zs";
"<div id='"+id+"'></div>"
利用方法，结合+运算，进行字符串拼接
例子;
var name ="张三";
var str="<div onClick='show(\""+name+"\")'></div>";
console.log(str);
结果：
赋值运算符
= += -= *= /=
例如;a +=2; =>a=a+2;
条件运算符
< > <= >= != ==判断值相等 ===判断值和数据类型相等
逻辑运算符 && 并且，两者都为真才输出真
|| 或者，，两者至少一个为真，就为真
! 取反，真的反义
三目运算符? true:false
非零的数字为1，真true
零为假false
和if判断语句差不多，算是简写的if语句
4.控制语句
条件 判断
If
格式：
If(表达式)｛
代码
｝else if(表达式){
代码
}
if例子：
输入一个数判断是在0到100之间：
js代码：
var number = prompt("输入一个数");
if(number>=0&&number<=100){
alert("是0~100之间的数");
}else{
alert("不是0~100之间的数");
}
效果为：
例子2：
输入分数判断是否及格，如果超过80分则输出 “你学的不错，值得表扬！”，如果在50—60分之间则输出“就差一点点，再加把劲”，如果小于50则输出“使劲努力，不要偷懒！”
js代码：
var fenshu=prompt("输入你的分数");
if(fenshu>80){
alert("你学的不错，值得表扬！");
}
else if(fenshu>=50&&fenshu<=60){
alert("就差一点点，再加把劲");
}
else if(fenshu<50){
alert("使劲努力，不要偷懒！");
}
else{
alert("错误");
}
效果为;
例子3：
输入性别，身高体重，判断体重是否为标准体重：
js代码:
// JavaScript Document
//输入性别
var sex = '';
window.onload = function(){
sex=prompt("请输入你的性别");
panDuan();//调用判断方法
}
//对输入男或者女或者其他字符的判断
function panDuan(){
if(sex=="男"||sex=="女"){
sgTz();//如果是男或者女，调用身高体重方法继续输入身高体重
}else{
alert("错误");//输入内容不对则返回错误
xingbie();//调用性别方法，判断输入性别
}
}
//性别
function xingbie(){
sex=prompt("请输入你的性别");//重新输入性别
panDuan();//调用判断，判断是否输入的内容正确
}
//身高体重
function sgTz(){
var shengao=prompt("请输入你的身高");
var tizhong=prompt("请输入你的体重");
//判断体重
if("男"==sex&&tizhong-shengao+100<=3&&tizhong-shengao+100>= -3){
alert("你的体重为标准体重");
}
else if("女"==sex&&tizhong-shengao+110<=3&&tizhong-shengao+110>= -3){
alert("你的体重为标准体重");
}
else{
alert("你的体重不是标准体重");
}
}
结果显示：
switch
switch(){
case()：
break；
default：
break；
}
例子：
var day = 1;
switch(day){
case 1:
alert(1);
break;
case 2:
alert(2);
break;
case 3:
alert(3);
break;
default:
alert("没有匹配到");
break;
}
结果：
switch里面的值和case里面的值匹配，匹配到，往下找break，
有就退出，没有就继续往下找，直到结束，
循环：
for循环
for（1初始化变量;2条件判断;2变量改变）{
4循环体
}
i是循环变量
顺序： 1->2(不满足)->end
1->2(满足)->4->3->2
1->2(满足)->4->3->2(不满足)->end
1->2(满足)->4->3->2(满足)->4->3->2......
例子：
for(var i =0;i<10;i++){
console.log(i);
}
在100到999之间有哪几个水仙花数：
js代码：
var a=0;//定义个数
//循环判断是否为水仙花数
for(var i =100 ;i<999 ;++i){
var x=parseInt(i/100);//取三位数的百位数
var y=parseInt((i/10)%10);//取三位数的十位数
var z=parseInt(i%10);//取三位数的个位数
//定义水仙花数
var m="";
m=parseInt(x*x*x + y*y*y + z*z*z);
if(m == i){
console.log(i);//如果循环数字等于水仙花数，输出
++a; //相等，就个数加一
}
}
alert(a);//输出水仙花个数
结果：
100节楼梯，0-49节 分数等于节数 50以后(包括50)每节10分输入节数 得出分数:
js代码：
var i;
var jieshu=prompt("输入");
var fenshu=0;
for(i=0;i<=jieshu;++i){
if(i>=100){
break;
}
if(i<50){
fenshu=i+fenshu ;
}else{
fenshu=fenshu+10;
}
}
alert(fenshu);
结果：
0~100之间的数字和为：
js代码：
var i;
var sum=0;
for(i=0;i<=100;++i){
sum +=i;
}
console.log(sum);
结果为：
100以内与7相关的数：
js代码：
var i;
for(i=1;i<100;i++){
if(7==parseInt(i%10)||7==parseInt((i/10)%10)||(i%7)==0){
console.log(i);
}
}
结果：
100元购物卡，牙刷5元，香皂2元、洗发水15元 100元正好花完有多少种可能：
js代码：
var ci=0;
for(var a=0;a<=20;a++){
for(var b=0;b<=50;b++){
for(var c=0;c<7;c++){
if(a*5+b*2+c*15==100){
ci+=1;
console.log("买牙刷"+a+"支，香皂"+b+"支，洗发水"+c+"瓶");
}
}
}
}
console.log("有"+ci+"种可能");
结果：
while循环：
while（）{
}
例子：
var i=0;
while(i<100){
}
do while循环：
do{
}while();
for和while的区别：
for：循环次数确定
while：循环次数不确定
死循环：
while(true){
}
for（ ; ;）{
}
break,跳出整个循环，结束
control，跳过本次循环
break做标记终止循环：
标记：for（ ）{
break 标记；
}
5.数组
6.方法
function show(name){
alert(name);
}
show("张三"); /*方法的调用 */
弹窗：
alert（"发生什么"）；//告警框
confirm（"确定删除吗"）；//选择框，有返回值
prompt（"输入内容"）有返回值用户输入什么
例子：
利用弹窗制作简易计算，让用户输入两个数和一个运算符（加减乘除），输出结果
js代码：
var firstname = parseInt(prompt('请输入第一个数'));
var secondname =parseInt( prompt('请输入第二个数'));
var fuhao = prompt('请输入运算符');
var jieguo;
if(fuhao =="+"){
jieguo = firstname + secondname ;
alert(jieguo);
}
if(fuhao =="-"){
jieguo = firstname - secondname ;
alert(jieguo);
}
if(fuhao =="*"){
jieguo = firstname * secondname ;
alert(jieguo);
}
if(fuhao =="/"){
jieguo = firstname / secondname ;
alert(jieguo);
}
结果例如：
判断输入三位数是否是水仙花数
js代码：
var a=parseInt( prompt("请输入三位数"));
var x=parseInt(a/100);
var y=parseInt((a/10)%10);
var z=parseInt(a%10);
var m="";
m=parseInt(x*x*x + y*y*y + z*z*z);
if( a==m){
alert("是水仙花数");
}else{
alert("不是水仙花数");
}
运行结果：
浙公网安备 33010602011771号