Web_8 Javascript（不完整...）

1 基本语法

<script src="main.js"></script> //引入js文件
//这是一句注释

2 数据类型

//数据类型-Number
123
1.2
-
1
1e3 //1000
1.2e4 //12000
NaN // not a number
Infinity //无穷大

//String 字符串
'王花花';
"王花花";
'王花花说："你好"';
'he\'s'; //转义字符
'啊' +
'祖国'; //换行
`啊
祖国` //换行

//boolean 布尔值
true
false

//Array 数组
['a', 'b', 1, 2, 3]
[
    '苹果',
    '香蕉',
    '菠萝',
    1,
    true
]

//Object 对象

var result = {
    title: '如何減肥？',
    desc: '少吃，多动'
}
result.title;

3 变量

var box = 'huahua';
box = 1;
box = [] // Object

let bag = 'yo';

console.log(box);
console.log(typeof box);
console.log(box.length);

4 控制流：if & else

var isAdmin = true;

if(isAdmin){
    console.log('他是管理员');
}else{
    console.log('他是管理员');
}

if(今天是礼拜一){
    ...
}else if(今天是礼拜二){
    ...
}else if(今天是礼拜三){
    ...
}else{
    ...
}

5 控制流：switch

var day = 3;

switch(day){
    case 1:
    //...
    console.log('今天吃牛肉面');
    break;
    case 2:
    //...
    console.log('今天吃凉皮');
    break;
    case 3:
    //...
    console.log('今天吃干锅');
    break;
    default:
    console.log('今天什么也不吃');
}

6 运算符

1+1;//2
'1' + '1'; //'11'

//- *

//%
10%3; //1
11%3;  //2

// ++自增
var loginCount = 0;
//loginCount = loginCount + 1;
console.log(++loginCount); //1

var loginCount = 0;
console.log(loginCount++); //0
// --自减

//> < >= <=
console.log('1 > 2:',1>2);

// = 赋值
var a = 1;

//==判断值是否相等
console.log('1 == 2:',1==2);
console.log('1 == 1:',1==1);
console.log('1 >= 1:',1>=1);

// === 判断是否严格相等（包括类型相等）
console.log('1 === 1:',1 === 1);
console.log("'1' === 1:",'1' === 1);

//!=
console.log('1 != 2:',1 != 2);

// && ||

var a = false,
    b = true;

if(a && b){
    console.log('转账成功！');
}else{
    console.log('转账失败！');
}

if(a || b){
    console.log('转账成功！');
}else{
    console.log('转账失败！');
}

7 循环：for

var result =[
    '百度一下，你就知道',
    '百度百科',
    '百度网盘',
    '百度视频'
];
for(var i = 0; i < result.length;i++){
    console.log(result[i]);
}

8 循环：while

var attempt =0;
while(attempt < 5){
    //继续尝试...
    attempt++;
    console.log(attempt);
}
console.log('loop stopped');

9 函数

function 做饭(){
    //买菜
    //洗菜
    //切菜
    //炒菜
}

做饭();
//...
做饭();

function buy(钱){
    if(!钱){
        alert('报警');
    }else{
        alert('您慢走');
    }
}

var  a =1;  //a是全局变量,相当于window.a = 1;
function fun(){
    var b =2; //b是局部变量
}
console.log(a); // 1 
console.log(b); //b is not defined

function 买买买(钱){
    if(!钱){
        return '钱呢？！';
    }
    return '您走好！';
}

10 对象

//javascript对象 包括属性和方法

//1、内置对象：如Date Array String等 
//访问对象的属性
var message = "hello world";
var x = message.length;
console.log(x); //11
//访问对象的方法
x = message.toUpperCase();
console.log(x);
/*
//2、自定义对象
//a. 创建对象实例
var person = new Object();
person.firstname='John';
person.lastname = 'Doe';
person.age = 18;
person.eyecolor = 'blue';
*/
//同 person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

//b. 使用对象构造器-使用函数来构造对象
//先用函数构造一个对象构造器
function person(firstname,lastname,age,eyecolor){
    this.firstname = firstname; //this就是指这个person对象
    this.lastname = lastname;
    this.age = age;
    this.eyecolor = eyecolor;
}
//调用这个函数构造对象
var student = new person('John','Doe',18,'blue');
//document.write(student.firstname);
var x;
var txt = '';
//循环遍历对象的属性
for(x in student){
    txt = txt + student[x] + ',';
}
document.write(txt);

11 window对象：alert confirm和prompt

alert('1');
var r = confirm('您确定要删除此文件吗？');
console.log(r);
var n = prompt('你叫什么名字？');
alert('你好，'+ n);
console.log('你好,'+ n);
console.log('你好,', n);

12 window对象：setTimeout setInterval和clearInterval

setTimeout(function(){ //当2000ms的时间到了后，执行function里的内容
    console.log('2s到了');
},2000);

/*
var count = 0;
setInterval(function(){ //每2000ms就执行function里的内容
    count++;
    console.log(count);
},2000);
*/


var count = 0;
var timer = setInterval(function(){ //每2000ms就执行function里的内容
    count++;
    if(count > 3){
        clearInterval(timer);   //当count到3时就清除计时，timer类似于这个计时进程的id
        return;                 //并不在往下执行，否则会打印4次
    }
    console.log(count);
},2000);

setTimeout(function(){ 
    console.log('时间到了'); //第三个打印
},0);
console.log('yo'); //第一个打印
console.log('haha'); //第二个打印

13 JS Html DOM

image.png
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>

<body>

    <p id="p1">ha</p>
    <img id="image" src="#" alt="">
    <div id="box" style="height:100px;width:100px;background:pink;"></div>

    <script>
        //直接向 HTML 输出流写内容
        document.write(Date());
        //改变 HTML 元素的内容
        document.getElementById('p1').innerHTML = 'hello world';
        //改变 HTML 元素的属性
        document.getElementById('image').src = '../img/eee.jpg';
        //改变 HTML 元素的样式
        document.getElementById('p1').style.color = 'blue';

        //HTML 事件的例子：
        //当用户点击鼠标时
        document.getElementById('p1').onclick = function () {
            this.style.color = 'red';
        }
        //当网页已加载时
        //<body onload="checkCookies()">
        //当图像已加载时
        //当鼠标移动到元素上时
        document.getElementById('image').onmouseover = function(){
            this.src = '../img/bn.jpg'; 
        }
        document.getElementById('image').onmouseout = function(){
            this.src = '../img/eee.jpg'; 
        }
        document.getElementById('box').onmousedown = function(){
            this.style.background = 'blue'; 
        }
        document.getElementById('box').onmouseup = function(){
            this.style.background = 'pink'; 
        }
        //当输入字段被改变时
        //当提交 HTML 表单时
        //当用户触发按键时
        //点击元素出发监听事件
        document.getElementById('box').addEventListener("click",function(){
            alert("hello world");
        })

    </script>

</body>

</html>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,386评论 6赞 479
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,939评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,851评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,953评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,971评论 5赞 369
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,784评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,126评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,765评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,148评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,479评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,080评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2赞 343

推荐阅读更多精彩内容

  • 2018
    我们先大致来了解一下javascript的内容，然后由浅入深的来学习，进一步提升对WEB前端技术的兴趣。 如何插入...
    yezi1004阅读 1,286评论 0赞 0
  • JavaScript
    一、JS前言 （1）认识JS 也许你已经了解HTML标记(也称为结构)，知道了CSS样式(也称为表示)，会使用HT...
    凛0_0阅读 2,752评论 0赞 8
  • 扫盲HTML BOM
    HTML BOM（Javascript window） 浏览器对象模型 (BOM) 使 JavaScript 有能...
    Camilar小汪汪阅读 1,519评论 0赞 1
  • 电子商务网站开发与建设
    概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,095评论 0赞 3
  • 七、BOM
      ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么...
    霜天晓阅读 867评论 0赞 0