web开发者必须掌握:HTML、CSS、JavaScript。
1、在网页中嵌入脚本的方法。
1.1 如果网页上js代码比较多,可以创建一个js文件,然后链接到网页上。
<script src= "script.js"></script>
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:'香港'};