一、JavasScript基础

web开发者必须掌握:HTML、CSS、JavaScript。
1、在网页中嵌入脚本的方法。

1.1 如果网页上js代码比较多,可以创建一个js文件,然后链接到网页上。




1.2 在js中编写代码,链接到网页上 。

//在网页上弹出提示框
alert("hello ~ 大帅");

//  在控制台打印文本信息
var words = "hello~大帅~";
console.log(words);

var yourName = "你的名字是大帅";
console.log(yourName);

1.3 注释


单行注释://
多行注释:
/*

*/
美观写法:
/**
 * 每一行要注释的东西
 *
 *
*/

1.4 变量
声明一个变量

var band;
// 多个变量
var band,ablum;
// 直接赋值 变量名区分大小写
var band1 = "beyond";
// band1 = "dashuai";
//驼峰命名方法
var userName;

1.5 数字类型 、 文字 、真与假

// 定义一个变量 不赋值 那么他是undefined类型
var fullName;(undefined)
fullName + 2 ----> 返回NaN 表示不是number类型
var fullName

1.6 文本字符串的处理

字符串有一些方法:可以把字符串中的大小写进行转换、可以获取字符串中的长度、指定位置的字符等


var words = '大帅在操场跑步'
// 字符串的长度
words.length

// 第0个字符串
words.charAt(0)

// 最后一个字符串
words.charAt(words.length - 1)

// 获取文字的索引
words.indexOf('帅')

// 如果字符串中有相同的文字 ,可以获取最后一个文字的索引
words2.lastIndexOf('帅')

// 获取指定范围的字符串
words.substring(0,2) ––>大帅 包含第0个 不包含第二个

// 替换指定文字
words.replace('大帅','白雪')

// 将字符串切割成数组
var word3 = '大帅,在跑步' 
var newWords = word3.split(',')
// 获取数组第0个元素
newWords[0]

1.7 数组

一系列有序的数组,一种特殊类型的Object


// 定义一个空白的数组
var trackCD = [];

// 查看数组的类型 是一个对象类型
typeof(trackCD) ––>"object"

// 数组填充数据
trackCD = ['大帅','白雪','王子','公主'];

// 添加新元素
trackCD[4] = 'hello' 

// 用push添加元素,默认添加到最后 不用担心索引问题
trackCD.push('you','me')

// 用pop删除数组最后一个元素  shift删除第一个元素
trackCD.pop()  
trackCD.shift()

// delete 删除指定索引的元素内容,不会删除索引  splice彻底删除数组指定元素
delete trackCD[2]
trackCD.splice(2)

// 合并两个数组
var tracks = trackCD.concat(trackCD2)
trackCD2中的元素会加到第一个数组的后边

1.8 流程控制 if else


// 三个等号判断是否相等
var weather = '阴天';

if (weather === '晴天'){

alert('心情不错')

}else {
alert('心情糟糕')
}

// && 并且 || 或者
var temperature = '26';
if (weather === '晴天' || temperature === '26') {

alert('心情不错')

}else {
alert('心情糟糕')
}

1.9 流程控制 switch

switch (weather) {
        
    case '阴天' :
        alert('忧郁');
        break;
    case '晴天':
        alert('心情不错');
        break;
    default:
        alert('心情糟糕');
        break;   
        
}

1.10 流程控制 while

打印出小于10的数

var i = 0;
while (i<10){
  i++;
    console.log(i);
    // 打印1-10
}

打印1-10之间的奇数 1 3 5... 可以用除以2是不是余数是不是0 用%

var i = 0;
while (i<10){
  i++;
    if(i%2===0){
        // 继续下一次的循环 跳过当前循环 进行下一次循环
        continue;
    }
    console.log(i);
    // 打印1-10
}

1.11 流程控制 for

打印0-9

for (var i = 0;i < 10;i ++) {
console.log(i);
    
}

打印星期一––––星期日

var weekArr = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
for (var i = 0 ; i < weekArr.length;i ++) {
    console.log(weekArr[i]);
    
}

1.12 函数

函数 在应用里重复调用一段代码

function 函数名 (参数1,参数2,...) {
// 参数1、参数2、属于形参 调用的时候参数为实参
函数要做的事情

}

1.13 定义一个函数

没参数

function alertMessg (){
    
    alert ('hello');
    
}

alertMessg();

有参数 messageStr 为形参 你好 为实参

function alertMessg (messageStr){
    
    alert (messageStr);
    
}

alertMessg('你好');

1.14 函数表达式

//函数表达式 匿名函数 

var alertMsg = function (msgStr) {
    
    alert (msgStr);
}

alertMsg ('ssss');

1.15 变量的范围

在函数内部可以访问外部的变量
但是在外部不能访问函数内部的变量

1.16 对象 Object

// 创建对象
var beyond = {};
beyond.formedIn = '1983';
beyond['foundedIn'] = '香港';
console.log(beyond);

// 在创建时可以设置属性
var beyond = {formedIn:'1983',foundedIn:'香港'};

你可能感兴趣的:(一、JavasScript基础)