一、模板字符串
var str=`hello`模板字符串
模板语法`${变量}`
${简单运算}
<script>
// +号连接字符
function test2(){
var a=10
var b=20
var c=a+'+'+b+'+'+'='+(a+b)
document.write(c)
}
test2()
//语法： ${简单运算}
// 模板语法`${变量}`
function test3(){
var a=10
var b=20
var c=`${a}+${b}=${a+b}`
document.write(c)
}
test3()
function test4(){
var str= '<div>'+
' <h2>模板字符串</h2>'+
'<p>作用</p>'+
' <p>拼接字符串</p>'+
'</div>'
document.write(str)
}test4()
//语法： ${简单运算}
// 模板语法`${变量}`
function test5(){
var str=`
<div>
<h2>模板字符串</h2>
<p>作用</p>
<p>拼接字符串</p>
</div>
`
document.write(str)
}test5()
</script>模板字符串案例：
利用js实现一个动态的表格
方法一：
js编程实现表格显示
1.静态表格
3.学生数据与表格关联
<style>
table {
width: 1000px;
margin: 50px, auto;
}
table tr {
text-align: center;
line-height: 30px;
}
table,
th,
tr,
td {
border-bottom: 1px solid gray;
}
</style>
<script>
var students = [
{ number: 1001, name: "jack", score: 98, gender: "男" },
{ number: 1002, name: "rose", score: 95, gender: "女" },
{ number: 1003, name: "小丽", score: 85, gender: "女" },
{ number: 1004, name: "lucy", score: 75, gender: "女" },
]
// 先设置一个空字符串
var trStr = ''
// 利用forEach遍历数组
students.forEach(function (item, index) {
trStr = trStr + `<tr>
<td>${item.number}</td>
<td>${item.name}</td>
<td>${item.score}</td>
<td>${item.gender}</td>
</tr>`
})
var str = '<table>' + trStr + '</table>'
document.write(str)
</script>
方法2：利用map和join实现表格
<script>
// map映射出一个新的数组，将遍历后的元素放在里面
var trArr=students.map(function(item){
return `<tr>
<td>${item.number}</td>
<td>${item.name}</td>
<td>${item.score}</td>
<td>${item.gender}</td>
</tr>`
})
// 用join将元素拼接在一起
var trStr=trArr.join('')
var str=`<table>${trStr}</table>`
document.write(str)
</script>二、严格模式
1.变量在未声明的情况下也可以使用，不报错
2.函数名可以重复
开启严格模式
<script>
'use strict'//严格模式
num=100 //给变量赋值
console.log('num',num)
function fun(m,m){
console.log('m',m,'m',m)
}
fun(100,200)
</script>未加'use strict'
可以正常运行不报错
加了之后出现错误：Uncaught SyntaxError: Duplicate parameter name not allowed in this context
'use strict'使JavaScript的代码更加严谨化
练习：1.编写一个方法，求一个字符串的字节长度。 一个英文字符占用一个字节，一个中文字符占用两个字节
<script>
function testUnicode() {
var str = 'javascript编程实现学生表格显示'
var count = 0
for (var i = 0; i < str.length; i++) {//循环遍历字符串
if (str.charCodeAt(i) > 255) {//当前字符是中文还是英文
count += 2
} else {
count += 1
}
}
console.log('字节长度为 :',count)
}
testUnicode()
</script>2.统计字符串中不同字符的出现次数?
'abcdefabcadefkmmkggcc'
分析：
Object{
a:3
b:2
c:4
d:2
}
计数器：
count=0
count++
<script>
function getCountString(){
var str='abcdefabcadefkmmkggcc'
var obj={}//存储各个字符垂下那个次数(i)
// 循环遍历字符串
for(var i=0;i<str.length;i++){
var chars=str.charat(i)
// 判断obj对象中是否已经有该字符
// 当对象属性是变量时，使用中括号访问
if(obj[chars]){
obj[chars]++
}else{
obj[chars]=1
}
}
// 遍历对象for-in
for(var key in obj){
console.log('key:',key+' value: ',obj[key])
}
}getCountString()
</script>三、Math数学对象
javascript内置对象
1.对象做什么，有什么功能
Object对象
存储名称值对的集合
Array数组
存储一系列有序数据的集合
String 字符串对象
2.创建方式
var obj=nae Object()
var obj={}
obj.name="jack"
var arr=new Array()
var arr=[]
arr.length
3.属性
length
4.方法
Math 数学对象
1.处理数学问题
2.创建方式
不需要使用构造函数，它比较特殊直接使用就可以，这样的对象成为类对象
Math.方法()
3.方法
Math.random（）随机数
<script>
function test1(){
var r=Math.random()//0~1 包含0，不包含1
console.log(r)
}
test1()
</script>
Math.ceil() 向上取整
Math.floor() 向下取整
Math.round() 四舍五入
<script>
// 取整的方法
function test2(){
var num=10.1
var num1=Math.ceil(num)//向上取整11
var num2=Math.floor(num)//向下取整10
var num3=Math.round(num)//四舍五入10
console.log(num1)
console.log(num2)
console.log(num3)
}
test2()
</script>
Math.abs() 取绝对值
<script>
function test3(){
var num=-9
var num1=Math.abs(num)//求绝对值
console.log(num1)
}
test3()
</script>
Math.max() 取最大值
Math.min() 取最小值
<script>
function test4(){
var m=Math.max(37,21,35,47,65,99,82)//求最大值
var m1=Math.min(37,21,35,47,65,99,82)//求最小值
console.log(m)
console.log(m1)
}
test4()
</script>案例：
分析：
0~10 Math.floor(Math.random()*10)
10~20 Math.floor(Math.random()*10+10)
20~30 Math.floor(Math.random()*10+20)
30~40 Math.floor(Math.random()*10+30)
40~50 Math.floor(Math.random()*10+40)
50~80 Math.floor(Math.random()*10+50)
m~n Math.floor(Math.random()*(n-m)+m)
<!-- 生成指定范围随机数 m~n之间的随机数 -->
<script>
function getRandom(x,y){
var n=Math.max(x,y)
var m=Math.min(x,y)
return Math.floor(Math.random()*(n-m)+m)
}
var r=getRandom(20,30)
document.write(r)
</script>分析：
1.0~10随机数
Math.random() 0~1
Math.random()*10
2.循环10000次
<script>
var obj = {}//记录随机数出现的次数，名称：随机数 值：次数
for (var i = 0; i < 10000; i++) {
var r = Math.floor(Math.random() * 10)//0~9
if (obj[r]) {
obj[r]++
} else {
obj[r] = 1
}
}
console.log(obj)
</script>四、进制之间的转换
进制与进制的转换
进制
计数的一种方式，现实生活中一般十进制计数
十进制 0 ~ 9
+1
10
满十进一
二进制 0 ~ 1 计算机使用二进制
满二进一
10 11 100
+1
---------
100
2 3 4
八进制 0 ~ 7
满八进一
10 11
8 9
计算机区分(前面加0)
010
十六机制 0 ~ 9 A B C D E F
满十六进一
计算机区分(前面加0x)
0x10
<script>
function test1(){
var num=010
var num1=0x11
console.log(num,num1)
}
test1()
</script>进制转换
十进制转其他进制
var num=100
->转二进制
num.toString(2)
<script>
function test2(){
var num=100
console.log('二进制：',num.toString(2))
console.log('八进制：',num.toString(8))
console.log('十六进制：',num.toString(16))
}test2()
</script>其他进制转十进制
parseInt(100,2) -> 二进制转十进制
parseInt(100,8) -> 八进制转十进制
<script>
function test3(){
var num=100
console.log('二转十进制：',parseInt(num,2))
console.log('八转十进制：',parseInt(num,8))
console.log('十六转十进制：',parseInt(num,16))
}test3()
</script>
