JavaScript学习（一）

被窝数羊达人、

已于 2023-11-16 15:45:08 修改

阅读量102

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 学习开发语言

于 2023-11-16 15:12:01 首次发布

本文链接：https://blog.youkuaiyun.com/specificallydddd/article/details/134434562

本文详细介绍了JavaScript的基本数据类型、运算符、Math对象、Number对象、字符串处理方法，包括模板字符串、类型转换以及屏幕输出、键盘输入和弹窗功能的使用，如alert、confirm、prompt和window.location/open方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.基本数据类型、操作和表达式

1.基本数据类型：

Number数值型对象

String字符型对象

Boolean布尔型对象

undefined未定义的值(变量未赋初值)

null空值

2.变量声明：

var i=1 , f=3.1415 , j;

var strIn='hello' , str="world";

var flag=true, bb=false;

//转义字符：\n , \t , \' , \" , \\

var a='You \ ' re the …, I\ ' ve ever  …' ;

var c= "D:\\abc\\a.jpg";

3.数值运算符

var a=3,b,c,d;

b=++a*3;//b=12

c=2+a*b;//c=50

d=c%3;//d=2c

4.Math对象

var a=3.4,b,c,d,e,f;

b=Math.sin(a);//b=sin(3.4)

c=Math.round(a);//c=3

d=Math.floor(a);//d=3

e=Math.ceil(a);//e=4

f=Math.pow(2,3);//23=8,ES7: f=2**3

5.Number对象

var a=Number.MIN_VALUE;

属性	意义
MAX_VALUE	最大值
MIN_VALUE	最小值
NaN	非数字
POSITIVE_INFINITY	正无穷
NEGATIVE_INFINITY	负无穷
PI	$\pi$ 值

6.字符串连接运算符

var first="我"，second，third;

second=first+"爱你";//second=我爱你

7.模板字符串 `${}`

third=`${first}爱你`;

8.隐式类型字符串

abc="Augest"+2015;//abc="Augest2015"(数值2015转换为字符串"2015",再进行连接)

cc=7* "3" ;//cc=21(字符串"3"转换为数值3，再进行数值计算)

dd=7* "Augest";//无法转换

9.显式类型转换

//数值转字符串：

var value = 2015;

str_value = String(value);

//或str_value = value.toString();

//转换为2进制：

str_value_2 = value.toString(2);

//字符串转数值：

str = "2015"; var number = Number(str);

var number = str.valueOf();

10.String属性与方法

方法名称	返回值
charAt	返回指定位置的字符
indexOf	返回参数在String中的位置
substring	指定位置[from,to)的字符串 substring(int startIndex)//从首字母起，到startIndex，最终结果取剩余的字符串
substr	指定位置与长度的字符串
toLowerCase	转小写
toUpperCase	转大写
replace	字符串替换
trim	ES9：删除字符串前后的空格

var str = "Height" ,ret;

ret = str.length; //ret=6

ret = str.charAt(2); //ret='i'

ret = str.indexOf('h'); //ret=4

ret = str.substring(0,3);//ret="Hei"

ret = str.substring(4);//ret="ht"

ret = str.substr(2,4); //ret="ight"

ret = str.toUpperCase(); //ret="HEIGHT"

11.String多行字符串赋值

var htmlString = "<div>\
This is a string.\
</div>";

12. String的分割

var message = 'I want to study happily';
var arr = message.split(' ');
console.log(arr[0]);            // "I"
console.log(arr[1]);            // "want"
console.log(arr[2]);            // "to"
console.log(arr[3]);            // "study"
console.log(arr[4]);            // "happily"

13.const类型变量

const a = 1;//无法修改
console.log(a);

14.Date对象

方法名称	返回值
toLocaleString	一个包含了Date信息的字符串
getDate	当前月的日期
getMonth	当前年的月份(0~11)
getDay	返回当前是星期几(0~6)
getFullYear	返回年份
getTime	返回当前日期的毫秒数
getHours	返回当前小时数(0~23)
getMinutes	返回当前分钟数(0~59)
getSeconds	返回当前秒数(0~59)
getMilliseconds	返回当前毫秒数(0~999)

var today = new Date();
var a = today.getDate;
var b = today.getMonth;
var c = today.getDay;
var d = today.getFullYear;
var e = today.getTime;
var f = today.getHours;

二.第一个程序

Hello World.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>JavaScript</title>
</head>    
<body>
  <script>
     document.write("Hello World");
  </script>  
</body>
</html>

三.屏幕输出和键盘输入

document.write()

<!DOCTYPE html>
  <html>
  <head>
    <script type="text/javascript">   
      var result = 42;
      document.write("The result is :", result, "<br/>");
    </script>
  </head>
  <body>
     <p>欢迎你! </p>
  </body>
  </html>

创建对话框 : alert, confirm和prompt
alert = window.alert
confirm = window.confirm
prompt = window.prompt

<script>
    var sum = 42;
    alert("The Sum is :" + sum + "\n");
    var answer = confirm("是否下载?");
    alert("你的选择是" + answer);
    name = prompt("What is your name?", "默认值");
    window.alert("你的名字是" + name);
  </script> 
<body>
  <p>欢迎你</p>
</body>

jump()、location

<head>
  <script>
    function jump()  {
       window.location = "http://www.baidu.com";
    }
</script> 
</head>
<body>
  <p onclick="jump()">欢迎你</p>
</body>

打开新窗口（open方法）

<script type="text/javascript">
   function jump()  {
     window.open("http://www.baidu.com", 
                 "myWinName",                      
                 "width=600,height=400,location=no");
   }
</script> 
</head>
<body>
  <p onclick="jump()">点击我弹出窗口</p>
</body>