CSS、javascript介绍

css 作用

为网页添加样式，为了让网页更有吸引力。

让网页展示效果更好

样式层叠表

css 引入方式及等级

外链式： 单独写成样式文件，用link方式进行引入  外链式可以让页面现加美观。

内嵌式： 在网的head当中，用style来写

行内： 在标签当中写入。

行内> 内嵌式> 外链式。

单独为一个页面当中的标签设置样式，使用内嵌式或者是行内。

css 选择器

标签选择器 全局的

类选择器 这个可以是单个或者是多个

id选择器 id是唯一的。

javascript介绍

JavaScript（缩写：JS）是一门完备的 动态编程语言。当应用于HTML文档时，可为网站提供动态交互特性。JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

JavaScript数据类型

python的数据类型

字符串、元组、字典、列表、集合、数字、布尔

javascript的数据类型

字符串、object、 数组，数字，

javascript使用

使用let 或者 var 声明变量

let x = '海上升明月'   // 作用域不同， 局部使用
var y = '天涯共此时'   // 全局的

简单的使用

<!--  定义标签  起个id名为demo-->
<p id="demo"></p>
<!--  引入js, 使用script 标签  -->
<script>
    // 声明一个变量
    let x = '海上升明月'
    // 选择标签，并在标签当中插入数据
    document.getElementById('demo').innerHTML = x
</script>

javascript输出

JavaScript能够以不同方式“显示”数据：

• 使用 window.alert() 写入警告框

• 使用 document.write() 写入HTML输出

• 使用innerHTML 写入 HTML 元素

• 使用 console.log() 写入浏览器控制台

使用i**nnerHTML输出元素**

<!--  定义标签  起个id名为demo-->
<p id="demo"></p>
<!--  引入js, 使用script 标签  -->
<script>
    // 声明一个变量
    let x = '海上升明月'
    // 选择标签，并在标签当中插入数据
    document.getElementById('demo').innerHTML = x
</script>

使用w**rite输出元素**

<!--  定义标签  起个id名为demo-->
<p id="demo">1234</p>
<p id="demo1">12342</p>
<button οnclick="f()">
    点击一下
</button>
<!--  引入js, 使用script 标签  -->
<script>
    // 声明一个变量
    let x = '海上升明月'
    // 选择标签，并在标签当中插入数据
    // document.getElementById('demo').innerHTML = x
    // 弹窗效果
    // alert(x)
    // 在控制台打印
    console.log(x)
    function f() {
        let x = '12345678'
        document.write(x)
    }
</script>、

2、字符串类型

JavaScript 字符串是引号中的零个或多个字符。

let x = '海上升明月'

特殊字符

由于字符串必须由引号包围，JavaScript会误解这段字符串：

var y = "中国是瓷器的故乡，因此 china 与"China（中国）"同名。"

该字符串将被切为 "中国是瓷器的故乡，因此china 与"。 避免此问题的解决方法是，使用\ 转义字符。

反斜杠转义字符把特殊字符转换为字符串字符：

代码	结果	描述
'	'	单引号
"	"	双引号
\	|反斜杠

转义字符（\）也可用于在字符串中插入其他特殊字符。

其他六个 JavaScript 中有效的转义序列：

代码	结果
\b	退格键
\f	换页
\n	新行
\r	回车
\t	水平制表符
\v	垂直制表符

这六个转义字符最初设计用于控制打字机、电传打字机和传真机。它们在 HTML 中没有任何意义。

字符串方法

le**ngth： 字符串长度**

判断字符串的长度
console.log(x.length)

indexOf()**方法返回字符串中指定文本首次出现的索引（位置）**

// 查找字符的下标
console.log((x.indexOf('明月')));

indexOf方法都接受作为检索起始位置的第二个参数。

// 从某个位置开始，查找明月
console.log((x.indexOf('明月', 12)));

1. slice()**提取字符串的某个部分并在新字符串中返回被提取的部分。**

该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。

// 4、从某个位置开始，到某个位置结束，查找对应的字符 slice()
console.log(x.slice(6, 13))

1. re**place()**方法用另一个值替换在字符串中指定的值：

// 5、替换 replace() , 替换第一次匹配到的内容
console.log(x.replace('明月', 'mingyue'))

replace() 方法不会改变调用它的字符串。它返回的是新字符串。 默认地，replace() 只替换首个匹配 replace() 对大小写敏感。因此不对匹配 MICROSOFT

通过**toUpperCase()**把字符串转换为大写

// 7、小写转大写
console.log((yy.toUpperCase()))

通过**toLowerCase()**把字符串转换为小写

// 6、大写转小写
console.log(y.toLowerCase())

concat()**连接两个或多个字符串**

// 连接两个字符  concat
// 用第一个字符.concat(要拼接的内容)  可以是多个字符串
console.log(y.concat('+', yy))

t**rim()**方法删除字符串两端的空白符

// 去除两端的空格 trim()
console.log(y)
console.log(yy.trim())

可以通过**split()**将字符串转换为数组

// split， 切片，按照一个规则，对字符串进行分隔，分隔成列表
console.log(x.split('，'))

数值类型

数值的处理方法

t**oString()**以字符串返回数值。

所有数字方法可用于任意类型的数字（字面量、变量或表达式）：

// 数值类型
let x = 12;
// typeof 查看数据的类型
console.log(typeof x, x.toString(), typeof x.toString())

toFixed()**返回字符串值，它包含了指定位数小数的数字：**

console.log(x.toFixed(2));

toFixed(2)非常适合处理金钱。

valueOf()**以数值返回数值：**

console.log(x.valueOf())

这三种 JavaScript 方法可用于将变量转换为数字：

• Number() 方法

• parseInt() 方法

• parseFloat() 方法

这些方法并非数字方法，而是全局JavaScript 方法。

方法	描述
Number()	返回数字，由其参数转换而来。
parseFloat()	解析其参数并返回浮点数。
parseInt()	解析其参数并返回整数。

JavaScr**ipt数组**

JavaScri**pt 数组用于在单一变量中存储多个值。**

数组是一种特殊的变量，它能够一次存放一个以上的值。

数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。

创建数组

使用数组文本是创建 JavaScript数组最简单的方法。

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

访问数组元素 我们通过引用索引号（**下标号）**来引用某个数组元素。

这条语句访问 cars中的首个元素的值：

// 列表
let y = ['car', 'bird', 'bike', 'bus', 'plane']
document.querySelector('#demo01').innerHTML = y[3]

这条语句修改 cars 中的首个元素：

​

数**组是对象** 数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回"object"。

1、获取数组的长度：aList.length

document.querySelector('#demo02').innerHTML = 'y数据的长度是：' + y.length

2、用下标来操作数组中的数据：aList[0]

3、join()将数组成员通过一个分隔符合并成字符串

document.querySelector('#demo03').innerHTML = y.join('-')

4、push() 和 pop() 从数组最后增加成员或删除成员

y.push('train')
document.querySelector('#demo04').innerHTML = y[y.indexOf('train')]

5、unshift() 和shift() 从数组前面增加成员或删除成员

y.unshift('train')  // 在前面添加元素
document.querySelector('#demo05').innerHTML = y[0]
y.shift()

6、reverse() 将数组反转

console.log(y.reverse())

7、indexOf() 返回数组中元素第一次出现的索引值

y.indexOf('bird')

8、splice() 在数组中增加或删除成员

console.log(y.splice(y.indexOf('bird'), 1))
console.log(y)