day25 js基础

2018-08-17 本文已影响0人跟我念一遍

1.js是javaScript的缩写，是一门脚本语言，专门用来负责网页上的行为（可以直接写到网页中）

2.在哪儿写js代码

a.可以写在script标签中（理论上script标签可以放到html文件中的任何位置，实际开发的时候一般放在head或者body中）
b.写到标签的事件属性中（例如：onlick）
c.写到外部的js文件中（.js）

3.js在网页中能做什么事情

a.在网页的不同位置插入html代码
b.修改某个标签内容
c.修改标签的样式

4.怎么写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--导入外部的js文件-->
        <!--<script src="js/index.js"></script>-->
        <script src="js/07-数据类型.js" ></script>
        <!--一个html中可以在多个位置插入script标签-->
        <script type="text/javascript">
            //在这儿写js代码
            function insertP(){
                document.write('<p>python</p>') 
            }
        </script>
    </head>
    <body>
        <h1>千锋的所有学科</h1>
        
        <button onclick="window.alert('按钮被点击')">按钮</button>
        
        <!--<button onclick="document.getElementById('hh').innerHTMl.'千锋的所有老师'">修改标签</button>
        
        <button onclick="document.getElementById('hh').style.color = 'red'>修改样式</button>-->
        <!--往html中插入内容-->
        <script type="text/javascript">
            for(var i=0;i<10;i++){
                document.write("<p>施工队</p>")
            }
        </script>
    </body>
</html>

01js基础语法

1.js中的注释

//这是单行注释

/*
 * 这是多行注释
 */

2.语句

一条语句结束需要加分号
一行写多条语句必须使用分号隔开

3.js没有缩进问题，用{}表示一个块
4.基本数据类型

Number（数字），String（字符串）
Boolean（布尔类型） Array（数组）---列表，Object（对象）---字典
null，undefined

//在控制台打印括号中的内容，功能和python中的print
console.log('hello world');
console.log('你好，python！')

5.字面量

//数字字面量
89;
100;
10.34;
3e8;

//字符串字面量
'abc';
"abc";

//布尔字面量
true;
false;

//数组字面量
[1,2,'ban',4,true];
[];

//对象的字面量（对象的key值又是属性，不用加引号）
//{a:20,b:"abc"}
var dict = {a:'abc',b:'hh'}
console.log(dict.a,dict['b'])

6.标识符

//使用标识符来命名
//a.有字母，数字，下划线_和$组成，数字不能开头
var huhu9_$;

//b.不能关键字
//var for

//c.大小写敏感，y和Y不一样

//d.规范：1.见名知意

02变量的声明

// 在js中可以通过声明变量来保存数据
/*
 * 1.语法
 * var 变量名；
 * var 变量名=初值；
 * 说明 ：var是关键字；
 *      变量名：标识符，不能随意使用_或者$开头；驼峰式命名规则（第一个单词首字母小写，后面每个单词首字母大写）
 */

//声明变量
var userName;
//给变量赋值
userName = 'wang';
console.log(userName)

var score = 100
console.log(score)

//同时声明多个变量
var name,age,sex;
var name1='abc',age1=18,sex;

//一个变量可以存储任意类型的值，声明变量的时候，变量没有赋值，默认是
undefined
var a = 'abc';
a = 100;

a = score

03运算符

1.数学运算符：+，-，*，/，%，++，--

//a._,-,*和数学中的求和，求差以及求成绩是一样的
var a = 10+20;
var b = 20-10;
var c = 10*20;
var d = 7%2;


//b.除/和数学中的除一样
var e = 5/2;
console.log(a,e);

//++，--（单目运算符）
/*
 * 语法：变量++/变量--    ++变量/--变量
 * ++：自加1
 * --：自减1
 */

var a1 = 10;
var b1 = 10;

a1++;
++b1;

console.log(a1,b1); //11,11

a1--;
--b1;

console.log(a1,b1) //10,10


var c1 = a1++   //   ++,-- 写到后面的时候，先赋值，再自加、自减
var c2 = ++b1   //   ++，--写到前面的时候，先自加/自减，再赋值
console.log(c1,c2)

2.比较运算符：>,<,==（相等）,!=,<=,>=,===（完全等号）,!==,>==,<== 结果是布尔值

console.log(10>20)
console.log(10<20)

// ==：判断值是否相等
console.log(5==5)
console.log(5=='5')

// ===：判断值和类型是否相等
console.log(5===5)   // true
console.log(5==='5') // false

console.log(5!=5,'5'!=5) //false，false
console.log(5!==5,'5'!==5)

console.log('==============')

3.逻辑运算符：&&：（与运算），||：（或），！：（非）

console.log('与：',true&&true,true&&false)
console.log('或：',true&&false,false||false)

4.赋值运算符：=,+=,-=,*=,/=,%=

赋值运算符的左边必须是变量
和python的语法一样

var a = 100;
a += 10; // a = a +10
console.log(a)

5.三目运算符？：

/*
 * a.格式：
 * 条件语句？值1：值2；
 * 判断条件语句的结果是否是true，如果是true，name表达式的结果就是值1，否则是值2
 */
var b = 10>20:?10:20;
console.log(b)

//求两个数之间的最大值
var a1 =80
var a2 =100
console.log(a1>a2?a1:a2)

6.运算符的优先级和python基本一样。可以通过括号来改变运算顺序

04分支结构

//js的分支结构有两种：if语句，switch语句
/*if语句
 * if（条件语句）{满足条件要执行的代码块}
 */

var age = 18
if (age>=18){
    console.log('成年')
}

//b.if(条件){语句块1}else{语句块2}
if(age>=18){
    console.log('成年')
}else{
    console.log('未成年')
}

//c.if-else if -else(相当于python中的if-elif-else)
if(age<18){
    console.log('未成年')
}else if(age<40){
    console.log('青年')
}else{
    console.log('老年')
}

2.switch语句

/*
switch(变量){
    case 值：
        语句1；
        break；
    case 值2：
        语句2；
        break；
    ...
    default：
        语句3；
        break；
}
执行过程：使用变量的值依次和后边每个case后面的值进行判断，看是否相等（是否完全相等）。
如果相等就执行那个case后面对应的语句。
如果前面每个case后面的值都和变量的值不相等，就执行default后面的语句。
*/

var score = 10;
switch (score){
    case 1:
        console.log('素质极差')
        break;
    case 2:
        console.log('素质一般')
        break
    case 10:
        console.log('素质极好')
        break;
    default:
        console.log('没有素质')
        break;
}
console.log('+++++++')

//10分制分数：0-5：不及格，6-7：及格 8-9：良好  10：优秀
score = 9
switch(score){
    case 0:
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        console.log('不及格');
        break;
    case 6:
    case 7:
        console.log('良好');
    case 8:
    case 9:
        console.log('良好');
        break;
    case 10:
        console.log('优秀');
        break;
}

05循环结构

js中的循环分为for循环和while循环

1.for循环

a.for-in(和python中的for循环一样)

var arr1 = [1,2,'abc'] 
//x取的是下标
for(var x in arr1){
    console.log(arr1[x])
}

var obj1 = {name:'张三',age:30}
//key 拿到的是属性名
for (var key in obj1){
    console.log(key,obj1[key])
}

var str1='asdfgasasdf'
for (var x in str1){
    console.log(x,str1[x])
}

b.for(表达式1；表达式2；表达式3){循环体}

执行过程：先执行表达式1，然后判断表达式2的结果是否是true，如果是true就执行循环体；执行完循环体，在执行表达式3
执行完表达式3，再判断表达式2的结果是否是true，如果是true有执行循环体；执行完循环体，再执行表达式3，以此类推
直到表达式2的结果是false，循环就结束

//计算 1+2+3+。。。+100
var sum = 0
for (var i=1;i<101;i++){
    sum += i
}
console.log(sum)

2.while循环

a.while(条件语句){循环体} 和python一样

var sum1 = 0
var i = 1
while (i<101){
    sum += i;
    i++;
}
console.log(sum1)

b. do-while循环：do{循环体}while(条件语句)；

执行过程，先执行循环体，然后判断条件是否成立。如果成立再执行循环体。。。
依次类推，直到条件不成立，循环结束

var sum2 = 0
var i = 1
do{
    sum += i;
    i++;
}while (i<101);
console.log(sum2)

3.break和continue(和python一样)

06函数

1.函数的声明

function 函数名（参数列表）{函数体}

a.function - 关键字
b.函数体 - 驼峰式：见名知义
c.参数：参数可以有默认值，有默认值的参数要写在后面。调用函数传参的时候，是按实参的位置来传参。

function sum1(num2,num1=1){
    console.log('求两个数的和')
    return num1+num2
}

console.log(sum1(10,20))
console.log(sum1(20))

函数没有return的时候，函数的返回值是undefined

function func1(){
    console.log('我是函数1')
}
console.log(func1())

2.函数的调用

函数名(实参列表)
调用过程和python一样

3.作用域

全局变量：声明在函数外面的变量(从变量声明到文件结束)
局部变量：声明在函数里面的变量(从变量声明到函数结束；函数的参数也是局部变量)

//aaa就是全局变量
var aaa =10
function func2(){
    
    //bbb就是局部变量
    var bbb = 20
    console.log(bbb,aaa)
    
    //函数中可以修改全局变量的值
    aaa = 100

    
    //函数中可以声明函数
    function func22(){
        bbb = 111
        console.log(bbb)
    }
}

func2()
console.log(aaa)

//可以将函数作为变量
var a = func2
a()

07数据类型

数字，字符串，布尔，列表，对象

1.数字：包含整数和小数(支持科学计数法)

var num1 = 10
var num2 = new Number()
console.log(num2+10)

2.字符串

//a.""和''括起来的字符集
//b.
var str1 = 'abc'
var str2 = "abc"
var str3 = '\n'
var str4 = '\\'

//e.获取字符串的长度：字符串.length
console.log(str1.length)

//f.获取单个字符：字符串[下标]
//下标：1.范围是0~长度-1
//2.如果越界，不报错，但是结果是undefined
//js中的字符串不能切片
console.log(str1[10])

//g.运算符
//js中字符串只支持+，不支持*
//字符串1+字符串2 -- 拼接两个字符串
//js中字符串可以和其他任何数据进行加操作，其效果都是字符串链接（会将其他数据转换成字符串）
console.log(100+'abc')
console.log('123'+'abc')

//h.字符串相关方法(查)
var strstr= 'abc123'
var re = strstr.replace(/\d+/i,'ooo')
console.log(re)

3.对象，构造方法（类）

var obj = {name:'hcy',age=18}
console.log(obj1.name,obj1['name'])

//声明构造方法
function Person(){
    this.name = 'abc'
    this.age = 18
    this.sex = '男'
}

var p1 = new Person()
p1.name = 'asdf'
p1.age = 20
p1.sex = '女'
console.log(p1,typeof(p1))

day25 js基础

01js基础语法

02变量的声明

03运算符

1.数学运算符：+，-，*，/，%，++，--

2.比较运算符：>,<,==（相等）,!=,<=,>=,===（完全等号）,!==,>==,<== 结果是布尔值

3.逻辑运算符：&&：（与运算），||：（或），！：（非）

4.赋值运算符：=,+=,-=,*=,/=,%=

5.三目运算符？：

6.运算符的优先级和python基本一样。可以通过括号来改变运算顺序

04分支结构

2.switch语句

05循环结构

js中的循环分为for循环和while循环

1.for循环

a.for-in(和python中的for循环一样)

b.for(表达式1；表达式2；表达式3){循环体}

2.while循环

a.while(条件语句){循环体} 和python一样

b. do-while循环：do{循环体}while(条件语句)；

3.break和continue(和python一样)

06函数

1.函数的声明

function 函数名（参数列表）{函数体}

函数没有return的时候，函数的返回值是undefined

2.函数的调用

3.作用域

07数据类型

数字，字符串，布尔，列表，对象

1.数字：包含整数和小数(支持科学计数法)

2.字符串

3.对象，构造方法（类）

猜你喜欢

热点阅读

day25 js基础

01js基础语法

02变量的声明

03运算符

1.数学运算符：+，-，*，/，%，++，--

2.比较运算符：>,<,==（相等）,!=,<=,>=,===（完全等号）,!==,>==,<== 结果是布尔值

3.逻辑运算符：&&：（与运算），||：（或），！：（非）

4.赋值运算符：=,+=,-=,*=,/=,%=

5.三目运算符 ？：

6.运算符的优先级和python基本一样。可以通过括号来改变运算顺序

04分支结构

2.switch语句

05循环结构

js中的循环分为for循环和while循环

1.for循环

a.for-in(和python中的for循环一样)

b.for(表达式1；表达式2；表达式3){循环体}

2.while循环

a.while(条件语句){循环体} 和python一样

b. do-while循环：do{循环体}while(条件语句)；

3.break和continue(和python一样)

06函数

1.函数的声明

function 函数名（参数列表）{函数体}

函数没有return的时候，函数的返回值是undefined

2.函数的调用

3.作用域

07数据类型

数字，字符串，布尔，列表，对象

1.数字：包含整数和小数(支持科学计数法)

2.字符串

3.对象，构造方法（类）

猜你喜欢

热点阅读

5.三目运算符？：